HTML5plus行動應用的開發實例分享-H5教程-PHP中文網

什麼是 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”等等類似的貼文。至於出現這類問題的具體原因，大家都有自己的理解，這裡不做討論。
做技術選型時，最好親自動手做下嘗試。不要期望產品供應方給你最佳答复，因為人家不會傻傻地把用戶往外推。
------華麗麗分割線------
下面，分享一下個人使用的經驗和心得，希望可以幫助其他開發者在技術選型時做個參考。