基于HBuilder構(gòu)建跨平臺移動應(yīng)用解決方案

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

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

1.前言

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

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

2.跨平臺開發(fā)原理

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

HTML5Plus封裝了Camera、Gallery、Device、IO、Storage、Message等上百個API，如果需要開發(fā)的功能在HTML5Plus中找不到對應(yīng)的API，我們可以通過調(diào)用Navtive.js實(shí)現(xiàn)。開發(fā)者可以利用Navtive.js編寫JavaScript代碼去調(diào)用手機(jī)系統(tǒng)本身的API去實(shí)現(xiàn)相關(guān)功能功能。

圖一

圖二

圖三

3.HTML5Plus框架

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

4.MUI框架

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

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

圖四

5.應(yīng)用情況

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