鍍金池/ 教程/ 嵌入式/ 云端 Cordova
云端 Cordova
UI 框架 jQuery Mobile
配置文件 config.xml
UI 框架 Ionic Framework
Plugin 開發(fā)
slides & books
應(yīng)用圖標 icon 和啟動頁面 SplashScreen
Sample 工程解析
使用 Hooks 自定義 build 過程
JS 是如何調(diào)用本地 API 的？
deviceready 事件
為 Android APK 簽名
調(diào)試工具 Debug
幾個不可或缺的 lib
環(huán)境搭建（Windows / Android）
Native API 的使用

云端 Cordova

通過 Web 界面上傳 HTML/CSS/Javascript 源代碼后，在云環(huán)境（ICE）中把這些代碼轉(zhuǎn)換成不同平臺的 app。以下簡單試用了一下 PhoneGap Build、AppBuilder、Appery.io、Monaca、SAE 云窗調(diào)試器等5個服務(wù)。

  • 編譯出來的 APK 文件除過 Monaca 獲取的權(quán)限太多無法安裝、SAE 云窗調(diào)試器只是調(diào)試工具，基本都能夠很好的實現(xiàn)自動化編譯。
  • Appery.io 編譯出來的 APK 文件最大2.3 M、PhoneGap Build 編譯出來的最小210 K。
  • PhoneGap Build 只是打包所以操作最簡單。
  • AppBuilder（Icenium）在各個方面都表現(xiàn)良好。

（1）PhoneGap Build https://build.phonegap.com/

①可以通過 Git 地址或者 zip 文件上傳代碼

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.1.png" alt="picture15.1" />

②上傳代碼

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.2.png" alt="picture15.2" />

③點擊“Ready to Build”

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.3.png" alt="picture15.3" />

④左下角各個平臺開始編譯

picture15.4

⑤紅色代表有錯誤，藍色代表編譯成功，點擊成功的圖標即可下載 app

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.5.png" alt="picture15.5" />

⑥點擊項目名“PG Build App”進入應(yīng)用詳細

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.6.png" alt="picture15.6" />

同時 Phonegap Build 被集成到了 Adobe 的其他產(chǎn)品中，比如 Dreamweaver CC、Edge Code CC 中。相關(guān)的 Key 需要提前設(shè)置，比如：在 Apple 的開發(fā)中心創(chuàng)建認證文件，Cert File->p12 File->App ID->Device ID->Provisioning profile。然后在 Phonegap 的 Account 中，在 Signing Keys 中“add a key”選擇 p12和 mobileprovision 文件。具體參考：http://docs.build.phonegap.com/en_US/signing_signing-ios.md.html

（2）AppBuilder（Icenium） http://www.telerik.com/appbuilder

①創(chuàng)建項目

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.7.png" alt="picture15.7" />

②IDE 主界面

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.8.png" alt="picture15.8" />

③選擇菜單 Add > Add from Archive

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.9.png" alt="picture15.9" />

④確認上傳文件的位置及內(nèi)容

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.10.png" alt="picture15.10" />

⑤選擇菜單 Run > build

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.11.png" alt="picture15.11" />

⑥build 成功后即可下載 app

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.12.png" alt="picture15.12" />

（3）Appery.io（Tiggzi） http://appery.io/

①Dashboard 主界面

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.13.png" alt="picture15.13" />

②創(chuàng)建項目

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.14.png" alt="picture15.14" />

③IDE 主界面

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.15.png" alt="picture15.15" />

④App 設(shè)置中可以看到使用的 PhoneGap3.3.0

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.16.png" alt="picture15.16" />

⑤不能上傳文件，所以可以通過"Create New"來新建頁面

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.17.png" alt="picture15.17" />

⑥從菜單“Export”導(dǎo)出 app

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.18.png" alt="picture15.18" />

⑦導(dǎo)出中

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.19.png" alt="picture15.19" />

⑧導(dǎo)出完成后即可下載 app

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.20.png" alt="picture15.20" />

（4）Monaca http://monaca.mobi/

①Dashboard 主界面

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.21.png" alt="picture15.21" />

②創(chuàng)建項目（有很多模板可以選擇）

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.22.png" alt="picture15.22" />

③選擇一個模板后輸入項目名稱

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.23.png" alt="picture15.23" />

④項目創(chuàng)建完成

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.24.png" alt="picture15.24" />

⑤點擊“Launch IDE”進入 IDE 主界面

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.25.png" alt="picture15.25" />

⑥選擇 Build

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.26.png" alt="picture15.26" />

⑦Build 中

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.27.png" alt="picture15.27" />

⑧Build 完成后可下載 app

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.28.png" alt="picture15.28" />

（5）SAE 云窗調(diào)試器 http://sae.sina.com.cn/?m=mobile

①需要在 SAE 應(yīng)用管理中心新建一個移動應(yīng)用的托管后編輯代碼

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.29.png" alt="picture15.29" />

②修改完代碼后可以在 移動應(yīng)用 > 應(yīng)用打包 處 build

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.30.png" alt="picture15.30" />

③Build 成功后可下載 app

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.31.png" alt="picture15.31" />

④安裝的云窗戶調(diào)試器

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/15.32.png" alt="picture15.32" />

Popular ICEs for mobile hybrid app development