通過上一章節的學習,我們的開發環境已經配置好了,接下來我們開始創建第一個sencha touch的項目,網絡上很多sencha touch的教程都是手動搭建項目的,
不過手動搭建的項目缺少一些sencha cmd對項目代碼打包壓縮編譯的關鍵文件,
所以在這里我們從創建項目開始都是使用sencha cmd工具,請確保上一章節中所有的環境配置都已經成功,
那么接下來我們開始我們的項目創建:
1.項目創建
在項目創建前,我們先確認下我們的sencha cmd的版本,
點擊開始==》運行==》cmd,
鍵入sencha,會顯示cmd的版本,
現在最新的是4.0,如果不是最新的版本,可以鍵入指令
sencha upgrade
該指令會自動從遠程服務器上更新sencha cmd的版本,
確認版本更新完畢后,我們來創建一個新的項目,
用cmd創建sencha touch的項目需要在sencha touch的sdk包的環境下進行,我們有兩種方式:
1.1 在sencha sdk包目錄下進行創建
點擊開始==》運行==》鍵入cmd,
一般默認顯示是系統用戶文件夾路徑下,,
我的sdk包被我拷到了iis的站點文件夾下D:\webtest\touch-2.3.1,
所以這里我輸入d:,然后回車,
cd D:\webtest\touch-2.3.1,
進入到sdk包目錄下,如圖:
這個時候,我們運行sencha cmd創建項目的指令
sencha generate app MyFirst ../MyFirst
generate app是創建一個新的項目,
第一個參數MyFirst對應的是項目的名稱,
第二個參數../MyFirst對應是項目的輸出地址,是相對路徑,指向是cmd當前指定路徑的上級目錄,
有web開發經驗的同學應該一眼就能看懂,
指令執行后,如圖所示:
在不報錯的情況下項目就創建成功了,
此時在我的D:/webtest目錄下就會生成一個MyFirst項目文件,這就是我們新創建的sencha touch項目,
因為已經在服務站點路徑下,如果生成的項目路徑不在web服務站點路徑下,可以把項目拷過去,
接着我們可以打開瀏覽器通過http://127.0.0.1/MyFirst/進行訪問,
在等在文件載入完成后,我們便能看到我們第一個項目了,如圖:
是不是很興奮,你可以試着調整下瀏覽器的窗口大小,整個項目完全是響應式的,會根據你的窗口大小調整布局
有些人可能想直接點擊新建項目下的index.html文件運行項目,此時頁面會卡在載入界面並報如下錯誤:
這是因為cmd創建項目的時候,會生成一個bootstrap.json文件,這個文件的訪問是在development.js中通過xhr的方式實現的
var xhr = new XMLHttpRequest(); xhr.open('GET', 'bootstrap.json', false); xhr.send(null);
需要http請求,所以會報錯,
不過整個項目完成后用cmd指令打包后,json文件都會被去掉,這個時候就不會出現該問題了,
接下來我們講一下另一種創建方式
1.2 通過cmd指令直接指定sdk路徑創建
該創建方式跟上一種大同小異,唯一的區別在於,不用先將指令指定到sdk包路徑下了,我們可以直接用
sencha -sdk D:\webtest\touch-2.3.1 generate app MyFirst D:\webtest\MyFirst
我們在generate app 前面加上了
-sdk D:\webtest\touch-2.3.1,
-sdk后面跟的就是我們的sencha touch的sdk包的路徑,這樣執行上面的指令,跟我們方法一里的效果是一樣的,
指令執行后,我們的MyFirst項目就被創建完成了
下一章我們將對生成的項目結構做系統的分析