admin 管理员组文章数量: 1184232
2024年5月8日发(作者：vc socket编程)
ELECTRONICS WORLD
・
技术交流
基于HBuilder构建跨平台
移动应用解决方案
引言：近年来移动互联网发展迅猛，越来越多的人使用安卓
和苹果终端，因此安卓和苹果应用数量也呈现出爆炸性的增长。但
由于安卓和苹果开发平台和开发技术的差异，通常需要掌握不同
的两套技术为两种系统单独开发，大大增加了研发成本和维护成
本，因此，构建跨平台移动应用的解决方案意义重大。这里采用了
HBuilder开发平台，使用HTML5Plus框架技术实现统一不同平台之
间对移动设备API的访问，使用MUI框架实现通过浏览器内核作为
UI渲染从而在不同平台的设备上显示相同的内容。从而实现只需要
编写一次代码，就可以在多个客户端运行！
1.前言
目前主流的手机操作系统平台主要分为安卓（Android）系统
和苹果（IOS）系统。其中安卓系统主流开发平台为Eclipse或An-
droid 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或，
在调用接口时，后台会去判断当前所运行的平台，然后去调用具体
的接口。在UI展示层面，HTML5plus通过调用手机浏览器内核创
建WebView，通过解析html、js、css渲染用户显示及交互，开发人
员只需要采用 web技术即可进行移动平台快速开发，从而实现跨平
台。原理图如图一所示。
HTML5Plus封装了Camera、Gallery、Device、IO、Storage、Mes-
sage等上百个API，如果需要开发的功能在HTML5Plus中找不到对应
•
160
•
国家新闻出版广电总局八三一台 潘哲宁
的API，我们可以通过调用实现。开发者可以利用
编写JavaScript代码去调用手机系统本身的API去实现相关功能功能。
图一
图二
图三
（下转第162页）
ELECTRONICS WORLD
・
技术交流
最精良的效果。在该系统内部使用的软件设计主要有存储记录、报
警显示制动、多传感器数据融合与酒精浓度检测等。系统原理图框
架，如图3所示。
软件程序调试合格后进行硬件调试。硬件调试采用模块化方
案，将调试好的程序输入到各目标板块上分块进行调试，各分块
均合格后再整合到一起进行整体调试。调试工作按照：单片机最
小系统检测；用单片机控制
A / D
转换器的采集；用单片机控制继
电器读取数据；用单片机接收
GPS
信息并处理；1602
LCD
显示模
块；单片机控制语音识别模块正常录放、及拨打电话；总体电路
连接，整体调试；对酒精采集的精确度进行分析计算；测试系统
整体性能的步骤进行。
经测试该系统在实时测检测酒精含量的同时能依据所测得的含
量与酒驾标准酒精含量相对比，并且进行语音报警，并且通过
GPS
定位，经语音识别模块把具体的地理位置和驾驶员酒驾情况以电话
的形式告知其家属、警方及代驾。这样不仅能有效地降低酒驾的危
险而且能及时得到远程帮助，与此同时，系统的1602
LCD
显示屏实
时显示经纬度和酒精含量及状态提示，并且进行语音警功能，应用
的前景广阔。
图3 系统原理图框架
4.结束语
本文所设计的是基于
AT
89系列单片机控制的汽车语音——酒检
通过以上测试即可得出驾驶员是否酒驾，从而从源头阻止酒驾。
3.系统调试
该系统调试包括两个方面，硬件调试和软件调试。硬件调试主
要检测电路的焊接是否正确，然后检测是否有短路或断路。软件调
试主要包括调试程序。
防酒驾自动闭锁控制系统，能够准确测得驾驶员呼出气体的酒精浓
度，并能够智能控制车辆，结构简单，使用方便，节省人力物力。
当驾驶员呼出气体酒精含量超过系统预设标准时，继电器便会自动
切断汽车引擎电源，以便减少交通事故的发生，从而创造出和谐的
交通环境。
（上接第160页）
5Plus框架
传统意义上的APP是C/S模式的，因此如果单纯的去解析通过
服务端生成的html、js、css在手机端做UI展示，会导致APP页面加
载时间长，占用流量大，用户体验不佳，离线状态下无法使用等诸
多问题。HTML5Plus框架可以将html、js、css、图片、文件等静态
资源保存在本地手机客户端，动态资源通过ajax的模式与服务端进
行交互。原理如图二图三所示。
图四
框架
5.应用情况
由于跨平台方案采用创建WebView渲染用户界面，因此选用合适的前
端框架至关重要，目前市面上主流的前端框架有JQuery、BootStrap等，但
这类框架主要针对PC端使用，在移动终端内存资源捉襟见肘的情况下，
底层频繁的对DOM进行操作势必会影响性能。以往的HTML5跨平台方案
之所谓没有的到普及，主要是性能上满足不了商用，切页白屏、转场卡
顿、下拉刷新不流畅、侧滑菜单不流畅等问题。
为配合HTML5Plus的跨平台方案，采用了MUI框架进行前端开
发。MUI具备以下特点：1.体积小，100k左右。2.直接采用原生js编
写，性能高于大多数框架；的样式风格接近手机操作系统的
原生风格。如图四所示。
现在多款基于Hbuilder构建的跨平台移动应用已投入使用。我台
通过该方案开发的项目有：综合业务平台，瑞迪欧餐款订餐系统，设
备报修系统，工作日志系统等多个系统。使用该方案大大缩减了开发
周期、开发成本及维护成本目前多款基于Hbuilder构建的跨平台移动
应用已投入使用。我台通过该方案开发的项目有：综合业务平台，瑞
迪欧餐款订餐系统，设备报修系统，工作日志系统等多个系统。通过
HBuilder、HTML5Plus、MUI，我们很好的解决了HTML5的先天缺
点，做到了接近原生App的功能和体验，大大缩减了研发周期、研发
成本及维护成本，给开发者提供了更多方便。
•
162
•
版权声明：本文标题：基于HBuilder构建跨平台移动应用解决方案 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1715140788a685948.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论