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 對象來調用原生能力。
例子 2：正規的移動 App（沒有網頁進度條）
a) 在 HBuilder 裏新建移動 App 項目
b) 在移動 App 裏編寫 html、Js、css 文件，本地 js通過 ajax 方式請求服務器數據，通過 plus.net 對象避開跨域限制。
c) 移動 App 裏的 js 可以通過 plus 對象調用手機原生能力
d) 編寫好的移動 App 點打包變成安裝包。
例子 3：混合型移動 App
這裏的混合型移動 App，所指並非是原生和 HTML5 的 hybridApp，而是指一部分 頁面是本地的 HTML，通過 ajax 與服務器交互，另一部分頁面是從服務器下行的 mobileweb頁面。
a) 分別新建一個 web 項目和一個移動 App 項目
b) 在移動 App 裏的某個 html 裏通過<a href= 或者 location.href=指定 mobile web的頁 面地址。
HTML5+ 應用架構
HTML5+ 規範 API
最新規範請參考 http://www.html5plus.org/#specification
以下提供摘要表格信息。
手機端體驗各個 API 的實現效果，ios 手機在 Appstore 搜索 Hello H5+，Android 手機下載
http://d.m3w.cn/helloh5p/HelloH5.apk。
設備和業務能力
|
特性 |
API |
功能 |
|
Accelerometer |
plus.accelerometer. * |
提供設備加速度傳感器管理能力，用於獲取設備加速度信息。 |
|
Audio |
plus.audio.* |
提供音頻的錄製和播放能力。 |
|
Cache |
plus.cache.* |
提供應用緩存管理能力。 |
|
Camera |
plus.camera.* |
提供設備的攝像頭管理能力，用於拍照、攝像操作。 |
|
Console |
plus.console.* |
提供應用的日誌輸出，用於調試跟蹤。 |
|
Contacts |
plus.cotacts.* |
提供系統聯繫人操作能力。 |
|
Device |
plus.device.* plus.screen.* plus.display.* plus.networkinfo.* |
提供手機設備的信息。 |
|
Downloader |
plus.downloader.* |
提供應用文件下載任務管理能力，支持跨域網絡訪問。 |
|
Events |
- |
提供應用的事件管理能力，如應用前後臺切換，網絡變化等。 |
|
File |
plus.io.* |
提供文件系統訪問能力。 |
|
Gallery |
plus.gallery.* |
提供訪問系統相冊能力。 |
|
Geolocation |
plus.geolocation.* |
提供系統的 GPS 信息管理能力。 |
|
Invocation |
plus.ios.* plus.android.* |
提供直接調用系統 Native API 能力。 |
|
Messaging |
plus.messagin.* |
提供設備的通訊能力。 |
|
Orientation |
plus.orientation.* |
提供設備方向感應器管理能力。 |
|
Proximity |
plus.proximity.* |
提供設備距離感應器管理能力。 |
|
Storage |
plus.storage.* |
提供應用本地數據存儲能力。 |
|
UI |
plus.ui.* |
提供多窗口管理能力。 |
|
Uploader |
plus.uploader.* |
提供應用文件上傳任務管理能力，支持跨域網絡訪問。 |
|
Runtime |
plus.runtime.* |
提供應用運行環境管理能力。 |
|
XMLHttpRequest |
plus.net.* |
提供網絡請求能力，支持跨域網絡訪問。 |
|
Zip |
plus.zip.* |
提供文件的壓縮和解壓能力。 |
第三方插件能力
|
特性 |
API |
功能 |
|
Barcode |
plus.barcode.* |
提供二維碼掃描能力。 |
|
Maps |
plus.maps.* |
提供原生地圖展現能力（百度地圖）。 |
|
Payment |
plus.payment.* |
提供第三方支付能力（支付寶）。 |
|
Push |
plus.push.* |
提供消息推送能力（MKey 企業內網專用 push、個推）。 |
|
Share |
plus.share.* |
提供第三方分享能力（新浪微博、騰訊微博、微信）。 |
|
Speech |
plus.speech.* |
提供第三語音識別能力（訊飛語音雲）。 |
|
Statistic |
plus.statistic.* |
提供第三方統計能力（友盟統計）。 |
開發環境 HBuilder
HBuilder 內置 HTML5+ APP 開發環境，提供一套完整的移動應用開發解決方案。內置HTML5+ API 語法提示，提高開發效率；集成真機運行環境，方便開發後即時在真機上查看 運行效果；集成應用雲端打包系統，不用部署 xcode和 Android sdk 就可以打包應用。使開 發者只需要使用 HTML5、CSS、CSS 技術就可以快速開發跨平臺的移動應用。
下載地址：http://www.dcloud.net.cn/
平臺支持
l iOS 5.0 及以上
l Android 2.3 及以上
l WP 8.0 及以上（開發中）
手把手教你開發 HelloWord
創建 HelloWord 應用
l 啓動 HBuilder
l 在菜單欄中選擇“文件”-> “新建”->“移動 App”，打開“創建移動 App”對話框，在應用名稱中輸入“HelloWorld”
注意新建移動 App 需要聯網分配一個 appid，在真機聯調、打包發行時都需要這個 ID， 所以不聯網無法創建移動 App。
l 創建完成後，會在項目管理器中顯示新建的“HelloWorld”項目
manifest.json
在項目管理器中雙擊“manifest.json”文件，打開程序信息配置頁面：
應用基礎信息
l 應用名稱：應用安裝到手機上顯示的名稱；
l appid：應用標識，用於雲平臺打包，不可修改；
l 版本號：應用發佈的版本號；
l 入口頁面：應用啓動後默認顯示的頁面，可以是網絡地址；
l 重力感應：應用在手機上開啓重力感應時可切換的方向；
平臺選擇
平臺選擇後則可設置對應雲平臺的應用圖標和啓動界面，點擊圖標則可彈出文件選擇對話框，按照提示尺寸選擇對應分辨率啓動圖標和啓動界面圖片：
編輯完成後，按 Ctrl+S 鍵保存。
調用 HTML5+ API
在項目管理器中雙擊“index.html”文件，對於 HTML5+應用的頁面有一個很重要的 “plusready”事件，此事件會在頁面加載後自動觸發，表示所有 HTML5+ API 可以使用， 在此事件觸發之前不能調用 HTML5+ API，所以應該在此事件回調函數中調用頁面初始化需 要調用的 HTML5+ API，而不應該在 onload 事件中調用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
<title>hello world</title>
<script type="text/javascript">
// 擴展 API加載完畢後觸發“plusready"事件
document.addEventListener("plusready", function() {
varself = plus.ui.getSelfWindow();
// ... code
}, false );
</script>
</head>
<body>
......
</body>
</html>
編輯程序啓動後默認顯示的頁面 index.html，在頁面中添加一個按鈕，點擊後將打開新
頁面加載“http://www.baidu.com/”，爲了實現此功能，我們需要用到 HTML5+擴展 API 中
plus.ui.createWindow()方法創建窗口：
編輯完成後，按 Ctrl+S 鍵保存。
真機運行
添加調用 HTML5+API 代碼後，我們可以通過真機運行來查看效果，在本地編輯的頁面保存後可同步在真機上看到保存後的顯示效果。
注意只有移動 App 項目纔可以真機聯調。
iOS 真機運行
在 HBuilder 的“項目管理器”中選擇創建的“HelloWorld”應用。
啓動真機運行
將 iOS 設備連接到電腦，這時 HBuilder 會自動檢測連接到電腦上的設備，通過菜單欄 中的“運行”菜單啓動：
也可通過工具欄啓動：
注：如果沒有發現設備，則確認設備是否安裝 iTunes 程序，是否升級到最新版本？或者嘗 試重新連接數據線！
安裝真機運行環境
啓動真機運行後，HBuilder 會自動在設備上安裝真機運行環境，並在控制檯中顯示以下信息：
注：如果提示錯誤信息，請嘗試點擊“終止”按鈕後重新啓動真機運行！
真機運行應用
在 iOS 設備上可看到新安裝的 HBuilder 應用圖標，手動點擊運行
注意：真機聯調 App 時，提供的是一個測試環境，並不真實發生打包，手機端 App 界 面還有 develop 的水印，其手機桌面顯示名字爲 HBuilder，圖標也是 HBuilder 的圖標，此時 並不是開發者真實 App 的名字圖標。正式的 App 需要通過發行-打包來製作，打包後的 App 名字圖標都是開發者定義的，裏面也沒有 develop 的水印。
啓動後會彈出提示框，選擇“確定”，顯示以下頁面：
Android 真機運行
將 Android 設備連接到電腦，這時 HBuilder 會自動檢測連接到電腦上的設備，通過菜單 欄中的“運行”菜單啓動：
也可通過工具欄啓動：
注：如果沒有發現設備，請安裝 360 手機助手等手機驅動，保證手機和 PC 可以連接。嘗試 重新連接數據線。另外有些數據線質量不好，會無法穩定連接。
運行一次後，關閉時務必點停止運行的紅色方塊按鈕，否則下次連接很可能阻塞。
安裝真機運行環境
啓動真機運行後，HBuilder 會自動在設備上安裝真機運行環境，並在控制檯中顯示以下信息：
注：如果提示錯誤信息，請嘗試“終止”後重新啓動真機運行！
真機運行應用
在 Android 設備會自動安裝 HBuilder 應用，在桌面上可看到新安裝的 HBuilder 應用圖 標（有些設備會在應用列表頁面中）：
注意：真機聯調 App 時，提供的是一個測試環境，並不真實發生打包，手機端 App 界 面還有 develop 的水印，其手機桌面顯示名字爲 HBuilder，圖標也是 HBuilder 的圖標，此時 並不是開發者真實 App 的名字圖標。正式的 App 需要通過發行-打包來製作，打包後的 App 名字圖標都是開發者定義的，裏面也沒有 develop 的水印。
啓動後會彈出提示框，選擇“確定”，顯示以下頁面：
部署發佈
完成應用頁面的編輯後，需要正式發佈到個大市場，這時需要從雲平臺進行安裝包的制
作。通過菜單欄中的“發行”->“App 打包”，打開“App 雲端打包”對話框提交。 注意只有移動 App 項目纔可以打包。
iOS 發佈
對於 iOS 平臺，可以選擇越獄包或正式包（Appstore 專用），前者只能安裝在已越獄的設備上，後者則可通過 iDP 證書打包提交到 Appstore 發佈、或通過 iEP 證書打包在企業內 部發布。
配置打包信息
l 越獄包
AppID：iOS應用標識，推薦使用反向域名風格的字符串，如“com.domainname.appname”。
l 正式包
AppID：iOS 應用標識，推薦使用反向域名風格的字符串，如“com.domainname.appname”， 必須與 profile 文件綁定的 App ID 匹配。
私鑰證書：iOSCertificates 文件（.p12）； 私鑰密碼：導入私鑰證書的密碼；
Profile 文件：iOSProvisioning Profile 文件（.mobileprovision），必須與 App ID 和私鑰證書 區配；
查看打包狀態
通過菜單欄中的“發行”->“查看打包狀態”，打開“查看 App 打包狀態”對話框，可 查看打包歷史記錄和狀態：
如果“製作狀態”欄顯示“打包成功，下載完成”則表示雲端打包完成，可點擊“打開 下載目錄”查看下載的安裝包。
Android 發佈
對於 Android 平臺，可以選擇使用 DCloud 生成的公用證書或自己生成的證書，兩者不 影響安裝包的發佈，唯一的差別就是證書中開發者和企業信息不同。
生成 Android 簽名證書
（使用DCloud公用證書可忽略）確保電腦上安裝了JRE，我們將使用JRE自帶的創 建和管理數字證書的工具Keytool。使用以下命令生成證書：
-keystore helloworld.keystore 表示生成的證書，可以加上路徑（默認在用戶主目錄下）；
-alias helloworld 表示證書的別名是 helloworld；
-keyalg RSA 表示採用的 RSA算法；
-validity 10000 表示證書的有效期是 10000天。
配置打包信息
l 使用 DCloud 公用證書
App 包 名 ： Android 應 用 包 名 ， 推 薦 使 用 反 向 域 名 風 格 的 字 符 串 ， 如“com.domainname.appname”。
l 使用自有證書
App 包 名 ： Android 應 用 包 名 ， 推 薦 使 用 反 向 域 名 風 格 的 字 符 串 ， 如“com.domainname.appname”。
證書別名：生成證書時使用-alias 參數設置的證書別名； 私鑰密碼：生成證書時使用的 keystore 密碼；證書文件：生成證書時使用-keystore參數設置的證書保存路徑；
查看打包狀態
通過菜單欄中的“發行”->“查看打包狀態”，打開“查看 App 打包狀態”對話框，可查看打包歷史記錄和狀態：
如果“製作狀態”欄顯示“打包成功，下載完成”則表示雲端打包完成，可點擊“打開 下載目錄”查看下載的安裝包。
FAQ
HTML5+是否提供 UI 框架
HTML5+本身不包括任何 UI框架，我們推薦使用輕量級 UI框架 Ratchet，其他框架如 Sencha Touch、jQuery Mobile、jQTouch、PhoneJS 等性能略差，在一些低端Android 機上無 法流暢運行。HBuilder 中內置了Ratchet 模板。
l 新建移動 App，在菜單欄中選擇“文件”->“新建”->“移動 App”
l 在創建移動 App 對話框中選擇“Ratchet”模板：
只能雲端打包嗎？支持本地打包嗎？
支持本地打包，目前已經有開發者在內測該功能，未來會全面開放。
js 不能跨域，本地 HTML5 如何與服務器交互？
使用 plus.net 對象可以跨域
plus 對象瀏覽器不支持啊，是不是需要引用什麼 js 框架？
不需要引入 js框架，plus 對象需要系統底層支持而不是單純的一個 js 框架就能解決問
題。
plus 對象在 DCloud 的 5+runtime 裏已經實現。使用 HBuilder 打包時，是把工程裏的 html、
js、css 和 DCloud 的 5+runtime 混編打包成 ipa 或 apk 的。
也可以把 5+runtime 理解爲 cef，一種沒有地址欄的、實現了 plus 對象的增強瀏覽器內
核。
plus 規範是開放的嗎，我可以自己實現plus 的 runtime 或 在我自己的瀏覽器裏支持 plus 對象嗎？
plus 規範屬於 HTML5Plus.org，是開放規範，任何公司或個人都可以基於 HTML5+規範 開發自己的手機端實現。
什麼是“響應式應用”：
一套代碼根據不同運行環境調用不同能力來優化用戶體驗。 比如文本框，在普通瀏覽器下就是一個文本輸入框，在 Chrome 瀏覽器下運行時加個判
斷調 Chrome 的語音輸入，而運行在 App 模式下，則再加一個判斷調用原生的語音識別 SDK， 比如 plus.speech。
這樣一個應用可以根據設備的不同而最大化的優化用戶體驗，這種模式很有魅力，對用 戶而言體驗更好，對開發者而言成本更低。
iOS 如何安裝越獄包
iOS 設備需要進行越獄操作（威鋒網越獄教程）後才能安裝越獄包，通常可以使用第三 方工具進行管理，如 iTools（官網）：
使用 iTools 工具安裝
l 安裝 iTools 工具並啓動（注：需安裝 iTunes工具）
l 將 iOS 手機連接到電腦，這時 iTools 工具會提示發現設備，並確定設備越獄狀態爲“已 越獄”：
l 右側設備下選擇“應用程序”，點擊“安裝”選擇越獄包 ipa 文件：
l 安裝完成後即可在手機上打開運行
iOS 安裝越獄包提示“驗證失敗”錯誤
iOS 設備需要進行越獄操作（威鋒網越獄教程）後才能安裝越獄包，對於 iOS7.x 系統 越獄操作後需要確認是否安裝安裝 afc2add、AppSync 工具？
安裝 afc2add、AppSync 工具
l 打開 cydia
l 選擇“軟件源”-> “編輯” -> “添加”，輸入 APT 地址：
l 添加源完成後，在搜索頁面搜索工具並安裝。
HBuilder 可以開發 phonegap 應用嗎？
首先 HBuilder 的語法提示庫是開放的，基於 xml 語法庫文件或 jsdoc 這 2 種方式，可以 製作任意語法提示。
這部分的開源地址是：https://github.com/dcloudio/WebFrameworkGrammar
只要有人制作了 phonegap 語法提示文件，導入到 HBuilder 裏就可以提示。
HBuilder 支持 eclipse 插件，開發者完全可開發一個 eclipse 插件裝到 HBuilder 上，實現
phonegap 打包等功能。