基于微信小程序差旅補助系統(tǒng)的設(shè)計與實現(xiàn)

馬 靜

（陜西國防工業(yè)職業(yè)技術(shù)學(xué)院，陜西 西安 710300）

在移動互聯(lián)網(wǎng)和智能手機普及的今天，微信已經(jīng)成為一種人們經(jīng)常會使用的手機應(yīng)用程序，據(jù)不完全統(tǒng)計，截至2020年初，微信用戶人數(shù)約12 億人。微信豐富了人們的生活，為人們帶來了極大的便利，可以使用微信與他人進行音視頻通信、朋友圈信息分享、掃描二維碼、完成手機支付、使用公眾號服務(wù)等等。最令人矚目的是在2017年張小龍帶領(lǐng)騰訊的科研團隊發(fā)布的微信小程序正式上線后，微信小程序逐漸走入人們的視野。微信小程序最大的創(chuàng)新在于，它依托微信平臺無需下載安裝就可以使用，使用者只需要在微信中搜索小程序名稱或者掃描二維碼即可用，而且小程序的開發(fā)門檻很低，對于企業(yè)、政府、媒體、其他組織或個人都可以申請注冊。在中國IT 界的創(chuàng)新成果下，筆者使用微信小程序開發(fā)了一套高校差旅補助系統(tǒng)，能夠方便快捷地對高校教師差旅補助進行查詢和計算，提高高校差旅補助報銷辦事效率[1-3]。

1 差旅補助小程序功能分析

我國的高等院校公職人員和教師每學(xué)期都會因為外出參加培訓(xùn)、會議、調(diào)研以及招生宣傳等原因產(chǎn)生差旅費用，這些費用由于是工作需要可以由學(xué)校承擔，但是根據(jù)財務(wù)規(guī)定，不同的教師職務(wù)級別、出差事由、地點和時間都有詳細的差旅補助計算方法，這給財務(wù)會計和出差人員帶來了很大的困擾，需要根據(jù)出差情況查閱文件、計算費用、審核票據(jù)等一系列流程才能完成報銷。而差旅補助小程序可以根據(jù)自身出差情況快速查詢到交通補助和住宿標準，不至于超出補助限額，同時能快速計算出伙食補助和短途交通補助，簡化差旅報銷流程，提高效率[4-6]。

差旅補助小程序能夠?qū)崿F(xiàn)的功能包括3 個方面：一是查詢功能，首先可以根據(jù)教師的職務(wù)級別，即省部級、廳局級、普通人員查詢交通標準，根據(jù)標準購買長途車票主要有火車、高鐵/動車、全列軟席、飛機和輪船；其次可以根據(jù)出差地點、職務(wù)級別、出差日期查詢住宿標準，陜西省內(nèi)不同城市標準不同，省外大連、寧波、廈門、青島、深圳5 個計劃單列市與省內(nèi)其他城市不同，個別城市夏季住宿標準不同。二是計算功能，可以計算伙食補助費和短途交通補助費，伙食補助不區(qū)分職務(wù)級別，省內(nèi)每人每天50 元，省外每人每天80 元；短途交通補助費僅根據(jù)事由和天數(shù)計算，出差事由不同補助計算不同，交通補助省內(nèi)每人每天80 元，省外每人每天100 元。三是歷史記錄功能，指使用差旅計算小程序可將完成查詢和計算的差旅事項保存在歷史記錄中并且顯示出來，方便差旅事項的查看和管理，差旅補助小程序功能模塊見圖1。

圖1 差旅補助小程序功能模塊圖

2 差旅補助小程序總體架構(gòu)

差旅補助小程序開發(fā)采用MINA 框架，MINA分為三大部分：邏輯層、視圖層和系統(tǒng)層。邏輯層是由.js 文件組成，編寫語言是JavaScript，用來實現(xiàn)微信小程序的邏輯處理，并將邏輯處理完成的數(shù)據(jù)交給視圖層展現(xiàn)；視圖層包括.wxml 與.wxss 兩種文件，前者表示頁面結(jié)構(gòu)，后者表示頁面樣式，視圖層基本單元是“組件”；系統(tǒng)層會借助JSBridge實現(xiàn)對API 接口的調(diào)用，包括離線存儲、網(wǎng)絡(luò)請求、和其他微信功能等，差旅補助小程序開發(fā)所采用的MINA 框架架構(gòu)見圖2。

圖2 MINA 框架架構(gòu)圖

3 差旅補助小程序首頁設(shè)計與實現(xiàn)

差旅補助小程序首頁的核心功能是使用戶能便捷完成系統(tǒng)的各個選項設(shè)置，包括出差地點選擇，實現(xiàn)省內(nèi)外及所屬城市聯(lián)動，出差時間范圍選擇，出差事由如培訓(xùn)、會議、調(diào)研、招生宣傳等選擇，職務(wù)級別如省部級、廳局級、普通人員選擇，并把設(shè)置的所有選項信息進行提交。首頁頁面的實現(xiàn)效果見第54 頁圖3，具體是通過index 目錄下的文件實現(xiàn)，其中index.wxml 文件用于實現(xiàn)首頁頁面結(jié)構(gòu)，主要通過微信小程序組件實現(xiàn)。view 和picker組件是實現(xiàn)首頁頁面結(jié)構(gòu)最重要的兩個組件，view是視圖容器組件，用來包裹其他組件或者顯示頁面內(nèi)容，它類似于HTML 中的div 標簽；picker 是一個可以從底部彈起的滾動選擇器，首頁頁面中的出差地點及出差時間選擇項就是通過picker 組件實現(xiàn)。代碼中的mode 是picker 組件的一個屬性，用來指定選擇器類型，賦值為date 的含義是日期選擇器；bindchange 是當選擇器中的值發(fā)生改變后會觸發(fā)的一個事件，這里的事件名稱為dateChange，它的代碼存在于首頁的邏輯文件index.js 中，用來實現(xiàn)日期選擇處理和異常處理；value 屬性的值{{evection.time.start_date}} 被綁定在邏輯文件中用來處理日期選擇的開始時間。首頁中的index.wxss 文件用來實現(xiàn)頁面樣式，picker 組件的頁面樣式主要通過對應(yīng)wxss 文件中的“picker”“pick-box”和“picker-group”的類選擇器樣式腳本實現(xiàn)。

4 差旅補助小程序查詢計算結(jié)果頁設(shè)計與實現(xiàn)

查詢計算結(jié)果頁會采集首頁所有選項信息實現(xiàn)系統(tǒng)兩個查詢功能：查詢交通標準和查詢住宿標準，用戶可以根據(jù)查詢結(jié)果明確自身職務(wù)級別、出差地點及日期所允許的長途交通標準和住宿標準，從而進行購買車票和住宿，不至于超出報銷標準。另外結(jié)果頁還需要根據(jù)出差地點和事由，計算伙食補助費和短途交通補助費，其中交通標準查詢實現(xiàn)核心代碼如下，差旅補助小程序查詢計算結(jié)果頁實現(xiàn)效果見第54 頁圖4。

5 差旅補助小程序歷史記錄頁設(shè)計與實現(xiàn)

歷史記錄頁的功能是將用戶查詢和計算完成的差旅補助事項保存，并顯示在頁面中，起到查詢和管理的作用，歷史記錄頁實現(xiàn)效果見第54 頁圖5。歷史記錄頁實現(xiàn)的核心代碼如下。

圖3 首頁實現(xiàn)效果

圖4 結(jié)果頁實現(xiàn)效果

圖5 歷史記錄頁實現(xiàn)效果

綜上所述，差旅補助系統(tǒng)采用JavaScript，WXML，WXSS 和JSON 技術(shù)，實現(xiàn)了查詢交通標準、住宿標準，計算伙食補助費、交通補助費和歷史記錄功能。實踐證明，基于微信小程序差旅補助系統(tǒng)可以提高高校差旅補助報銷辦事效率，對加快高校財務(wù)信息化建設(shè)有很好的推廣意義。