如何實現HTML5plus移動應用的開發

這篇文章運用簡單易懂的例子給大家介紹如何實現HTML5plus移動應用的開發，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

增強版的手機瀏覽器引擎，讓HTML5達到原生水平！

產品口號，總會有些夸張的成分，不要在意這些細節。

Tips

• HTML5plus 名字太長，因而又稱 HTML5+，或簡稱 5+。

• 使用該引擎開發的移動應用，又稱 5+App。

• 相關的 SDK，稱為 5+SDK。

使用方式

Runtime

即使用 DCloud 公司的另一款產品 HBuilder，直接進行開發調試。

SDK

將 5+SDK 集成到自己的原生應用中，就可以在應用中使用其擴展的 JS API。

區別

• Runtime 方式可以直接使用 DCloud 提供的云端打包，不需要本地搭建打包環境。

• Runtime 方式無需掌握原生開發的能力，合理使用擴展的 API 即可。

• SDK 方式可以滿足更多的需求，但是需要掌握原生開發的能力。

簡單地理解下
Runtime 方式，不需要開發者自己開發原生應用的基座部分，5+ 這邊幫開發者做好了，只需要提交應用資源云端打包就行了。  
SDK 方式則不同，這種情況是在原有的原生應用基座基礎上，擴展 5+SDK。因而，需要開發者自己搭建原生開發的環境，進行部分原生開發的工作。

基本架構

按照官方的文檔說明 Android平臺第三方插件開發指導，大體分為三層結構。這里為了更方便理解，擴展成四部分進行說明。

Webview

可以理解為簡單的瀏覽器，HTML、CSS、JavaScript 都在這里。

plus

這部分在 Webview 中，在原有的瀏覽器環境基礎上，擴展可以調用原生功能的 API，這些 API 都在 window.plus 這個對象里面。

JS Bridge

負責連接 JavaScript 層與 Native 層。

• 接收 JavaScript 層傳發過來的請求，通知 Native 層做出相應的響應。

• 接收 Native 層響應的結果，通知 JavaScript 層接收結果。

Native

即 Android 和 iOS，也是 HTML5plus 的核心關鍵部分。

一次調用執行的過程

以獲取應用版本號為例

plus.runtime.version;

1. JS 層調用 plus.runtime.version，Webview 向 JS Bridge 發起請求。

2. JS Bridge 接收請求，通知 Native 層讀取應用版本號信息。

3. Native 層執行拿到結果，通知 JS Bridge 層相應結果。

4. JS Bridge 拿到 Native 層相應的結果，通知相應的 Webview 結果信息。

5. JS 層獲取到應用的版本信息。

吐槽一下

個人認為，每個產品每家公司，都有其自身的設計理念以及經營策略。不同的用戶，總會有不同的需求和看法。  
因此，做技術選型時一定要搞清楚自己的需求和被調研的產品信息。DCloud 的社區中，經常出現“怎么沒有XXX API”，“為什么不集成XXX SDK”，“不會原生開發，希望官方能夠擴展XXX API”等等類似的帖子。至于出現此類問題的具體原因，大家都有自己的理解，這里不做討論。
做技術選型時，最好親自動手做下嘗試。不要期望產品供應方給你最佳答復，因為人家不會傻傻地把用戶往外推。  
------華麗麗分割線------  
下面，分享一下個人使用的經驗和心得，希望可以幫助其他開發者在技術選型時做個參考。

優點

1. 學習成本低，只要掌握了基本的 web 開發能力，即可上手。

2. 云端打包，不必本地搭建 Android 與 iOS 開發環境，進行打包處理。

3. 一套代碼，只要做少許的兼容處理，即可編譯成 Android 和 iOS 兩個包。

4. 沒有想到，待討論補充吧。

不足

1. plus.ModuleName.* 提供的 API 有限，雖然有 Native.js 這一產品，但是需要掌握一定的原生開發能力。

2. 依賴手機自身的 Webview，因此在部分手機上性能并不理想。這一點，對于某些業務產品有一定的影響。

3. 接第1點，某些功能的實現，需要開發者自行集成 SDK 進行擴展。例如藍牙、應用后臺常駐等。這一點，同樣需要開發者具有原生開發的能力。

4. 部分功能，由于兼容性問題實現的并不完善。例如桌面圖標的角標等。當然，Android 的碎片化嚴重，有些不足可以理解。

5. 文檔內容，有些地方解釋地不夠清楚。另外，文檔的排版有點奇怪。

6. 目前沒遇到其它坑了，也可能在下還不夠熟悉。

較合適范圍

綜合官方的案例展示，以及個人開發的經歷。總結下來，5+App 開發比較適合以下情況或產品：

• 初創公司，需要快速上線應用。

• 新聞資訊（36Kr）、電商（HiMall）、內容分享（楓橋居花卉）、外賣等大部分的 O2O 業務產品等等。

• 核心業務功能不依賴某些原生功能

• 一部分企業應用，也可以根據具體需求情況而定。

不推薦情況

有些情況沒辦法一概而論，因而按照具體情形說明。

• 重度依賴某些原生功能，比如應用中需要實現地圖自定義的繪線、需要藍牙模塊進行數據的通信等等。

• 核心業務涉及到即時通信（IM），并且不希望使用第三方的 JS 版 SDK 的。

• 需要讀寫文件，比如錄制短視頻、編輯圖片、編輯視頻等。

• 某些較為“流氓”的功能，比如應用后臺常駐、推送服務常駐等等。

• 控制應用的權限，比如禁止截屏之類的。這個只能在原生層處理，而且 Android 的兼容你懂的。

上面許多情況都需要通過原生層的開發來解決，當然同時可以集成 5+SDK，相關的擴展 API 照用不誤。

同類產品

• cordova

• apicloud

• appcan

• ionic

• weex

• react native

目前在下了解到的就這些，有些產品淺嘗輒止，有些產品壓根就沒體驗過，因此這里不做對比以及過多的評述。

補充：

• HBuilder 是一款 IDE，也是真機調試時基座的名字。這兩個加起來，就是開發 5+App 的環境及工具。

• HTML5plus 的名字很多，DCloud 官網上寫的是 5+Runtime。負責擴展 JS API，實現 JS 調用原生功能。

• MUI 移動開發的 UI 框架，為了方便開發封裝了幾個涉及到 HTML5plus 的方法，經常被人誤解。但它真的只是個 UI 框架，原生能力的調用和它沒關系。

相關推薦：

如何使用微信開發者移動應用創建獲取APP ID的詳細介紹（圖）

關于如何實現HTML5plus移動應用的開發就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。