打开文本图片集
[摘 要] 使用作为解析语言的HTML5和Javascript进行移动应用引擎框架开发，通过调用原生型APP软件一样封装的底层功能实现所需的数据交换，结合交通信号控制系统服务端推送的信息，在移动终端上展示直观的交通信号灯状态。
[关键词]移动终端；Hbuilder；Html5；Hybrid App；json
[中图分类号]G434 [文献标识码]A [文章编号]1008-7656（2016）01-0028-07
随着社会的飞速发展，各地城镇化进程的快速推进，城市交通与汽车产业的加速发展，人们出行方式变得更加快捷方便，但随之产生的一系列城市道路交通问题，如道路的拥堵、机动车数量剧增、行人车辆混行、交通事故频发、居民出行难等问题也给人们带来了新的困扰，成为了亟待解决的社会共性问题。交通信号灯作为管理城市交通、减少交通安全隐患的重要环节，在城市道路中起到提供交通信息、引导行人车辆、缓解道路拥堵、减少事故发生率、减轻事故人员伤亡、降低经济损失、提高道路行车的通畅性和舒适性的重要作用。公众对交通信息的渴望，促进了现代交通信息服务技术的全面迅速发展。交通管理者利用先进的信息化技术，结合智能移动终端实时监控管理交通信号灯，则会有效地提高交通管理的效率，而交通信号灯的信息化设计和研究也更受到人们的关注与期待。
一、交通信号控制系统的需求分析
交通信号控制系统要做到人-信号灯的沟通，首先要了解各方的想法。需求分析是对收集到的需求进行提炼、分析和审查，为最终用户看到的系统建立概念化模型，其核心任务就是要弄清楚用户的需求、交通信号控制系统功能（见图1）。
在整个完整系统中，用户可使用移动客户端，从系统服务器上获取交通灯控制器的信息，并通过控制器监控交通灯。
（一）移动APP的系统模块构成（见图2）
1、用户登录模块：用户使用注册的账户密码登录，如输入错误，系统显示错误信息；
2、查看控制机模块：通过城区分类查看控制器的状态信息，包括城区、路口、控制机号等信息；
3、监听控制机模块：实时监听不同路口控制机的登录时间、最后通讯时间、当前状态、通讯信息等；
4、地图模块：结合在线地图直观地查看控制的状态信息；
5、设置控制机模块：设置传输方案队列、控制机初始化、运行模式、运行方案、设置时间日期。
（二）移动终端操作系统
目前，主流的三种移动终端操作系统Android、iOS、Windows Phone各据一方，它们都有各自独立且封闭的“生态系统”和完善的产业链及相关服务，而最常见且市场份额最多的是Android、iOS。
1、Android 是以 Linux 为基础建构，Google公司推出的手机操作系统，其体系架构包含四个主要层次（见表1、图3）。 2、IOS是Apple长期积累的成果，系统核心、基础服务和应用框架都采用C/C++或object-C开发，应用采用Cocoa Touch框架以object- C开发，编译后以本机代码在设备上运行，具有很高的运行效率（见图4）。 （三）APP软件开发模式的选型
目前APP软件开发模式通常有Native APP原生模式、Web APP 网页模式及 Hybrid App混合模式（见表2）。 就目前情况而言，Hybrid App开发已经成为移动开发的趋势。现实中还有很多开发者在为移动信息化的途径和方向而苦恼。从投入、用户体验、维护成本等方面综合考虑，Hybrid App已经被众多开发者和企业所认可。甚至在企业移动信息化平台整体解决方案商提供的方案中，几乎都以Hybrid App为首选的移动应用开发模式，包括IBM的worklight、AppCan的MEAP和SAP的SUP平台。
为了减少成本，提高开发效率，我们希望交通信号控制系统移動终端APP的开发工具是能创建本地应用并进行打包和数字签名，不用单独构建原生代码的编译环境。要具有本土化的优势，方便开发和调试，同时支持安卓与苹果APP打包。目前国内的Hbuilder、CrossApp、WeX5等都能满足要求，这些开发工具各有优缺点，有的支持快速开发、有的开源、有的性能优越做到了与原生App一致的功能和体验等等。经过实际试用和比较，最终在较难取舍的情况下，根据个人偏爱选择了Hbuilder作为开发交通信号控制系统移动APP的工具。
二、Hbuilder开发交通信号控制系统移动APP
（一）Hbuilder特点
Hbuilder的最大优势就是“快”，它是支持HTML5的Web开发IDE，本质是对eclipse进行了深度定制，包括最全面的语法库和浏览器兼容性数据，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率，其并非入门工具，而是定位于极客的利器，特别适于纯前端开发。其采用了js+html+css+打包技术，即html负责页面内容，js负责效果以及调用原生app方法，ui框架负责样式，最后打包成apk和ipa。
（二）数据交互
交通信号控制系统的PC机前端、服务端及数据库已经使用VS2012开发成型，现做为移动设备的前端开发，HBuilder的作用绰绰有余。而考虑到移动智能设备的特点，我们定位APP为轻量化应用，主要体现“查”“看”，而“控”则主要由PC前端实现。App和服务器之间可利用json这种轻量级的数据交换格式做为沟通的桥梁，在3G、4G的高速无线网络充分体现出移动设备便捷、快速、有效的特点，使交通管理者能方便及时地掌控区域内交通信号灯的整体状况。图5为APP、服务端、数据库、交通控制机的数据交互示意图。 （三）App的UI
UI界面：利用Hbuilder成熟的MUI（Mobile User Interface）框架，它基于Html5，遵循Html5+规范，遵循MIT 条款开源，是用于移动终端界面开发的一套框架，是最接近原生App体验的高性能前端框架（见图6）。
在MUI框架基础上做的交通信号控制系统的UI，利用MUI我们可以方便地进行定制，从而满足开发、增加新模块的需求（见图7）。 三、核心代码的设计
（一）主要程序代码
1、 在Html中，通过调用HTML5+ API来实现相应的功能。在Html页面加载时，要引用Html5+ API扩展代码库进行一些必要的初始化操作，当扩展代码库加载完成时会触发“pluseready”事件并通知API可以安全调用。因此，为了保证扩展Html5+ API的有效调用，所有HTML页面都需要正确处理“plusready”事件，且通过document.addEventListener来监听事件。
function （C， B） {
var page = function （） { }
C.extend （page.prototype， B， {
OnReady： function （） {
var that = this；
try { ……//具体要执行的功能代码 }）；}
catch （e）{ C.showErr（e）；}}
}）；
window.page = new page （）；
if （window.plus）{window.page.OnReady（）；return； }
document.addEventListener （"plusready"， function（）{window.page.OnReady（）；}）；
}
2、傳统的html中用的最多的click，在App中，为了实现快速相应，避免延迟（手机浏览器的click点击存在300毫秒延迟），mui为了解决这个问题而封装了tap事件，所用的click及onclick操作都被代替，在APP上的任何点击，统统使用下面的代码：
element.addEventListener （"tap"，function（）{ ……//点击响应逻辑 }）；
3、 Html中，基于链接构建的href页面跳转是经常用到的。从一个页面点击链接跳转到另一个页面，如有刷新的打开方式，用户要面对一个空白的页面等待；如果通过无刷新的方式，用Javascript移入DOM节点（常见的SPA解决方案），会碰到很高的性能挑战：DOM节点繁多，页面太大，转场动画不流畅甚至导致浏览器崩溃；为此，MUI使用openWindow方法打开一个新的webview，单个webview只承载单个页面的dom，减少dom层级及页面大小；页面切换使用原生动画，将最耗性能的部分交给原生实现，mui会自动监听新页面的loaded事件，若加载完毕，再自动显示新页面。
mui.openWindow （{
url：new-page-url， id：new-page-id，
styles：{ ...... //新页面的位置及宽高 }，
extras：{ ..... //自定义扩展参数，可以用来处理页面间传值 }，
createNew：false，//是否重复创建同样id的webview，默认为false：不重复创建，直接显示
show：{ .... //页面loaded事件发生后自动显示；页面显示动画及动画持续时间等 }，
waiting：{ autoShow：true， //自动显示等待框
title："正在加载..."，//等待对话框上显示的提示内容
options：{ ...... //等待框背景区域宽高，根据内容自动计算合适宽高} }
}）
4、 移动终端上的手势事件，实际应用时，根据使用频率，mui会监听部分手势事件，如点击、滑动事件等；mui支持用户根据实际业务需求，通过设置页面初始化的init方法中gestureConfig参数，配置具体需要监听的手势事件。
mui.init（{ gestureConfig：{ tap： true， //单击屏幕
doubletap： true， //双击屏幕
longtap： true， //长按屏幕
swipe： true， //滑动
drag： true， //拖动中
hold：false， //按住屏幕
release：false //离开屏幕 }}）；
5、 json数据传输App端被拼装还原html的实例
showFile ： function（data） { //data为Json格式的数据流
try { var that = this，
doc = document， content = doc.getElementById（"content"），
p = doc.querySelector（"#container>p"），
cacheKey = that.cacheKey， articleId = that.articleId，
modified = false； that.showBar（）；
if（data.notfind） { that.showNoFile（）； return； }//未找到文件
if（！that.canShowFile || data.id ！= that.articleId） return；
……//无对象的处理
if（data.category == "industry"）{……//视频窗口对象插入Html代码；}
……//在分享页面里的title和href
……//把服务器端传来的title，author等字段显示在app终端的html上
if （that.fromSearch） {
that.data = {//Json对应的元组
id ： data.id，title ： data.title， ….相应的元组定义 || "" }；
}else{ that.data = null；}
that.readArticle（articleId）；
that.checkisfav（articleId， function（fav） { ……//分享的内容}）；
if （！data.notModified） {
…//隐藏图片或显示图片，显示图片及配套文字的位置样式 }
}}} catch（ex） {C.showErr（ex， "showfile"）；}
}
6、 保存信息到本地数据库
saveNewToDb： function（transition， data， isAndroid， onSuccess） {
transition.executeSql（"SQL的select语句 "， [data.id]， function（tr， result） {
if （result.rows.item（0）.num ！= 0） {//已存在记录，更新count和remark
transition.executeSql（"SQL的update语句"， [data.remark， parseInt（data.count， 10）， data.id]， function（tr， result） {onSuccess（result）；}）；
}else{//data.ptime= datenow_from_wjq_ network（data.ptime）；
//if（isAndroid） data.img = data.Androidimg；
transition.executeSql（"SQL的INSERT語句"，[插入对应的值：如data.id]， function（tx， result） {onSuccess（result）； }）；}
}）；
}
7、 调用终端内置地图直观显示交通灯位置
function plusReady（）{
if（！em||ws）{return}；
ws=plus.webview.currentWebview（）；// 获取窗口对象
wo=ws.opener（）；
setTimeout（function（）{
map=new plus.maps.Map（"map"）； //创建地图Map对象
//设置指定交通灯在地图初始中心点和缩放级别
map.centerAndZoom（new plus.maps.Point（交通灯GPS坐标），12）；
createMarker（）； createSubview（）； // 创建子窗口
}，500）；
ws.show（"pop-in"）； //关闭等待框显示页面
}
服务端的数据交互响应接口，基于windows Server操作系统IIS的asp代码，直接读取数据库并转成Json格式。
<%option explicit%><！-- #include file="conn.asp" --><%
Response.CharSet="UTF-8"
dim rs，sql，I，cb，ID
ID=trim（request（"ID"））
set rs=server.createobject（"adodb.recordset"）
Function doStr（str） "非法字符过滤函数 …… End Function
if trim（request（"callback"））<>"" then
response.write trim（request（"callback"））
else
response.write（"Undefined index： callback"）
end if
rs.open "Select * from jt where ID="& ID &""，conn，1，1
if not rs.eof then %>
（{"body"："<%=doStr（rs（"content"））%>"，"count"："<%=rs（"click"）%>"，"img"："<%=doStr（rs（"picurl"））%>"，"url"："http：//域名地址"，"prev"：""，"id"："<%=rs（"ID"）%>"，
"author"："<%=rs（"reporter"）%>"，"title"："<%=rs（"title"）%>"，"source"："GXnn"}）<%
end if
rs.close %>
（二）apk及ipa 打包
编写的代码经过测试及验证后，最后可以利用开发工具进行生成打包。Hbuilder支持App云端打包，直接自动生成Apk和ipa的终端安装包（见图8）。
经过试运行，交通信号控制系统App 软件可以稳定的运行在基于 Android 和IOS平台的手机和移动设备上，可以为交通管理者提供随身快速便捷灵活的查询及简单的管理服务，基本满足了交通管理员对区域性交通信号灯资源信息获取的实际需要。同时，也使交通管理的智能终端服务种类得到增添，展现出较好的应用前景和社会效益，具有非常好的实用性。
[参考文献]
[1]周齐飞.基于Android平台的Hybrid
App开发[J].电脑编程技巧与维护，2014（15）.
[2]陆钢，区洪辉，梁柏青，李蓉蓉.面向移动终端的HTML5应用运行环境研究[J].电信科学.2013（5）.
[3]张玮琪.基于移动终端的交通信息服务技术研究[D].吉林：吉林大学，2015.
[4]谢辉.交通信号灯控制系统建模与仿真研究[D].西安：长安大学，2014.
[5]孙毅然.我国现行道路交通信号灯设置中的问题及对策[J].河北联合大学学报（自然科学版），2014（2）.
[作者简介]韦劼群，广西广播电视大学教育技术中心副主任，高级工程师，硕士，研究方向：计算机应用技术、网络安全。
[责任编辑 张 宜]