如何實(shí)現(xiàn)HTML5plus移動(dòng)應(yīng)用的開(kāi)發(fā)

這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹如何實(shí)現(xiàn)HTML5plus移動(dòng)應(yīng)用的開(kāi)發(fā)，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

增強(qiáng)版的手機(jī)瀏覽器引擎，讓HTML5達(dá)到原生水平！

產(chǎn)品口號(hào)，總會(huì)有些夸張的成分，不要在意這些細(xì)節(jié)。

Tips

• HTML5plus 名字太長(zhǎng)，因而又稱 HTML5+，或簡(jiǎn)稱 5+。

• 使用該引擎開(kāi)發(fā)的移動(dòng)應(yīng)用，又稱 5+App。

• 相關(guān)的 SDK，稱為 5+SDK。

使用方式

Runtime

即使用 DCloud 公司的另一款產(chǎn)品 HBuilder，直接進(jìn)行開(kāi)發(fā)調(diào)試。

SDK

將 5+SDK 集成到自己的原生應(yīng)用中，就可以在應(yīng)用中使用其擴(kuò)展的 JS API。

區(qū)別

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

• Runtime 方式無(wú)需掌握原生開(kāi)發(fā)的能力，合理使用擴(kuò)展的 API 即可。

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

簡(jiǎn)單地理解下
Runtime 方式，不需要開(kāi)發(fā)者自己開(kāi)發(fā)原生應(yīng)用的基座部分，5+ 這邊幫開(kāi)發(fā)者做好了，只需要提交應(yīng)用資源云端打包就行了。  
SDK 方式則不同，這種情況是在原有的原生應(yīng)用基座基礎(chǔ)上，擴(kuò)展 5+SDK。因而，需要開(kāi)發(fā)者自己搭建原生開(kāi)發(fā)的環(huán)境，進(jìn)行部分原生開(kāi)發(fā)的工作。

基本架構(gòu)

按照官方的文檔說(shuō)明 Android平臺(tái)第三方插件開(kāi)發(fā)指導(dǎo)，大體分為三層結(jié)構(gòu)。這里為了更方便理解，擴(kuò)展成四部分進(jìn)行說(shuō)明。

Webview

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

plus

這部分在 Webview 中，在原有的瀏覽器環(huán)境基礎(chǔ)上，擴(kuò)展可以調(diào)用原生功能的 API，這些 API 都在 window.plus 這個(gè)對(duì)象里面。

JS Bridge

負(fù)責(zé)連接 JavaScript 層與 Native 層。

• 接收 JavaScript 層傳發(fā)過(guò)來(lái)的請(qǐng)求，通知 Native 層做出相應(yīng)的響應(yīng)。

• 接收 Native 層響應(yīng)的結(jié)果，通知 JavaScript 層接收結(jié)果。

Native

即 Android 和 iOS，也是 HTML5plus 的核心關(guān)鍵部分。

一次調(diào)用執(zhí)行的過(guò)程

以獲取應(yīng)用版本號(hào)為例

plus.runtime.version;

1. JS 層調(diào)用 plus.runtime.version，Webview 向 JS Bridge 發(fā)起請(qǐng)求。

2. JS Bridge 接收請(qǐng)求，通知 Native 層讀取應(yīng)用版本號(hào)信息。

3. Native 層執(zhí)行拿到結(jié)果，通知 JS Bridge 層相應(yīng)結(jié)果。

4. JS Bridge 拿到 Native 層相應(yīng)的結(jié)果，通知相應(yīng)的 Webview 結(jié)果信息。

5. JS 層獲取到應(yīng)用的版本信息。

吐槽一下

個(gè)人認(rèn)為，每個(gè)產(chǎn)品每家公司，都有其自身的設(shè)計(jì)理念以及經(jīng)營(yíng)策略。不同的用戶，總會(huì)有不同的需求和看法。  
因此，做技術(shù)選型時(shí)一定要搞清楚自己的需求和被調(diào)研的產(chǎn)品信息。DCloud 的社區(qū)中，經(jīng)常出現(xiàn)“怎么沒(méi)有XXX API”，“為什么不集成XXX SDK”，“不會(huì)原生開(kāi)發(fā)，希望官方能夠擴(kuò)展XXX API”等等類似的帖子。至于出現(xiàn)此類問(wèn)題的具體原因，大家都有自己的理解，這里不做討論。
做技術(shù)選型時(shí)，最好親自動(dòng)手做下嘗試。不要期望產(chǎn)品供應(yīng)方給你最佳答復(fù)，因?yàn)槿思也粫?huì)傻傻地把用戶往外推。  
------華麗麗分割線------  
下面，分享一下個(gè)人使用的經(jīng)驗(yàn)和心得，希望可以幫助其他開(kāi)發(fā)者在技術(shù)選型時(shí)做個(gè)參考。

優(yōu)點(diǎn)

1. 學(xué)習(xí)成本低，只要掌握了基本的 web 開(kāi)發(fā)能力，即可上手。

2. 云端打包，不必本地搭建 Android 與 iOS 開(kāi)發(fā)環(huán)境，進(jìn)行打包處理。

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

4. 沒(méi)有想到，待討論補(bǔ)充吧。

不足

1. plus.ModuleName.* 提供的 API 有限，雖然有 Native.js 這一產(chǎn)品，但是需要掌握一定的原生開(kāi)發(fā)能力。

2. 依賴手機(jī)自身的 Webview，因此在部分手機(jī)上性能并不理想。這一點(diǎn)，對(duì)于某些業(yè)務(wù)產(chǎn)品有一定的影響。

3. 接第1點(diǎn)，某些功能的實(shí)現(xiàn)，需要開(kāi)發(fā)者自行集成 SDK 進(jìn)行擴(kuò)展。例如藍(lán)牙、應(yīng)用后臺(tái)常駐等。這一點(diǎn)，同樣需要開(kāi)發(fā)者具有原生開(kāi)發(fā)的能力。

4. 部分功能，由于兼容性問(wèn)題實(shí)現(xiàn)的并不完善。例如桌面圖標(biāo)的角標(biāo)等。當(dāng)然，Android 的碎片化嚴(yán)重，有些不足可以理解。

5. 文檔內(nèi)容，有些地方解釋地不夠清楚。另外，文檔的排版有點(diǎn)奇怪。

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

較合適范圍

綜合官方的案例展示，以及個(gè)人開(kāi)發(fā)的經(jīng)歷?？偨Y(jié)下來(lái)，5+App 開(kāi)發(fā)比較適合以下情況或產(chǎn)品：

• 初創(chuàng)公司，需要快速上線應(yīng)用。

• 新聞資訊（36Kr）、電商（HiMall）、內(nèi)容分享（楓橋居花卉）、外賣等大部分的 O2O 業(yè)務(wù)產(chǎn)品等等。

• 核心業(yè)務(wù)功能不依賴某些原生功能

• 一部分企業(yè)應(yīng)用，也可以根據(jù)具體需求情況而定。

不推薦情況

有些情況沒(méi)辦法一概而論，因而按照具體情形說(shuō)明。

• 重度依賴某些原生功能，比如應(yīng)用中需要實(shí)現(xiàn)地圖自定義的繪線、需要藍(lán)牙模塊進(jìn)行數(shù)據(jù)的通信等等。

• 核心業(yè)務(wù)涉及到即時(shí)通信（IM），并且不希望使用第三方的 JS 版 SDK 的。

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

• 某些較為“流氓”的功能，比如應(yīng)用后臺(tái)常駐、推送服務(wù)常駐等等。

• 控制應(yīng)用的權(quán)限，比如禁止截屏之類的。這個(gè)只能在原生層處理，而且 Android 的兼容你懂的。

上面許多情況都需要通過(guò)原生層的開(kāi)發(fā)來(lái)解決，當(dāng)然同時(shí)可以集成 5+SDK，相關(guān)的擴(kuò)展 API 照用不誤。

同類產(chǎn)品

• cordova

• apicloud

• appcan

• ionic

• weex

• react native

目前在下了解到的就這些，有些產(chǎn)品淺嘗輒止，有些產(chǎn)品壓根就沒(méi)體驗(yàn)過(guò)，因此這里不做對(duì)比以及過(guò)多的評(píng)述。

補(bǔ)充：

• HBuilder 是一款 IDE，也是真機(jī)調(diào)試時(shí)基座的名字。這兩個(gè)加起來(lái)，就是開(kāi)發(fā) 5+App 的環(huán)境及工具。

• HTML5plus 的名字很多，DCloud 官網(wǎng)上寫(xiě)的是 5+Runtime。負(fù)責(zé)擴(kuò)展 JS API，實(shí)現(xiàn) JS 調(diào)用原生功能。

• MUI 移動(dòng)開(kāi)發(fā)的 UI 框架，為了方便開(kāi)發(fā)封裝了幾個(gè)涉及到 HTML5plus 的方法，經(jīng)常被人誤解。但它真的只是個(gè) UI 框架，原生能力的調(diào)用和它沒(méi)關(guān)系。

相關(guān)推薦：

如何使用微信開(kāi)發(fā)者移動(dòng)應(yīng)用創(chuàng)建獲取APP ID的詳細(xì)介紹（圖）

關(guān)于如何實(shí)現(xiàn)HTML5plus移動(dòng)應(yīng)用的開(kāi)發(fā)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。