sencha touch 入門系列 (三)sencha touch 項目創建


  通過上一章節的學習,我們的開發環境已經配置好了,接下來我們開始創建第一個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項目就被創建完成了

 

  

     下一章我們將對生成的項目結構做系統的分析

 

    

    

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM