HTML5 plus初步瞭解

問題

開發HTML5頁面要解決的主要問題之一，就是調用系統的能力，好比拍照／選圖／保存圖片到相冊／錄音／錄製視頻／定位等，而是否可以調用這些能力，在於其運行環境是否開放了這些權限，是否可以便捷地使用，取決於所提供的API。如果微信網頁開發，微信提供了js-sdk, 以及weui樣式庫；那麼如果原生APP提供的webview容器呢，或者直接在手機瀏覽器內運行呢，抑或直接打包成APP呢，是否也可以調用系統能力，而且用得優雅便捷？

HTML5 plus是什麼

HTML5+是中國HTML5產業聯盟的擴展規範，基於HTML5擴展了大量調用設備的能力，使得web語言能夠想原生語言同樣強大。

HTML5中國產業聯盟：

HTML5中國產業聯盟，是工信部下屬單位，是爲了更好的推動HTML5的商用、更好的爲HTML5開發者服務而由產業鏈廠商共同組成的一個聯盟。

附：

• HTML5+規範文檔
• 效果示例 HelloH5+

HTML5+運行環境

Runtime版 – for App（運行環境與項目代碼打包爲原生APP）

使用HTML5開發，而後使用HBuilder提供的雲打包或本地打包將能夠把5+ Runtime和開發者編寫的HTML5頁面 打包爲原生App的安裝包，包括Android的apk和iOS的ipa。發行到原生應用市場。

SDK版 – for Hybrid（原生APP中構建H5+運行環境）

在你的原生應用中內嵌5+ SDK，替代手機默認的webview，不管 使用Hybrid開發模式，仍是 在原生App中構建web應用生態，都將能體驗到更強大的內核動力。

附：HTML5+運行環境 5+Runtime官網介紹

配套工具

HBuilder

HTML5+項目的開發工具，既是代碼編輯器，也是基於H5+的APP打包工具。

HBuilder是完整支持HTML5+及JSDoc+規範的優秀開發工具，在HBuilder中能夠有效提示HTML5+語法、JSDoc+提示，能夠開發、調試、發佈基於HTML5+的App。

HBuilder項目調試：

• 下載HBuilder；
• 使用郵箱註冊HBuilder帳號；
• 新建項目：分移動App，web項目和Wap2App;
• 已測試運行HelloH5和HelloMui項目，手機功能需真機調試，真機調試需USB鏈接手機，開啓調試模式，可邊在手機操做邊查看電腦控制檯輸出；
• 只有移動App類型的項目才能啓用真機調試，web類型的項目不能
• 移動App類型的項目在真機運行，除了經過USB鏈接的方式，也能夠經過同一局域網訪問，但頁面內原生的tab沒法顯示；
• web類型項目一樣能夠經過同一局域網在真機／電腦瀏覽器訪問，進行開發調試；但需調用手機系統能力的功能無效；

HBuilder 優勢：

• 性能體驗挺不錯的；
• 支持多種系統能力調用；
• 配套的Mui框架挺好看的，組件挺齊全；

缺點：

• 官方文檔寫得閱讀體驗比較差；

附：HBuilder介紹及下載

MUI框架

一個與HTML5+配套的樣式框架

mui框架是一個基於HTML5+規範的開源前端UI框架，它利用了HTML5+擴展的原生能力，解決經常使用UI控件的性能及跨平臺問題。

使用mui框架，能夠簡單方便的開發出高性能的App，同時mui也能夠自動適應沒有HTML5+環境的普通瀏覽器，下降爲普通web app，這使得開發者使用mui開發一次，能夠同時發佈爲HTML5+的iOS、Android App，也可同時發佈到手機瀏覽器裏。

附：mui官方網站

安卓/IOS中集成HTML5+SDK

安卓集成：

HTML5+ SDK集成：

• 獨立應用集成方式：即Widget集成方式，開發者在集成後可在須要時啓動HTML5+ SDK，顯示指定目錄下的5+ WebAPP
• 單頁面集成方式：即Webview集成方式，用戶可在須要時顯示一個支持5+擴展API的Webview頁面。使用單頁面方式集成5+ SDK，在頁面內不能調用plus.webview的API建立新的頁面，其餘5+API的使用不受影響。

IOS集成：

• 獨立應用集成方式: 使用獨立應用方式，開發者須要將HTML5+SDK生成的首頁面設置爲當前View的subView。HTML5+ SDK將對應用進行管理。
• Widget集成方式: 運行方式和獨立運行方式相似，開發者在集成時可在須要的位置啓動HTML5+ SDK，顯示指定的HTML5+應用。
• Webview集成方式: 用戶可在任何頁面將HTML5+ SDK的頁面以Webview的形式獨立顯示，顯示的Webview頁面。

widget集成方式與webview集成方式的步驟區別：

• 安卓-widget集成方式：將5+SDK導入現有原生工程 -> 將WebApp導入現有原生工程 -> 5+SDK集成代碼編寫
• 安卓-webview集成方式：將5+SDK導入現有原生工程 -> 5+SDK集成代碼編寫

由此可知，widget集成方式須要將webApp代碼導入到原生工程裏，適合同一團隊，不適合不一樣公司間合做；
而webview方式，看起來公司間合做可以使用此方式

相關文檔：

• Android 平臺5+SDK接口說明
• Android平臺以WebView方式集成HTML5+SDK方法
• Android平臺以Widget方式集成HTML5+SDK方法
• IOS平臺以WebView方式集成HTML5+SDK方法
• IOS平臺以Widget方式集成HTML5+SDK方法
• HTML 5+ SDK 更新日誌

他人經驗分享：
安卓/IOS中集成HTML5+SDK：runtime方式和widget方式：
http://ask.dcloud.net.cn/ques...
http://ask.dcloud.net.cn/arti...

HTML5+與DCloud等的關係

• HTML5中國產業聯盟，是工信部下屬單位，建於2013年
• 工信部信通院標準所是聯盟的管理單位，W3C中國是聯盟指導單位， DCloud是聯盟祕書單位。
• DCloud 是W3C會員、中國HTML5產業聯盟發起單位，致力於推動HTML5發展，構建HTML5生態。
• HBuilder / 5+Runtime / MUI / wap2app / 流應用是DCloud開發的產品
• HTML5+規範是HTML5中國產業聯盟的拓展規範，需5+Runtime支持運行

文檔指引

• HTML5中國產業聯盟官網：http://www.html5plus.org/
• mui官網：http://dev.dcloud.net.cn/mui/
• DCloud官網：http://dcloud.io/index.html 經過首頁可查看HBuilder/5+Runtime/mui/wap2app/流應用的介紹
• 經過官網導航「文檔」可查看除mui外的文檔目錄(http://dcloud.io/doc.html)
• 除mui外其他文檔內容均位於http://ask.dcloud.net.cn/docs/
• DCloud社區： http://ask.dcloud.net.cn/explore/
• DCloud產品案例：http://dcloud.io/case/#

小結

經過以上初步瞭解，下載HBuilder並建立HelloH5+ / HelloMUI模板項目、移動APP項目、web項目進行調試，對於開頭提出的問題，初步回答以下：

• 使用web開發方式開發APP，可經過HBuilder創建【移動App項目】開發後，將H5+環境和項目代碼一塊兒打包爲原生APP，打包方式分【離線打包】和【雲打包】；
• 如果【web項目】，也能夠打包爲APP，但開發時其不能真機調試，其使用體驗也比不上【移動App項目】打包的；

• 原生APP內嵌web應用：分別構建安卓和IOS的【H5+加強webview環境】，即【5+SDK集成後的環境】，在該環境中運行web應用或單個web頁面，但使用widget集成方式，須要將web應用的代碼放在原生APP的項目內，對於兩者分屬不一樣團隊來講，這種方式不適應；如果直接經過連接在原生APP中訪問web應用，看起來webview集成方式適用，其需求場景爲：

  • 原生APP中經過url訪問一個Html5+應用；
  • 原生APP代碼和H5+項目代碼不放在一塊兒，分別由不一樣公司的團隊維護；
  • Html5應用中需使用camera/gallery/audio/device等HTML5+ API
• 手機瀏覽器訪問：暫時沒有看到可行方案