基于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的功能和体验，大大缩减了研发周期、研发成本及维护成本，给开发者提供了更多方便。