發(fā)布時(shí)間:2016-05-05 19:50:59編輯發(fā)布:一網(wǎng)天行APP小程序軟件開發(fā)公司 瀏覽量:
Sencha Touch使得你可以便捷地創(chuàng)造一個(gè)基于HTML5的手機(jī)應(yīng)用,支持Android、iOS和黑莓等設(shè)備,并且在瀏覽器中創(chuàng)造原生APP般的體驗(yàn)。
你需要準(zhǔn)備好
首先,你需要下載免費(fèi)的Sencha Touch 2 SDK 和 SDK Tools (或者Sencha Cmd ) 。你還需要:
一個(gè)本地的web server
安裝
首先,把SDK壓縮包解壓到你的項(xiàng)目目錄。最好,這個(gè)目錄可以被你的HTTP服務(wù)器訪問。比如,你可以從你瀏覽器訪問 http://localhost/sencha-touch-* 來訪問Sencha Touch的文檔。
你還需要運(yùn)行SDK Tools( Sencha Cmd,注意SDK Tools 和 Sencha Cmd只需要安裝一個(gè),在我的機(jī)器上,Sencha Cmd工作更加正常)安裝程序。SDK Tools會(huì)在你的PATH環(huán)境變量中增加sencha命令行工具,你可以用它來產(chǎn)生一個(gè)全新的模板應(yīng)用。為了檢查你的SDK tools是否安裝好,切到你的Sencha Touch目錄,輸入sencha命令。比如:
2.
$ sencha
3.
Sencha Command v2.0.0
for
Sencha Touch 2
4.
Copyright (c) 2012 Sencha Inc.
5.
......
注意:你必須在下載好的SDK文件夾或者產(chǎn)生好的Touch app目錄中使用sencha命令
產(chǎn)生你的第一個(gè)應(yīng)用
現(xiàn)在,你有了Sencha Touch和安裝好的SDK tools,于是可以開始生成一個(gè)應(yīng)用了。保證你仍然在Sencha Touch SDK目錄下,輸入下列命令:
2.
[INFO] Created file /Users/nickpoulden/Projects/sencha/GS/.senchasdk
3.
[INFO] Created file /Users/nickpoulden/Projects/sencha/GS/index.html
4.
[INFO] Created file /Users/nickpoulden/Projects/sencha/GS/app.js
5.
...
這將會(huì)產(chǎn)生一個(gè)叫做GS的Sencha Touch應(yīng)用骨架,放在../GS目錄下。骨架應(yīng)用中包含了所有你創(chuàng)建一個(gè)Touch應(yīng)用所需要的東西,包括默認(rèn)的index.html,一份Touch SDK的拷貝,CSS,圖片和打包你的應(yīng)用所需的配置文件。
讓我們檢查一下你的應(yīng)用是否生成成功。假設(shè)你的SDK位于webroot文件夾,你應(yīng)該能從http://localhost/GS看到默認(rèn)app:
瀏覽代碼
使用你最喜歡的IDE或者文本編輯器打開GS文件夾。文件夾結(jié)構(gòu)如下:
下面有一個(gè)對(duì)于每個(gè)文件和文件夾的簡介:
打開app.js,你應(yīng)用的主入口點(diǎn)。
launch函數(shù)是你應(yīng)用的入口點(diǎn)。在默認(rèn)應(yīng)用下,他將會(huì)先隱藏loading畫面,然后創(chuàng)建一個(gè)Main視圖的實(shí)例,并把它加入Viewport。
Viewport采用的卡片布局,讓你可以添加元件到目錄中。默認(rèn)應(yīng)用添加Main視圖到viewport,然后我們看看Main視圖的代碼吧。
打開app/view/Main.js,我們可以修改title屬性:
2.
title:
'Woohoo!'
我們還可以修改頁面內(nèi)容:
現(xiàn)在,刷新你的瀏覽器,看看你的修改結(jié)果。
北京
濟(jì)南
成都
西安