基于HTML5的移動(dòng)考勤App開發(fā)

趙朋

摘 要：隨著人們對(duì)于開發(fā)成本和周期的更高要求，跨平臺(tái)App開發(fā)框架得到快速發(fā)展?？缙脚_(tái)App開發(fā)框架使開發(fā)人員不再需要花費(fèi)大量精力在不同平臺(tái)上編寫相同功能的代碼，從而大大降低開發(fā)本。作者使用APICloud跨平臺(tái)開發(fā)框架，基于Html5的混合開發(fā)模式，利用Html5、CSS、JavaScript編程語言，開發(fā)移動(dòng)考勤App，實(shí)現(xiàn)便捷的考勤、休假、加班信息的查詢和辦理功能。

關(guān)鍵詞：混合開發(fā) HTML5 APICloud

中圖分類號(hào)：TP311.1 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1674-098X（2019）03（c）-0004-02

1 HTML5混合開發(fā)技術(shù)原理

HTML5混合開發(fā)是指HTML5和Native混合，開發(fā)主體是HTML5，但整個(gè)App的架構(gòu)是Native架構(gòu)?；旌祥_發(fā)在保證App渲染效率和用戶體驗(yàn)的同時(shí)，能夠降低App開發(fā)成本和復(fù)雜度，提高App開發(fā)效率。

APIcloud開發(fā)平臺(tái)是一種HTML5混合開發(fā)引擎。其架構(gòu)主要包括四層：第一層App應(yīng)用層，使用HTML + CSS進(jìn)行UI布局和渲染，功能和業(yè)務(wù)邏輯則通過JS實(shí)現(xiàn)；第二層API層，核心功能是橋接和管理，負(fù)責(zé)JS與Java，JS與Object-C之間的通訊；第三層是engine引擎，主要負(fù)責(zé)應(yīng)用的消息命令管理、事件管理、模塊管理；最底層OS層，主要涉及Android和iOS系統(tǒng)之間不同的特性，比如App啟動(dòng)流程以及生命周期事件分發(fā)等。

2 移動(dòng)考勤App的結(jié)構(gòu)設(shè)計(jì)

（1）功能需求分析。

考勤App包括考勤打卡、考勤統(tǒng)計(jì)、排班顯示、考勤信息顯示、加班模塊、消息推送等功能，根據(jù)功能需求設(shè)計(jì)UI架構(gòu)圖（見圖1）。

（2）功能點(diǎn)分解。

基于需求分析梳理出主要的功能點(diǎn)，對(duì)功能點(diǎn)進(jìn)行分解，并為每個(gè)功能點(diǎn)設(shè)計(jì)相應(yīng)的技術(shù)實(shí)現(xiàn)方案。主要的功能點(diǎn)包括：

注冊(cè)登錄可以設(shè)置為第三方（如微信）登錄模式，需要第三方登錄模塊；

登錄信息需要本地?cái)?shù)據(jù)存儲(chǔ)，不用每次登陸都輸入用戶名密碼；

排班顯示模塊需要上傳排班表，需要打開手機(jī)拍照或相冊(cè)功能；

考勤打卡及加班模塊，基于手機(jī)的定位功能實(shí)現(xiàn)，需要地圖模塊；

消息推送功能，需要加載第三方推送模塊。

（3）開放服務(wù)選擇。

基于功能分解說明，梳理需要使用的開放服務(wù)模塊，如地圖、推送、第三方登錄等等，開放服務(wù)需要從相應(yīng)的開放平臺(tái)申請(qǐng)appId，并配置到項(xiàng)目的config文件中。

（4）數(shù)據(jù)通信接口。

APICloud采取HTTP+JSON的方式，利用api.ajax模塊來獲取云端的數(shù)據(jù)，利用doT.js模版函數(shù)實(shí)現(xiàn)列表數(shù)據(jù)、下拉刷新、上拉加載等功能。

3 移動(dòng)考勤App的功能實(shí)現(xiàn)

（1）靜態(tài)頁面設(shè)計(jì)。

根據(jù)UI架構(gòu)設(shè)計(jì)圖，創(chuàng)建需要的Window和Frame的H5頁面文件，主要包括：首頁、登錄、注冊(cè)、打卡、考勤顯示、排班等等。通過云編譯自定義AppLoader，在手機(jī)上查看靜態(tài)頁面效果，測(cè)試按鍵的觸發(fā)、頁面的跳轉(zhuǎn)、退出等功能。

（2）功能模塊的實(shí)現(xiàn)。

①注冊(cè)登錄。

注冊(cè)登錄模塊重要的是實(shí)現(xiàn)數(shù)據(jù)的本地存儲(chǔ)和第三方登錄。本地存儲(chǔ)使用api.setStorage，保存登錄信息，實(shí)現(xiàn)自動(dòng)登錄。

第三方登錄選擇微信登錄，引入wx模塊，主要使用函數(shù)wx.isInstalled判斷是否安裝微信客戶端，wx.auth授權(quán)登錄，wx.getToken獲取授權(quán)的access_Token參數(shù)，wx.getUserInfo獲取用戶信息。

②打卡模塊。

考勤、加班打卡功能利用手機(jī)的定位功能實(shí)現(xiàn)，定位在設(shè)置的打卡點(diǎn)一定距離范圍內(nèi)，才可以打卡，超出距離則無法打卡。為實(shí)現(xiàn)這一功能，需要引入地圖模塊，用于設(shè)置打卡點(diǎn)和計(jì)算距離。本項(xiàng)目地圖模塊選擇百度地圖，引入bMap模塊，主要使用函數(shù)getLocation獲取經(jīng)緯度，open打開地圖，addAnnotations添加標(biāo)注信息，用于顯示地名，getAnnotationCoords獲取標(biāo)注經(jīng)緯度，用于計(jì)算距離，getNameFromCoords根據(jù)經(jīng)緯度查找地址信息。

③排班顯示。

管理員上傳排班表，api.getPicture通過調(diào)用手機(jī)相機(jī)或相冊(cè)，獲取圖片文件；在圖片的顯示上，使用photoBrowser圖片瀏覽器模塊，通過getImage函數(shù)設(shè)置圖片絕對(duì)路徑來顯示最新上傳的排班表；利用UIScrollPicture輪播模塊，實(shí)現(xiàn)排班表的翻頁查找。

④考勤統(tǒng)計(jì)。

該功能利用APICloud統(tǒng)計(jì)云API的應(yīng)用統(tǒng)計(jì)信息獲取接口，獲取指定應(yīng)用ID及時(shí)間范圍內(nèi)的相關(guān)應(yīng)用統(tǒng)計(jì)數(shù)據(jù)信息。調(diào)用方法為api.getAppStatisticDataById，POST請(qǐng)求方式。獲取的服務(wù)器數(shù)據(jù)，通過UILineChart圖表模塊，以折線圖的形式顯示到前端App頁面。

⑤消息推送。

使用消息推送平臺(tái)pushGeTui來實(shí)現(xiàn)消息的推送，可以實(shí)現(xiàn)批量推送或單一推送。SDK初始化后，調(diào)用register接口注冊(cè)透?jìng)飨⒈O(jiān)聽器，服務(wù)端指定CID進(jìn)行透?jìng)飨⑼扑停瑪y帶透?jìng)飨?nèi)容Payload，JS層處理透?jìng)飨?nèi)容Payload，進(jìn)行相應(yīng)的處理。

（3）需要注意的問題。

①使用FrameGroup來實(shí)現(xiàn)Frame的切換，需合理配置預(yù)加載的Frame數(shù)量，對(duì)preload參數(shù)進(jìn)行設(shè)置，不能每次切換都進(jìn)行刷新和重繪。

②在處理圖片緩存時(shí)，可以使用Webview默認(rèn)的緩存機(jī)制，但對(duì)緩存圖片尺寸有限制，最好是手動(dòng)處理圖片緩存，通過調(diào)用api.imageCache方法來實(shí)現(xiàn)。

4 結(jié)語

HTML5混合開發(fā)技術(shù)仍處于發(fā)展階段，還存在硬件交互受限等缺點(diǎn)，但其不依賴操作系統(tǒng)和硬件環(huán)境的特點(diǎn)，使其更具靈活性，具有較好的發(fā)展前景。

參考文獻(xiàn)

[1] 鄒達(dá)，李德興.30天App開發(fā)從0到1：APICloud移動(dòng)開發(fā)實(shí)戰(zhàn)[M].北京：人民郵電出版社，2018.

[2] （美）Estelle Weyl.HTML5移動(dòng)開發(fā)[M].范圣剛，陳宗斌，譯.北京：人民郵電出版社，2016.

[3] （美）Nicholas C.Zakas.高性能JavaScript[M].丁琛，譯.北京：電子工業(yè)出版社，2015.