基于HBuilder構建跨平臺移動應用解決方案

國家新聞出版廣電總局八三一臺 潘哲寧

引言：近年來移動互聯網發展迅猛，越來越多的人使用安卓和蘋果終端，因此安卓和蘋果應用數量也呈現出爆炸性的增長。但由于安卓和蘋果開發平臺和開發技術的差異，通常需要掌握不同的兩套技術為兩種系統單獨開發，大大增加了研發成本和維護成本，因此，構建跨平臺移動應用的解決方案意義重大。這里采用了HBuilder開發平臺，使用HTML5Plus框架技術實現統一不同平臺之間對移動設備API的訪問，使用MUI框架實現通過瀏覽器內核作為UI渲染從而在不同平臺的設備上顯示相同的內容。從而實現只需要編寫一次代碼，就可以在多個客戶端運行！

1.前言

目前主流的手機操作系統平臺主要分為安卓（Android）系統和蘋果（IOS）系統。其中安卓系統主流開發平臺為Eclipse或Android Studio，主要開發語言是Java。蘋果操作系統需要在MacOS端的XCode進行開發，開發語言為Object-C或Swift。一款APP的上線需要多名擁有不同技術的開發者配合完成。傳統的開發模式開發周期長，開發成本高，在這個瞬息萬變的互聯網環境下顯然難以生存。 因此，跨平臺移動應用解決方案應運而生。

HTML5和JavaScript技術近兩年迅猛發展，衍生出了各種開發框架，移動應用跨平臺解決方案百花齊放。主流的跨平臺技術有：Cordova（Phone Gap）、Weex、React Native等。我們采用了Hbuilder平臺下的HTML5Plus構建，它是一種基于HTML、JS、CSS編寫的運行于手機端的App，這種App可以通過擴展的JS API任意調用手機的原生能力，實現與原生App同樣強大的功能和性能。

2.跨平臺開發原理

HTML5Plus對Android和IOS系統分別做了一套開發框架接口的對應支持，分別與對應平臺的API進行交互，對外則單獨封裝了主要使用的功能模塊及一套JS API接口即HTML5Plus或Native.js，在調用接口時，后臺會去判斷當前所運行的平臺，然后去調用具體的接口。在UI展示層面，HTML5plus通過調用手機瀏覽器內核創建WebView，通過解析html、js、css渲染用戶顯示及交互，開發人員只需要采用 web技術即可進行移動平臺快速開發，從而實現跨平臺。原理圖如圖一所示。

HTML5Plus封裝了Camera、Gallery、Device、IO、Storage、Message等上百個API，如果需要開發的功能在HTML5Plus中找不到對應的API，我們可以通過調用Navtive.js實現。開發者可以利用Navtive.js編寫JavaScript代碼去調用手機系統本身的API去實現相關功能功能。

圖一

圖二

圖三

3.HTML5Plus框架

傳統意義上的APP是C/S模式的，因此如果單純的去解析通過服務端生成的html、js、css在手機端做UI展示，會導致APP頁面加載時間長，占用流量大，用戶體驗不佳，離線狀態下無法使用等諸多問題。HTML5Plus框架可以將html、js、css、圖片、文件等靜態資源保存在本地手機客戶端，動態資源通過ajax的模式與服務端進行交互。原理如圖二圖三所示。

4.MUI框架

由于跨平臺方案采用創建WebView渲染用戶界面，因此選用合適的前端框架至關重要，目前市面上主流的前端框架有JQuery、BootStrap等，但這類框架主要針對PC端使用，在移動終端內存資源捉襟見肘的情況下，底層頻繁的對DOM進行操作勢必會影響性能。以往的HTML5跨平臺方案之所謂沒有的到普及，主要是性能上滿足不了商用，切頁白屏、轉場卡頓、下拉刷新不流暢、側滑菜單不流暢等問題。

為配合HTML5Plus的跨平臺方案，采用了MUI框架進行前端開發。MUI具備以下特點：1.體積小，100k左右。2.直接采用原生js編寫，性能高于大多數框架；3.Mui的樣式風格接近手機操作系統的原生風格。如圖四所示。

圖四

5.應用情況

現在多款基于Hbuilder構建的跨平臺移動應用已投入使用。我臺通過該方案開發的項目有：綜合業務平臺，瑞迪歐餐款訂餐系統，設備報修系統，工作日志系統等多個系統。使用該方案大大縮減了開發周期、開發成本及維護成本目前多款基于Hbuilder構建的跨平臺移動應用已投入使用。我臺通過該方案開發的項目有：綜合業務平臺，瑞迪歐餐款訂餐系統，設備報修系統，工作日志系統等多個系統。通過HBuilder、HTML5Plus、MUI，我們很好的解決了HTML5的先天缺點，做到了接近原生App的功能和體驗，大大縮減了研發周期、研發成本及維護成本，給開發者提供了更多方便。