1.目錄

• 移動框架簡介，為什麼選擇Sencha Touch？
• 環境搭建
• 建立專案框架，框架檔案簡介
• 建立簡單Tabpanel案例
• 自定義圖示的方式
• WebApp產品測試和釋出
• HTML5離線快取
• 釋出成Android/IOS本地app應用

移動框架簡介，為什麼選擇Sencha Touch？

目前市面上，移動應用web框架，也算是風生水起，不斷湧現，各個都稱自己最牛逼。常見的幾個框架主要有jquery Mobile，Dojo Moble，Sencha Touch，我這裡是極端推薦Sencha Touch，至於它多優秀，不是我說了算，只有你親自用過，做過專案之後才能領悟他的魅力；至於從沒用過的口水黨，請繞道。

Sencha Touch是使用HTML5，CSS3和JavaScript來實現的，它可以在Android、IOS、WP、黑莓平臺上使用，也可以在其他帶有HTML5相容的Web瀏覽器的平臺上使用。更多詳細介紹可以到官方閱讀http://www.sencha.com/products/touch/，這裡不羅嗦。

至於我為什麼選擇Sencha Touch，理由有如下幾點：

• Sencha 旗下的產品，如果你熟練Extjs，幾乎是零學習成本，平滑過渡到Touch開發，Sencha是一個非常活躍的組織，技術更新和支援都有很好的保障，世界財富100強裡，50%都在用他們的產品
• 完美支援各大移動平臺Android、IOS、WP、BlackBerry等，同時可以執行在任何HTML5相容或以webkit為核心的瀏覽器上（chrome，safari，360|搜狗極速模式）等，一次編寫，n次複用
• 採用超強的cmd壓縮、Html5快取和over-the-air技術，離線訪問，解決您對流量的擔憂
• 完美支援本地打包，一行命令即可將整個WebAPP打包成為NativeApp，非常方便，不需做任何變更（令我震驚的是可以直接通過ajax訪問遠端的服務沒有跨域問題）
• MVC開發模式，充分解耦，層次分明
• 針對不同平臺，區別對待，一個app，phone和tablet兩種展現
• 便捷的Sencha Cmd命令工具，類似ruby的命令列，輔助開發
• 豐富的報表控制元件
• 業界最完備、精緻的API文件，豐富的學習資料，幾乎一看就懂，強大的forum支援
• 穩定性、JSONP、相容性等小細節，堪稱完美
• 等。
• 更多介紹請看API：http://docs.sencha.com/touch/2.2.1/

環境搭建

1.下載sencha Touch SDK包http://www.sencha.com/products/touch/download/

2.確認本機安裝了jdk1.6+，1.7最好

3.Ruby1.9.3或者更早的版本，但一定不能安裝2.0的，下載地址：http://rubyinstaller.org/downloads/

4.android-sdk-tools，如果你不想打包成nativeApp，可以不用下載

5.Sencha Cmd 下載地址：http://www.sencha.com/products/sencha-cmd/download

6.注意將jdk，ruby，sencha cmd都新增到環境變數

Sencha Cmd 能幹什麼？詳見：http://docs.sencha.com/touch/2.2.1/#!/guide/command

建立專案框架

ok，環境搭建完畢，下面我們通過sencha cmd（一下簡稱cmd）的一行命令建立專案框架

#  首先確認進入到了sencha-touch-2-sdkcd /path/to/sencha-touch-2-sdksencha generate app MyApp /path/to/www/myapp

ok，很簡單我們生成了自己的專案架構，以後所有的開發都在這個專案架構中開發。

框架檔案簡介

.sencha：cmd命令執行的一些配置引數

app：整個專案

resources：專案的資原始檔，包括css，images，icons[app圖示]，startup[啟動閃屏圖片]

touch：touch的核心包，原始檔，資原始檔等

app.js：整個專案的入口，配置了需要載入那些js檔案等等

index.html：app啟動頁面

這裡需要重點講下app.json檔案和packager.json檔案

從st2.x開始，專案啟動時候載入的js，css等並不像以前一樣全都寫在index.html，而是通過app.json配置的形式來動態載入

st2.x的啟動載入方式有多種，你可以參考http://www.cnblogs.com/dowinning/archive/2012/03/23/2413071.html

之所以保持官方這種方式，是因為後期我們可以直接通過cmd命令對專案壓縮釋出，或者打包等，如果破壞了目錄結構，cmd將無法執行。

更詳細介紹請看官網：http://docs.sencha.com/touch/2.2.1/#!/guide/command_app

app.json淺析

通過IIS或者VS的IIS Express可能無法載入該MIME型別，需要手工配置MIMEhttp://www.cnblogs.com/qidian10/p/3289816.html

app.json檔案中注意js部分，預設開發的時候採用的是sencha.js,這將導致整個app載入js的時候都是載入st的原始碼檔案，速度會非常慢，這裡我改成sencha-all.js檔案，直接載入他編譯好的包，效率將大大提升

packager.json該檔案是為了app打包用的，等到專案釋出的部分再解析

建立簡單Tabpanel案例

我們開啟app資料夾，在view裡面新增如下檔案：

各個部分程式碼如下：

 其他資料夾的main檔案和favorite的類似，只需要改下標題和iconCls即可，下載地址:http://files.cnblogs.com/qidian10/view.rar

當然這些view、store、model、controller檔案，你完全可以通過cmd命令建立

cd /path/to/www/myappsencha generate model User id:int,name,email
如果知道命令引數，直接輸入：sencha generate model

 ok，建立完成這些檔案，你應該可以看到自己的介面了，但遺憾的是估計你看不到你的圖示iconCls的圖示，應為有兩個圖示是我自定義的。

SenchaTouch裡如何使用自己定義的圖示也是一門很大的學問，ST採用sass技術，圖示在2.2裡面全部改成了字型的形式，也就是你看到的圖示其實是一個字型（例如A）

自定義圖示的方式

 那麼如何在Sencha Touch 2.2 裡自定義icon圖示呢？提供一種簡單方法http://www.cnblogs.com/qidian10/p/3292669.html

 學會自定義icon後，將需要的icon，CSS加入到app.json的css塊中

WebApp產品測試和釋出

ok，不出意外，現在一個完整的demo應用已經展現在你面前了。

到目前為止，如果你不嫌費流量和載入效率的話，其實一個應用已經完成了，你可以直接用了。

但是Sencha給我們提供了更加優秀的app釋出方式，可以直接將專案中需要的資源壓縮打包，進行html5的離線快取，這樣，我們的應用程式在第一次載入完成後，在離線情況下也是可以使用的（資料訪問除外）

Sencha給我們提供了4種釋出方式

• testing:供測試，QA使用版本
• package：脫離web server，本地html檔案資源包
• production：正是釋出的webapp產品
• native：打包成android apk，或者ios app本地安裝檔案

我們只需要在cmd裡，執行一行命令即可釋出我們的產品:

#production,testing,native,package#進入到你的通過cmd生成的MyApp資料夾中sencha app build production

ok，專案成功build,你可到MyApp/build/MyApp/Production中看生成的檔案，你直接打index.html你會發現瞬間app就打開了，因為cmd幫我們做了壓縮工作，所有的css，js都壓縮了，而且app的mvc核心檔案都打包壓縮到app.js裡，減少了請求次數。

HTML5離線快取

如果你將已釋出好的app，放到remote server上，第一次開啟index.html，然後切斷網路，再次重新整理index.html你會發現仍然可以顯示。原因就是他採用了html5的離線快取技術

Sencha Touch App每次開啟都會檢查伺服器是否有變動，如果有變動，會自動觸發app.js裡的onUpdated方法，提醒使用者更新

如果HTML5離線快取小白的同學，趕緊補課：http://www.cnblogs.com/qidian10/p/3292876.html

哦對了，這裡還需要新增MIME型別以支援html5的快取變更檔案cache.appcache，application/cache-manifest

釋出成Android/IOS本地app應用

如果你覺得采用webapp的方式，仍然不夠理想，那麼可以用st的另一把利器，打包Sencha Touch webapp為本地native app

這裡介紹如何將Sencha Touch 打包為Android的apk

首先確認安裝了android-sdk-tools，jdk，下面開始本節的最後一個內容：

1.生成android證書

　　簡單起見，我們將私鑰倉庫（keystore）建立在X:/目錄，將私鑰倉庫（keystore），別名（alias） 和密碼（password）都設為"hzyapp"。

$ keytool -genkey -v -keystore hzyapp.keystore -alias hzyapp -keyalg RSA -keysize 2048 -validity 10000

Enter keystore password: (I entered "hzyapp")What is your first and last name?  [Unknown]: jack chenWhat is the name of your organizational unit?  [Unknown]: itWhat is the name of your organization?  [Unknown]: hzyWhat is the name of your City or Locality?  [Unknown]: jiaxingWhat is the name of your State or Province?  [Unknown]:  zhejiangWhat is the two-letter country code for this unit?  [Unknown]:  CNIs CN=Patrick Chu, OU=Training, O=Sencha, L=Redwood City, ST=California, C=US correct?  [no]:  yGenerating 2,048 bit RSA key pair and self-signed certificate (SHA1withRSA) with a validity of 10,000 days    for: CN=jack chen, OU=it, O=hzy, L=jiaxing, ST=zhejiang, C=CNEnter key password for <hzyapp>    (RETURN if same as keystore password):  [Storing hzyapp.keystore]

 ok，這樣你就產生了一個hzyapp.keystore證書，備用。

上面我們講到還有一個檔案packager.json沒解析，這裡解析下，該檔案就是打包本地應用的配置檔案，開啟檔案內容配置對android的配置如下：

{    "applicationName":"HzyApp",    "applicationId":"com.hwayifashiongroup.HzyApp",/*必須是包括兩個點*/    "bundleSeedId":"KPXFEPZ6EF",    "versionString":"1.0",    "versionCode":"1",    "icon": {        "36":"resources/icons/Icon_Android36.png",        "48":"resources/icons/Icon_Android48.png",        "57":"resources/icons/Icon.png",        "72":"resources/icons/Icon~ipad.png",        "114":"resources/icons/[email protected]",        "144":"resources/icons/[email protected]"    },    "inputPath":"./",    "outputPath":"../build/",    "configuration":"Debug",    "platform":"Android",/*平臺,還有IOS等型別*/    "certificatePath":"X:/hzyapp.keystore",/*證書*/    "certificateAlias":"hzyapp",/*證書別名*/    "certificatePassword":"hzyapp",/*證書密碼*/    "sdkPath":"D:/GreenSoftWare/Android/android-sdk-windows",/*android-sdk路徑*/    "androidAPILevel":"8",/*Android版本，我用了2.2*/    "permissions":[            "INTERNET",            "ACCESS_NETWORK_STATE",            "CAMERA",            "VIBRATE",            "ACCESS_FINE_LOCATION",            "ACCESS_COARSE_LOCATION",            "CALL_PHONE"        ]}

檔案配置成功後，執行最關鍵的一步，打包命令

 如果全線飄綠，那恭喜你，你成功了，趕緊到/build/MyApp/native目錄下找你的apk吧，哈哈

ok，安裝到手機上，測試，一切正常，速度剛剛的，當然真正的和nativeapp比，必然會存在一些不足，但對於企業級的移動應用足夠了。

文章最後再爆一料，預設產生的app，安裝到android後，title bar是沒有隱藏的，這個你只需要去更改cmd的模版檔案即可

SenchaCmd/Sencha/Cmd/3.1.2.342/stbuild/st-res/android/AndroidManifest.xml，我想你該知道怎麼做了吧！(*^__^*)

OK了，本節基本上貫穿了整個Sencha Touch開發的全貌。

下節課將會介紹真正的Sencha Touch細節開發了，深入到app裡的各個層面（model，store，view，controller），注意事項，profile不同裝置的適配等，敬請期待。

能堅持看完的朋友，別忘了支援下哦