曾玉紅

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

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

中圖分類號：TP311.5? ? ? 文獻標識碼：A

文章編號：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 背景

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

2 前端頁面介紹

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

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

3 Ajax調(diào)接口

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

4 網(wǎng)頁端

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

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

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

4.2 上傳Excel文件

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

4.3 有條件的分頁查詢

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

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

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

4.4 下發(fā)工資信息

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

4.5 其他基礎知識

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

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

5 移動端

5.1 動態(tài)構建年月下拉框

移動端頁面主要引用了jquery.mobile的樣式和js文件，因為頁面是在企業(yè)微信內(nèi)使用，所以首頁一開始就要通過企業(yè)微信的code換取用戶的id，然后動態(tài)構建年月select下拉框。

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

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

5.2 個人工資信息展示

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

6 結束語

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

參考文獻：

[1] 鄭李園.基于企業(yè)微信的高校移動辦公平臺建設[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] 趙愛濤.實現(xiàn)網(wǎng)頁下拉菜單的常用方法[J].石家莊職業(yè)技術學院學報，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框架下用戶注冊登錄界面的設計與實現(xiàn)[J].信息系統(tǒng)工程，2019（2）：54.

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

[8] 熊慧.jQuery技術在網(wǎ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的移動端游戲助手APP的設計與實現(xiàn)[J].數(shù)碼世界，2018（8）：92-93.

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