咳咳，圖片複製不到文章裡面來，大家去我的資源裡下載吧，PDF版的。

HTML5plus 移動 App開發入門

更新時間：2014年 4月 17日

HTML5 Plus 應用概述

HTML5 Plus 規範

通過 HTML5 開發移動 App 時，會發現 HTML5 很多能力不具備。為彌補 HTML5 能力 的不足，在 W3C 中國的指導下成立了 www.HTML5Plus.org組織，推出 HTML5+規範。

HTML5+擴充套件了 JavaScript 物件 plus，使得 js 可以呼叫各種瀏覽器無法實現或實現不佳的系統能力，裝置能力如攝像頭、陀螺儀、檔案系統等，業務能力如上傳下載、二維碼、地圖、支付、語音輸入、訊息推送等。

HBuilder 的手機原生能力呼叫分 2 個層面：

a)   跨手機平臺的能力呼叫都在 HTML5+ 規範裡，比如二維碼、語音輸入，使用

plus.barcode 和 plus.speech。編寫一次，可跨平臺執行。

b)   JS Bridge是另一項創新技術，通過 js 可以直接調 ios 和 android 的原生 API，這部 分就不再跨平臺，比如調 ios game center，或在 android 手機桌面建立快捷方式。 JSB 的用法是，var obj= plus.android.import("android.content.Intent");，將一個原生對 象 android.content.Intent 對映為 js 物件 obj，然後在 js 裡操作 obj物件的方法屬性就可以了。

HTML5+ App

使用 HTML5+開發的移動 App 並非 mobileweb 頁面。這是新手最容易混淆的地方。 mobileweb 的檔案存放在 web 伺服器上，而移動 App 的檔案存放在手機本地，編寫移動 App 的 html、js、css檔案被打包到 ipa 或 apk 等原生安裝包，在手機客戶端執行。

當然這些移動 App 裡某些頁面也可以繼續從伺服器端以網頁方式下行。

所以 mobile web，在 HBuilder 裡新建專案時，屬於 web 專案。不要放置到移動 App 項 目下。mobile web 專案也不能真機聯調和打包。

舉幾個例子。

例 1：一個 mobile web 專案，想打包成移動 App。

a)   在 HBuilder 裡新建一個 web 專案，把 mobile web 程式碼放進去。

b)   在 HBuilder 裡新建移動 App

c)   在新建的移動 App 下找到 manifest.json，將其中的入口頁面配置為 mobileweb 的網 絡地址。

d)   然後點發行打包，就得到一個移動 App 的安裝包。除了可發行到 Appstore 和桌面 有個快捷方式外，與瀏覽器的體驗不會有其他區別。

e)   另外其實 mobile web 的程式碼，也可以判斷自己執行的環境，如果 UA 裡包含 “Html5Plus”，也可以寫 plus 物件來呼叫原生能力。