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");