製作原生APP

H5應用可以打包生成蘋果或安卓原生應用，一般也稱為混合應用程式(Hybird App)。

並不是所有的H5應用都適合打包成原生應用，如果把一個普通的手機網站包裝成原生應用，即使它製作的外觀像是原生應用， 但切換頁面時的網頁重新整理和載入導致速度慢、費流量、體驗差，並不適合製作APP，而且像蘋果應用市場等也容易拒絕此類APP上架。 為了接近原生應用的使用者體驗，可打包的H5應用應是支援多邏輯頁的單網頁應用，也就是變臉式應用。

我們製作的原生應用最大的特點是它與H5應用是分離的，從而在應用市場上架後仍可隨時輕鬆升級應用。 這種應用我們也把它稱為原生殼。

編譯原生殼

[任務]

• 一次開發，多平臺執行：將我們製作的H5應用打包生成原生APP安裝到安卓及蘋果手機上。
• 一次上線，輕鬆升級：更新H5應用並上線，檢視已安裝的原生應用是否已自動及時更新。

準備工作：

• 雲編譯環境，安裝Intel XDK，註冊好使用者帳號。
• 安卓和蘋果的應用證書。安卓證書可以自行製作，蘋果證書須註冊蘋果開發者帳號後生成。

使用Intel XDK的最大挑戰是網路。在國內訪問可能有問題，或者很慢，或者連不上。必要時可以使用VPN代理等手段連線。

開啟Intel XDK，建立一個新的"Html5+Cordova"專案：

點左上角的"PROJECTS"，進入專案設定，裡面有外掛管理(Plugin Management)，編譯設定(Build Settings)和圖示及啟動畫面設定(Launch Icons and Splash Screens)。 外掛是各種手機原生語言開發的庫，比如相機、支付寶及微信支付等，本節不做重點介紹。圖示和啟動畫面比較簡單，準備好圖片選上就行。

編譯設定中要注意需要每個平臺分別設定，請特別注意：

• 在訪問許可權中，在"Navigation"欄中，設定為"*"，表示允許訪問外網地址。
• 安卓及蘋果的開發證書在軟體右上角使用者帳號中先新增好，才能在編譯設定中選擇。
• 安卓有個選項“Optimize with crosswalk”，用於把瀏覽器與應用一起打包以便在各種安卓手機上有良好的相容性，缺點是生成的包要大20M。 練習時可不選，實際專案中建議選上。

xdk專案目錄下的檔案intelxdk.config.additions.xml中，設定上H5應用的地址，加上這句：

<content src="http://myserver/myproject/index.html?cordova=1" />

注意，H5應用後面加上引數cordova={殼版本}，框架將識別這個引數，進入原生應用模式，自動載入外掛介面。

還有找到debuggable選項把它設定為true，以便可以之後在電腦上連線裝置除錯H5應用。

<preference name="debuggable" value="true" />

配置好後，進入編譯頁，開始編譯。

編譯好後，先不要立即安裝到手機上，還有重要的一步，將外掛介面更新到H5應用中去，這樣在H5應用中可呼叫原生功能。

更新原生外掛介面到H5應用。

用winzip等工具解壓生成的apk名或ipa包（可以先改名為.zip檔案再點開），在安卓apk包的assets/www目錄中（或蘋果ipa包的Payload/{應用名}.app/www目錄下），找到以下三個檔案或目錄：

cordova.js
cordova_plugins.js
plugins/ （整個目錄）

把安卓APP中的這些檔案複製到H5應用的目錄server/cordova下面，把蘋果APP中的這些檔案複製到server/cordova-ios下面。這樣就完成了H5應用中設定原生外掛介面。

注意：當H5專案中有多個應用時，plugins目錄直接取並集即可，而cordova_plugins.js檔案需要小心合併。

這時將apk包或ipa包安裝到手機上，開啟應用程式，看看是否能正常執行。

我們在H5應用中書寫程式碼時，可以檢查全域性變數g_cordova。 例如，想要僅在原生應用中顯示某個頁面，在微信或瀏覽器中訪問時提示錯誤：

if (! g_cordova) {
    app_alert("本功能請在APP中點選進入");
    return;
}
MUI.showPage("#xxx");