首頁 > 文章 > web前端 > HTML5plus行動應用的開發實例分享

HTML5plus行動應用的開發實例分享

小云云原創: 2018-02-08 15:23:133050瀏覽

什麼是 HTML5plusDCloud 公司提供的，使用傳統 web 技術開發行動應用的解決方案。本文主要和大家分享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;

JS 層呼叫plus.runtime.version，Webview 向JS Bridge 發起請求。
JS Bridge 接收請求，通知 Native 層讀取應用程式版本號資訊。
Native 層執行拿到結果，通知 JS Bridge 層對應結果。
JS Bridge 拿到 Native 層對應的結果，通知對應的 Webview 結果資訊。
JS 層取得到應用的版本資訊。

吐槽一下

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

優點

學習成本低，只要掌握了基本的 web 開發能力，即可上手。
雲端打包，不必本地建置 Android 與 iOS 開發環境，進行打包處理。
一套程式碼，只要做少許的相容處理，即可編譯成 Android 和 iOS 兩個套件。
沒想到，要討論補充吧。

不足

plus.ModuleName.* 提供的API 有限，雖然有Native.js 這一產品，但是需要掌握一定的原生開發能力。
依賴手機本身的 Webview，因此在部分手機上效能並不理想。這一點，對於某些業務產品有一定的影響。
接著第1點，某些功能的實現，需要開發者自行整合 SDK 進行擴充。例如藍牙、應用後台常駐等。這一點，同樣需要開發者俱備原生開發的能力。
部分功能，由於相容性問題實現的並不完善。例如桌面圖示的角標等。當然，Android 的碎片化嚴重，有些不足可以理解。
文件內容，有些地方解釋地不夠清楚。另外，文檔的排版有點奇怪。
目前沒遇到其它坑了，也可能在下還不夠熟悉。

較合適範圍

綜合官方的案例展示，以及個人開發的經驗。總結下來，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 框架，原生能力的呼叫和它沒關係。