曾玉紅

摘要：企業(yè)微信，作為一種高效辦公平臺(tái)，已經(jīng)被各行各業(yè)廣泛使用。值得一提的是，企業(yè)微信支持企業(yè)內(nèi)部應(yīng)用開發(fā)，因此企業(yè)管理員可以根據(jù)企業(yè)微信API開發(fā)個(gè)性化辦公應(yīng)用。如今一些學(xué)校也緊跟時(shí)代，開通了企業(yè)微信，以此來提高學(xué)校的服務(wù)水平。根據(jù)江西服裝學(xué)院智慧校園的建設(shè)需要，同時(shí)為更好地服務(wù)教職工，在企業(yè)微信API的基礎(chǔ)上，學(xué)校的網(wǎng)絡(luò)與信息化管理中心部門開發(fā)并實(shí)現(xiàn)了電子工資條應(yīng)用小程序。該應(yīng)用小程序的前端頁面采用了jQuery和Ajax技術(shù)相結(jié)合的方式，以提高數(shù)據(jù)加載的效率和前端開發(fā)效率。

關(guān)鍵詞：企業(yè)微信;電子工資條;應(yīng)用小程序;前端開發(fā);jQuery;Ajax技術(shù)

中圖分類號(hào)：TP311.5? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）10-0079-02

Abstract： As a highly efficient office platform， Enterprise WeChat has been widely used by all walks of life. It is worth mentioning that Enterprise WeChat supports enterprise internal application development， so enterprise administrators can develop personalized office applications based on enterprise WeChat API. Nowadays， some schools are also keeping up with the times and opening up WeChat to improve the service level of the school. According to the construction needs of the smart campus of Jiangxi Institute of Fashion Technology， and at the same time to better serve the faculty and staff， based on the enterprise WeChat API， the school's Network & Information Management Center department developed and implemented the electronic payroll application applet. The front-end page of the application applet uses a combination of jQuery and Ajax technology to improve data loading efficiency and front-end development efficiency.

Key words： enterprise WeChat; electronic payroll; application applet; web and mobile front-end development; jQuery; Ajax technology

1 背景

隨著時(shí)代的發(fā)展，工資條形式逐步發(fā)生變化。由于企業(yè)微信的出現(xiàn)，各類第三方應(yīng)用小程序也隨之而來，常見的就有公告、考勤、請(qǐng)假、報(bào)銷等[1]。而公司要想使用優(yōu)質(zhì)的第三方應(yīng)用小程序就要付出一筆費(fèi)用，因此公司內(nèi)部需要開發(fā)屬于自身的內(nèi)部應(yīng)用小程序來減免一部分開銷。文章接下來主要是對(duì)電子工資條前端頁面的設(shè)計(jì)與開發(fā)進(jìn)行詳細(xì)的介紹。

2 前端頁面介紹

電子工資條項(xiàng)目是企業(yè)微信的內(nèi)部應(yīng)用小程序，采用了前后端分離的方式開發(fā)，前端主要通過Ajax調(diào)用后臺(tái)接口。電子工資條項(xiàng)目分為網(wǎng)頁端和移動(dòng)端，其中網(wǎng)頁端要實(shí)現(xiàn)管理員用戶登錄、修改密碼、上傳Excel文件、查詢上傳記錄、查詢工資詳情以及下發(fā)工資信息功能，包括以下八個(gè)頁面：login.html、index.html、main.html、upload_excel.html search_upload_record.html、search_wage_detail.html、 search_getFeedback.html 和edit_password.html。

移動(dòng)端要實(shí)現(xiàn)普通用戶查詢工資詳情和反饋意見等功能，包括三個(gè)頁面：app_index.html、app_search_wage_detail.html 、app_feedback.html。

3 Ajax調(diào)接口

jQuery調(diào)用后臺(tái)接口有三種方式，分別是$.ajax（{}）、$.post（{}）和$.get（{}），本項(xiàng)目采用的是ajax方法[2]。以登錄頁為例，通過設(shè)置請(qǐng)求方式為POST，數(shù)據(jù)類型為json，來向后臺(tái)提交賬號(hào)和密碼參數(shù)[3]，接下來可在本地通過瀏覽器的開發(fā)者工具查看返回的數(shù)據(jù)，返回錯(cuò)誤碼為0則登錄成功，跳轉(zhuǎn)至網(wǎng)頁端首頁。

4 網(wǎng)頁端

4.1 首頁菜單實(shí)現(xiàn)

首頁排版參照了柏慧通電子工資條網(wǎng)頁的菜單樣式設(shè)計(jì)，通過設(shè)置ul li a樣式和jQuery的toggleClass方法來達(dá)到菜單點(diǎn)擊有展開折疊[4]的效果。

由于本項(xiàng)目網(wǎng)頁端頁面較少，因此菜單鏈接采用了iframe標(biāo)簽（頁面嵌套）。在菜單li標(biāo)簽中設(shè)置html5里面出的新屬性data-src[5]，再寫一個(gè)函數(shù)即當(dāng)用戶點(diǎn)擊某個(gè)li標(biāo)簽時(shí)，相應(yīng)的data-src傳入iframe標(biāo)簽中的src中，來達(dá)到內(nèi)嵌頁面跳轉(zhuǎn)的效果，從而精簡代碼。當(dāng)然，為了頁面美觀，項(xiàng)目中將iframe標(biāo)簽的邊界設(shè)置為0，寬高設(shè)置為100%。為了各頁面的安全性，每個(gè)頁面都有判斷是否登錄的方法來防止用戶跳過登錄界面直接訪問[6]。

4.2 上傳Excel文件

導(dǎo)入工資條頁面因?yàn)橛邪l(fā)放月份的字段，因此引用了date_time_picker的樣式和js文件，方便用戶進(jìn)行日期選擇。由于后臺(tái)接收的日期參數(shù)是時(shí)間戳到秒，所以input框接收到的數(shù)據(jù)還需要經(jīng)過處理Date.parse（date）/1000，然后以formData的形式將各參數(shù)和文件傳給后臺(tái)[7]。在測試中，發(fā)現(xiàn)input框總是記住上一次輸入日期，給用戶帶來不便，就通過設(shè)置autocomplete="off"來消除上一次的輸入內(nèi)容;為避免用戶上傳其他類型的文件，也可在上傳文件input框中設(shè)置accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet， application/vnd.ms-excel"。

4.3 有條件的分頁查詢

根據(jù)后臺(tái)接口傳來的json數(shù)據(jù)，需要對(duì)數(shù)據(jù)進(jìn)行有條件的分頁查詢，所以工資條上傳記錄頁和詳情頁都使用了較為靈活的jq-paginator.js分頁插件。此分頁插件之所以靈活，是因?yàn)檎{(diào)用該方法較為簡單，只需要寫出$（"#pagination-bottom"）.jqPaginator（pagination）即可。Pagination為一個(gè)集合，里面的元素可為全局變量。

拼接分頁數(shù)據(jù)時(shí)，可通過if語句判斷是否要傳遞當(dāng)前頁和一頁顯示記錄數(shù)以外參數(shù)，以達(dá)到點(diǎn)擊查詢按鈕查詢的效果。但是查詢條件拉去的數(shù)據(jù)跟之前默認(rèn)的分頁數(shù)據(jù)是不一樣的[8]，所以要通過$（"#pagination-bottom"）.jqPaginator（'destroy'）語句銷毀之前拼接好的數(shù)據(jù)。有一點(diǎn)需要注意，ajax請(qǐng)求后臺(tái)數(shù)據(jù)時(shí)，需要設(shè)置async為false，讓所有的請(qǐng)求均為同步請(qǐng)求，分頁效果才能正常。

因?yàn)闆]有使用完整的jQuery框架，所以在測試時(shí)發(fā)現(xiàn)項(xiàng)目沒有切換一頁記錄數(shù)的功能。為了改進(jìn)其功能，項(xiàng)目增加了select的onchange事件，讓用戶自由選擇一頁顯示的記錄數(shù)，從而讓分頁功能更加貼近用戶習(xí)慣。

4.4 下發(fā)工資信息

查詢工資詳情頁除了條件查詢分頁功能以外，還有一個(gè)下發(fā)消息按鈕。實(shí)現(xiàn)原理則是設(shè)置按鈕只能被點(diǎn)擊一次，根據(jù)sendStatus的狀態(tài)判斷用戶是否可以再進(jìn)行點(diǎn)擊。項(xiàng)目中使用的是jQuery中的hide（）和show（）方法[9]。當(dāng)用戶點(diǎn)擊發(fā)送按鈕，頁面拉取后臺(tái)數(shù)據(jù)，返回?cái)?shù)據(jù)中的錯(cuò)誤碼為0則發(fā)送成功，按鈕隱藏，就算重新打開頁面按鈕也會(huì)隱藏，避免用戶重復(fù)點(diǎn)擊[10]。

4.5 其他基礎(chǔ)知識(shí)

前端開發(fā)人員可以通過瀏覽器的開發(fā)者工具調(diào)試代碼，當(dāng)發(fā)現(xiàn)頁面有緩存問題時(shí)，可以在各個(gè)鏈接地址后面添加隨機(jī)數(shù)Math.round（Math.random（）*100）來解決。

項(xiàng)目內(nèi)實(shí)現(xiàn)返回上一頁功能可用onclick="Javascript： window.history.go（-1）"，其中的history.go（-1）表示后退與刷新。

5 移動(dòng)端

5.1 動(dòng)態(tài)構(gòu)建年月下拉框

移動(dòng)端頁面主要引用了jquery.mobile的樣式和js文件，因?yàn)轫撁媸窃谄髽I(yè)微信內(nèi)使用，所以首頁一開始就要通過企業(yè)微信的code換取用戶的id，然后動(dòng)態(tài)構(gòu)建年月select下拉框。

頁面通過getFullYear（）方法獲取當(dāng)前年份，再用for循環(huán)將最近五年的數(shù)字通過語句$（"#year"）.append（"" + year + ""）放入option中。為了讓數(shù)據(jù)正常顯示，要用移動(dòng)端刷新語句$（"#year"）.selectmenu（'refresh'， true）。

當(dāng)同一個(gè)月下發(fā)了兩次工資時(shí)，例如有績效獎(jiǎng)金，月份下拉框可以通過Map方法去掉重復(fù)的月份來保持頁面美觀性。用戶可以在下一個(gè)頁面用工資名稱查詢相應(yīng)的工資情況。

5.2 個(gè)人工資信息展示

個(gè)人工資信息展示頁面主要用到了jQuery控制css類的知識(shí)點(diǎn)，通過條件判斷頁面的div顯示與隱藏問題。這需要前端開發(fā)人員有清晰的思維，在編寫代碼前有一個(gè)設(shè)計(jì)框架，再逐步調(diào)試和改進(jìn)。

6 結(jié)束語

電子工資條項(xiàng)目經(jīng)過用戶的體驗(yàn)測試，前端頁面進(jìn)行了部分修改，已正式投入使用。通過這個(gè)項(xiàng)目的開發(fā)，可以知道，前端設(shè)計(jì)和開發(fā)不僅僅要求前端開發(fā)人員掌握html、css、js等基礎(chǔ)，還需具備一定的審美，了解用戶的需求和習(xí)慣，這樣才能讓項(xiàng)目更加受歡迎。

參考文獻(xiàn)：

[1] 鄭李園.基于企業(yè)微信的高校移動(dòng)辦公平臺(tái)建設(shè)[J].中國電力教育，2019（2）：77-78.

[2] Jack Franklin，Russ Ferguson.A jQuery Image Slider[M]//Beginning jQuery. Apress， 2017.

[3] Camino H J B，Olalo R J C，Salamo D D，et al.An Ajax-Based Hotel Management System Implementing Three-Tier Architecture Approach[J].Cloud，2013，1（1）.

[4] 趙愛濤.實(shí)現(xiàn)網(wǎng)頁下拉菜單的常用方法[J].石家莊職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2017，29（2）：42-44.

[5] Jeanine Meyer. Quiz： Using Games to Learn HTML5 and JavaScript[M]// The Essential Guide to HTML5，2018.

[6] 賈軒，王棟軒.基于SSM框架下用戶注冊(cè)登錄界面的設(shè)計(jì)與實(shí)現(xiàn)[J].信息系統(tǒng)工程，2019（2）：54.

[7] 徐迪新，吳長孫.基于.NET平臺(tái)jQuery Ajax異步處理JSON數(shù)據(jù)應(yīng)用[J].科技廣場，2017（4）：77-80.

[8] 熊慧.jQuery技術(shù)在網(wǎng)頁美工中的應(yīng)用[J].中國新通信，2018，20（6）：100.

[9] Shuai Wang，Wensheng Dou，Chushu Gao.Mining API Type Specifications for JavaScript[C]//2017 24th Asia-Pacific Software Engineering Conference （APSEC）.IEEE Computer Society，2017.

[10] 張艷敏，喬陽陽.基于HTML5的移動(dòng)端游戲助手APP的設(shè)計(jì)與實(shí)現(xiàn)[J].數(shù)碼世界，2018（8）：92-93.

【通聯(lián)編輯：謝媛媛】