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

趙朋

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

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

中圖分類號：TP311.1 文獻標識碼：A 文章編號：1674-098X（2019）03（c）-0004-02

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

HTML5混合開發(fā)是指HTML5和Native混合，開發(fā)主體是HTML5，但整個App的架構是Native架構。混合開發(fā)在保證App渲染效率和用戶體驗的同時，能夠降低App開發(fā)成本和復雜度，提高App開發(fā)效率。

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

2 移動考勤App的結構設計

（1）功能需求分析。

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

（2）功能點分解。

基于需求分析梳理出主要的功能點，對功能點進行分解，并為每個功能點設計相應的技術實現(xiàn)方案。主要的功能點包括：

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

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

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

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

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

（3）開放服務選擇。

基于功能分解說明，梳理需要使用的開放服務模塊，如地圖、推送、第三方登錄等等，開放服務需要從相應的開放平臺申請appId，并配置到項目的config文件中。

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

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

3 移動考勤App的功能實現(xiàn)

（1）靜態(tài)頁面設計。

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

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

①注冊登錄。

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

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

②打卡模塊。

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

③排班顯示。

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

④考勤統(tǒng)計。

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

⑤消息推送。

使用消息推送平臺pushGeTui來實現(xiàn)消息的推送，可以實現(xiàn)批量推送或單一推送。SDK初始化后，調用register接口注冊透傳消息監(jiān)聽器，服務端指定CID進行透傳消息推送，攜帶透傳消息內容Payload，JS層處理透傳消息內容Payload，進行相應的處理。

（3）需要注意的問題。

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

②在處理圖片緩存時，可以使用Webview默認的緩存機制，但對緩存圖片尺寸有限制，最好是手動處理圖片緩存，通過調用api.imageCache方法來實現(xiàn)。

4 結語

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

參考文獻

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

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

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