基于HTML5的移动考勤App开发

赵朋

摘 要：随着人们对于开发成本和周期的更高要求，跨平台App开发框架得到快速发展。跨平台App开发框架使开发人员不再需要花费大量精力在不同平台上编写相同功能的代码，从而大大降低开发本。作者使用APICloud跨平台开发框架，基于Html5的混合开发模式，利用Html5、CSS、JavaScript编程语言，开发移动考勤App，实现便捷的考勤、休假、加班信息的查询和办理功能。

关键词：混合开发 HTML5 APICloud

中图分类号：TP311.1 文献标识码：A 文章编号：1674-098X（2019）03（c）-0004-02

1 HTML5混合开发技术原理

HTML5混合开发是指HTML5和Native混合，开发主体是HTML5，但整个App的架构是Native架构。混合开发在保证App渲染效率和用户体验的同时，能够降低App开发成本和复杂度，提高App开发效率。

APIcloud开发平台是一种HTML5混合开发引擎。其架构主要包括四层：第一层App应用层，使用HTML + CSS進行UI布局和渲染，功能和业务逻辑则通过JS实现；第二层API层，核心功能是桥接和管理，负责JS与Java，JS与Object-C之间的通讯；第三层是engine引擎，主要负责应用的消息命令管理、事件管理、模块管理；最底层OS层，主要涉及Android和iOS系统之间不同的特性，比如App启动流程以及生命周期事件分发等。

2 移动考勤App的结构设计

（1）功能需求分析。

考勤App包括考勤打卡、考勤统计、排班显示、考勤信息显示、加班模块、消息推送等功能，根据功能需求设计UI架构图（见图1）。

（2）功能点分解。

基于需求分析梳理出主要的功能点，对功能点进行分解，并为每个功能点设计相应的技术实现方案。主要的功能点包括：

注册登录可以设置为第三方（如微信）登录模式，需要第三方登录模块；

登录信息需要本地数据存储，不用每次登陆都输入用户名密码；

排班显示模块需要上传排班表，需要打开手机拍照或相册功能；

考勤打卡及加班模块，基于手机的定位功能实现，需要地图模块；

消息推送功能，需要加载第三方推送模块。

（3）开放服务选择。

基于功能分解说明，梳理需要使用的开放服务模块，如地图、推送、第三方登录等等，开放服务需要从相应的开放平台申请appId，并配置到项目的config文件中。

（4）数据通信接口。

APICloud采取HTTP+JSON的方式，利用api.ajax模块来获取云端的数据，利用doT.js模版函数实现列表数据、下拉刷新、上拉加载等功能。

3 移动考勤App的功能实现

（1）静态页面设计。

根据UI架构设计图，创建需要的Window和Frame的H5页面文件，主要包括：首页、登录、注册、打卡、考勤显示、排班等等。通过云编译自定义AppLoader，在手机上查看静态页面效果，测试按键的触发、页面的跳转、退出等功能。

（2）功能模块的实现。

①注册登录。

注册登录模块重要的是实现数据的本地存储和第三方登录。本地存储使用api.setStorage，保存登录信息，实现自动登录。

第三方登录选择微信登录，引入wx模块，主要使用函数wx.isInstalled判断是否安装微信客户端，wx.auth授权登录，wx.getToken获取授权的access_Token参数，wx.getUserInfo获取用户信息。

②打卡模块。

考勤、加班打卡功能利用手机的定位功能实现，定位在设置的打卡点一定距离范围内，才可以打卡，超出距离则无法打卡。为实现这一功能，需要引入地图模块，用于设置打卡点和计算距离。本项目地图模块选择百度地图，引入bMap模块，主要使用函数getLocation获取经纬度，open打开地图，addAnnotations添加标注信息，用于显示地名，getAnnotationCoords获取标注经纬度，用于计算距离，getNameFromCoords根据经纬度查找地址信息。

③排班显示。

管理员上传排班表，api.getPicture通过调用手机相机或相册，获取图片文件；在图片的显示上，使用photoBrowser图片浏览器模块，通过getImage函数设置图片绝对路径来显示最新上传的排班表；利用UIScrollPicture轮播模块，实现排班表的翻页查找。

④考勤统计。

该功能利用APICloud统计云API的应用统计信息获取接口，获取指定应用ID及时间范围内的相关应用统计数据信息。调用方法为api.getAppStatisticDataById，POST请求方式。获取的服务器数据，通过UILineChart图表模块，以折线图的形式显示到前端App页面。

⑤消息推送。

使用消息推送平台pushGeTui来实现消息的推送，可以实现批量推送或单一推送。SDK初始化后，调用register接口注册透传消息监听器，服务端指定CID进行透传消息推送，携带透传消息内容Payload，JS层处理透传消息内容Payload，进行相应的处理。

（3）需要注意的问题。

①使用FrameGroup来实现Frame的切换，需合理配置预加载的Frame数量，对preload参数进行设置，不能每次切换都进行刷新和重绘。

②在处理图片缓存时，可以使用Webview默认的缓存机制，但对缓存图片尺寸有限制，最好是手动处理图片缓存，通过调用api.imageCache方法来实现。

4 结语

HTML5混合开发技术仍处于发展阶段，还存在硬件交互受限等缺点，但其不依赖操作系统和硬件环境的特点，使其更具灵活性，具有较好的发展前景。

参考文献

[1] 邹达，李德兴.30天App开发从0到1：APICloud移动开发实战[M].北京：人民邮电出版社，2018.

[2] （美）Estelle Weyl.HTML5移动开发[M].范圣刚，陈宗斌，译.北京：人民邮电出版社，2016.

[3] （美）Nicholas C.Zakas.高性能JavaScript[M].丁琛，译.北京：电子工业出版社，2015.