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

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

1.前言

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

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

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

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

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

圖一

圖二

圖三

3.HTML5Plus框架

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

4.MUI框架

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

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

圖四

5.應用情況

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