由於最近一直忙着android原生的開發,很久沒有更新博客了,官方的sencha cmd工具功能非常強大,創建項目,壓縮項目,打包安裝程序都能輕松實現,這講我們就給大家介紹下如何使用sencha cmd來打包我們的sencha touch項目,
為了更好地向大家演示如何打包一個sencha touch的項目,我們用sencha cmd創建一個演示項目,如果你的sencha cmd環境還沒有配置,請參照sencha touch 入門系列 (二)sencha touch 開發准備進行配置。
首先在開始-》運行中輸入cmd,回車,打開命令行工具,cd指令進入到我們的sencha touch的sdk目錄中,執行項目創建的指令:
此時在webtest路徑中便創建了一個testPackage的項目,我們打開項目中創建生成的packager.json文件,這個就是我們將sencha touch項目打包成安裝程序的默認配置文件
{ /** * @cfg applicationName * @required * 這個屬性是用來配置你的應用程序在移動設備上安裝后所顯示的應用名稱 * 如果是ios程序,這個屬性必須匹配你的應用在 Apple Provisioning Portal的名稱 */ "applicationName":"testPackage", /** * @cfg applicationId * applicationId這個屬性是你項目的命名空間,在android上即你的包名(packagename),根據android官方的要求,這個名稱應該 * 以域名倒過來的方式命名,如:com.test.myapp,以保證包名的唯一性,使用sencha cmd打包android項目時這個屬性必須這么配置 * 否則打包時會報錯 * 在ios設備上,這個屬性必須匹配你的應用在Apple Provisioning Portal上的名稱 */ "applicationId":"com.test.myapp", /** * @cfg bundleSeedId * ios配置,Apple Provisioning Portal的aplication ID前的10個字符串 */ "bundleSeedId":"KPXFEPZ6EF", /** * @cfg versionString * @required * 你的應用的版本號.字符展示 */ "versionString":"1.0", /** * @cfg versionCode * @required * Version code,應用的版本號,這個屬性只對android有效,對應android的AndroidManifest.xml中的versionCode,這個值必須是整數 * 通常情況下,我們版本更新的判斷都是依據這個值來的,一般新的版本會在原有版本的versionCode的值上進行增加,而VersionString只是用來展示給用戶看的版本號 */ "versionCode":"1", /** * @cfg icon * icon 顧名思義,即我們的應用程序的圖標位置 * 在ios中,請參考ios的文檔進行配置,地址如下 * https://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html * * 在android中,請參考android的文檔進行配置,地址如下 * http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html * * iOS 使用 57,72, 114 和144,android使用 36, 48 和 72, 如果你打包的是android程序,你可以忽略ios的圖標 */ "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/Icon@2x.png", "144":"resources/icons/Icon~ipad@2x.png" }, /** * @cfg inputPath * @required * inputPath即輸入路徑,代表你的sencha touch項目相對於packager.json配置文件所在的路徑,默認情況下這里都不需要進行修改 */ "inputPath":"./", /** * @cfg outputPath * @required * outputPath 即輸出路徑,如果你不修改,默認會在你的st項目中生成一個build文件夾,存放到build路徑下 */ "outputPath":"../build/", /** * @cfg configuration * @required * 這個屬性用來配置你的項目是用來調試的還是用來發布的, * Debug 即調試模式 * Release 即發布模式 */ "configuration":"Debug", /** * @cfg platform * @required * platform 用來配置你的項目的打包平台 * - iOSSimulator ios模擬器 * - iOS ios真機 * - Android android真機 * - AndroidEmulator android模擬器 * 這里我們打包android程序,設置成android */ "platform":"Android", /** * @cfg deviceType * @required * 設備類型 * 這個屬性是針對ios的,如果是android設備就不需要配置 * * 可選配置: * - iPhone iphone手機 * - iPad iphone平板 * - Universal 全兼容 */ "deviceType":"Universal", /** * @cfg certificatePath * 證書路徑,如果你發布的android版本是Release的,那這個證書路徑就必須設置,即keystore的路徑, * keystore可以使用指令生成,也可以使用eclipse來生成,這里我設置的自己的keystore路徑,android打包中如果你上面的configration配置的是debug,可以不用設置證書路徑
* android會自動產生一個debugkeystore來進行臨時發布,但是發布Release的時候必須設置這個屬性 */ "certificatePath":"D:/webtest/CM/CloudMarket-key.keystore", /** * @cfg certificateAlias * 證書的別名 */ "certificateAlias":"cloudMarket", /** * @cfg certificatePassword * 證書對應的密碼 */ "certificatePassword":"whf871125", /** * @cfg provisionProfile * 從Apple's provisioning portal上下載的provision profile (APP_NAME.mobileprovision)的路徑 */ "provisionProfile":"", /** * @cfg notificationConfiguration * 提示窗口的配置可以設置“debug”,“release”,如果你不使用提示欄就設置為空 */ "notificationConfiguration":"", /** * @cfg sdkPath * android sdk的路徑. */ "sdkPath":"D:/android/adt-bundle-windows-x86-20130522/sdk", /** * @cfg androidAPILevel * android的apiLevel,對應的android sdk的版本,這里相當於配置android應用最低支持的api版本,關於android的api Level可以到下面的地址去閱讀 * http://developer.android.com/guide/appendix/api-levels.html. * 確認你在android sdk manager里已經安裝了對應的sdk api 版本 (android_sdk/tools/android) * 這里我們設置的是8,即android 2.2版本 */ "androidAPILevel":"8", /** * @cfg {Array[String]} permissions * android的應用權限,關於android的應用權限介紹參考: * http://developer.android.com/reference/android/Manifest.permission.html#ACCESS_CHECKIN_PROPERTIES */ "permissions":[ "INTERNET", "ACCESS_NETWORK_STATE", "CAMERA", "VIBRATE", "ACCESS_FINE_LOCATION", "ACCESS_COARSE_LOCATION", "CALL_PHONE" ], /** * @cfg {Array[String]} orientations * @required * 手機屏幕的旋轉配置 */ "orientations": [ "portrait",//豎直 "landscapeLeft",//左屏幕方向的橫屏 "landscapeRight",//右屏幕方向的和平 "portraitUpsideDown"//倒過來的豎屏 ] }
基本的配置我們參照上面的注釋來配置就可以了,關於keystore的生成,可以參考這篇教程:
http://www.cppblog.com/fwxjj/archive/2014/03/13/116208.html
配置好上面的packager.json后,我們用cmd工具進入到項目路徑下,執行sencha app build native
如圖:
只要配置沒有問題就會在項目路徑下生成build文件夾,文件夾里的內容如圖
native文件夾中即壓縮的st項目,
native-packager-mobile中即會生成我們所需的安裝程序
這樣我們的打包就完成了
注:sencha touch 目前自帶了一些native api 即用來調用相機,gps這類的原生api,官方文檔中如果注明支持sencha packager的,那么sencha cmd打包安裝程序的時候會自動實現該功能,如果sencha packager不支持的,那只有通過phonegap的方式實現了,在sencha touch中,所有的native api都會對實現方式進行判斷,以照相機為例:
Ext.define('Ext.device.Camera', { singleton: true, requires: [ 'Ext.device.Communicator', 'Ext.device.camera.Cordova', 'Ext.device.camera.Sencha', 'Ext.device.camera.Simulator' ], constructor: function() { var browserEnv = Ext.browser.is; if (browserEnv.WebView) { if (browserEnv.Cordova) { return Ext.create('Ext.device.camera.Cordova'); } else if (browserEnv.Sencha) { return Ext.create('Ext.device.camera.Sencha'); } } return Ext.create('Ext.device.camera.Simulator'); } });
這里對native api的實現進行了判斷,從而選擇使用哪種方式,由於sencha touch的native api通過sencha packager實現的比較有限,且復雜的功能無法自定義,然而phonegap不光自帶的api較多,且擁有強大的插件機制可以讓開發者自定義api插件,所以實際開發中可能使用phonegap打包的情況更多,
下一講我們將講解如何使用phonegap來進行項目打包