基于微信小程序開發企業報修系統

梁健

摘 要：本文主要針對使用Web方式開發的設備報修系統的不足，通過微信小程序的方式移植系統到移動端，充分利用手機端的多媒體優勢與微信小程序的消息系統打造一個簡潔，具有良好用戶體驗的企業設備報修系統。實際使用中證明，可有效提高系統功能的實用性和信息傳遞的及時性，提高用戶使用的體驗。

關鍵詞：微信小程序;維修系統;消息訂閱

0 引言：

單位現在使用的設備報修系統是基于asp.net與數據庫sqlServer設計開發的。在使用過程中逐漸發現了一些問題：設備發生故障時，需要到車間的計算機上登錄報修，不能做到隨手報修處理;維修人員須在計算機上登錄查看才會接到報修信息;故障現象以文字描述為主，不直觀具體;如需上傳圖片或視頻過程太過繁瑣;維修人員反饋維修進度信息給用戶不夠直接。因此，設想開發一個移動端的應用，解決上述問題。

1 技術選取

移動端應用一般有基于系統的App、基于手機瀏覽器的Web應用和基于微信、支付寶的小程序應用等多種方式。基于系統的App雖然功能豐富，但開發成本過高，一般要適配Android和IOS兩套系統。基于手機瀏覽器的Html應用對信息的傳遞有所欠缺，無法解決原Web應用的問題。微信小程序是基于微信（幾手每人都安裝有微信）而運行的，是一種不需要下載安裝即可使用的應用，用戶掃一掃或搜一下即可打開。而且開發門檻相對較低，不需考慮兼容手機系統。對本系統來說可在直接掃描設備資產編號報修設備，可充分利用手機的拍照與攝像功能上傳故障信息，還有具有消息系統可直接推送報修信息給維修人員，維修人員也可反饋維修進度給報修人員。

2 功能實現

2.1 微信小程序簡介

微信小程序基于微信運行，本質上是一種HTML5（移動端）應用，它和普通的瀏覽器的前端應用很像，但又有所不同，具有更多的權限與功能。其主要開發語言是JavaScript，用WXSS來修飾頁面。對于開發者而言，從Web應用遷移到小程序的開發成本并不高。

2.2 系統框架

本系統主要以微信小程序作為前端，后端修改原Web系統，兩者之間以json相互傳遞數據。如圖1所示

2.3 功能設計

2.3.1 登錄

用戶輸入帳號與密碼（如圖2），小程序調用wx.request把數據傳輸到服務端驗證，通過后調用wx.setStorageSync緩存用戶信息，使用戶下次不必再次輸入帳號與密碼。同時跳轉到報修頁面，根據獲取的用戶權限設定訪問不同的頁面。

2.3.2 報修人員

用戶登錄系統后，具報修設備、查詢已報修設備的維修進度、反饋設備維修結束后使用狀況給維修人員等權限。報修時可通過掃碼（wx.scanCode）掃描設備上的資產碼、通過查詢功能查找設備或直接手工填寫報修單據的方式來報修設備（如圖3）。報修成功后小程序會通過消息系統通知維修人員。

2.3.3 維修人員

維修人員通過消息系統接收到維修工單后可直接接單，維修期間可實時反饋工單進度給報修人員。可查詢自己有多少個正在進行中的維修工單，進度如何。可查看已完工的任務工單，用戶的反饋等。

2.3.4 管理

管理員登錄后可管理設備的信息，人員信息，可查詢所有維修人員的任務進度，維修反饋等。

3 系統幾個要點

3.1 微信小程序與服務端通訊

微信小程序與服務端之間的數據交互一般選用JSON傳輸。JSON是一種輕量級的數據交換格式，具有簡潔和清晰的層次結構，易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網絡傳輸效率， 是一種理想的數據交換語言。以登錄功能為例：

在微信小程序端

使用小程序WXML標簽語言與WXSS樣式語言設計一個小程序登錄頁面，在登錄按鈕上綁定事件方法，調用wx.request向后端請求數據，驗證通過后存儲登錄數據，跳轉其他頁面。關鍵代碼如下：

btnLoginSubmit： function（e） {? ? //登錄按鈕事件

var that = this;

var userId = e.detail.value.loginId;? ? //登錄帳號

var userPsw = md5.hexMD5（e.detail.value.loginPsw）;? ?//MD5加密密碼

wx.request（{? ? ?//請求數據

url： this.data.host + '/LoginUser.aspx'， // 請求接口地址

data： {

loginId： userId，

loginPsw： userPsw

}，

header： {

'content-type'： 'application/x-www-form-urlencoded'? ?// Post方式頭部

}，

method： "POST"，? ? //請求方式

success（res） {

if （res.data.Id == userId && res.data.Password == userPsw） {

//緩存用戶信息

wx.setStorageSync（'userInfo'， res.data）

app.globalData.userInfo = res.data;

that.authorSet（"true"）

//跳轉報修頁面

wx.switchTab（{

url： '/pages/repair/repair'

}）

……

在服務端（asp.net）

引入類庫Newtonsoft.Json。這是一個開源的Json操作類庫，性能與通用性都比較好。新建一個asp.net頁面（LoginUser.aspx，即小程序端請求接口地址）用于接收小程序端發送過來的帳號與密碼數據。驗證通過后以Response.Write返回結果，其中注意帳號密碼的加密。代碼如下：

using Newtonsoft.Json;

……

string loginId = HttpContext.Current.Request.Form["loginId"].ToString（）;//獲取帳號

string loginPsw = HttpContext.Current.Request.Form["loginPsw"].ToString（）;//獲取密碼

LoginUser user = new LoginUser（loginId）;

if （user.Exist && user.Password.Equals（loginPsw） && ！user.Prohibit）//驗證

{

Response.Write（JsonConvert.SerializeObject（user））;返回結果

……

3.2小程序消息系統——訂閱消息

小程序的訂閱消息功能是替代模板消息的一項新消息推送服務。訂閱消息把服務方發送消息的權限給了用戶，即用戶自主訂閱了消息后服務方才具有給用戶發送消息的能力。具體步驟如下：

第一步：同模板消息一樣要使用訂閱消息須生成個人訂閱消息模板，獲取模板ID，如圖4所示：

其中：一次性訂閱消息，即用戶訂閱了消息，小程序方可發送一次消息。

第二步：獲取訂閱消息下發權限。在小程序中用戶發生點擊的行為或者發起支付回調后，在事件函數中調用wx.requestSubscribeMessage打開訂閱消息面板（如圖5），從而獲取用戶的授權發送訂閱消息。其中當用戶勾選了訂閱面板中的“總是保持以上選擇，不再詢問”時，訂閱消息會被添加到用戶的小程序設置頁中，但在小程序中wx.requestSubscribeMessage后臺還是會默認調用，只是不再彈出訂閱消息面板。示例如下：

wx.requestSubscribeMessage（{

tmplIds： ['xIO1F5Vdbozo11rjcSHB5b0l2hy7guDaXed4s2ed6cIM']，//訂閱消息模板Id

success（res） {

wx.showToast（{

title： '訂閱成功！'，

icon： 'none'，

duration： 1000

}）

}，

fail（r） {

……

注：不可在form事件函數中調用。

第三步：調用接口下發送訂閱消息。在服務端通過如下小程序請求地址

https：//api.weixin.qq.com/cgi-bin/message/subscribe/send？access_token=ACCESS_TOKEN

發送訂閱消息，服務器具體代碼如下：

public static string getToken（）// 獲取用戶接口憑證

{

string grant_type = "client_credential";

string appid = "***********************";//小程序唯一憑證，即 AppID

string secret = "**********************************";//小程序唯一憑證密鑰，即 AppSecret

string wxUrl = "https：//api.weixin.qq.com/cgi-bin/token？grant_type=" + grant_type

+ "&appid=" + appid + "&secret=" + secret;//請求地址

string token = Utils.HttpGet（wxUrl）;//get請求獲取憑證

//定義存儲憑證的類

var wxToken = new { access_token = string.Empty， expires_in = string.Empty， errcode = 0， errmsg = string.Empty };

wxToken = JsonConvert.DeserializeAnonymousType（token， wxToken）;//解析Json

if （wxToken.errcode == 0）//成功

{

return wxToken.access_token;//返回憑證

（下轉440頁）

（上接439頁）

}

else

{

return wxToken.errmsg;

}

}

/// 微信發送訂閱消息

///

/// 接收者（用戶）的 openid

/// 消息模板Id

/// 微信小程序中的跳轉的頁面

/// 模板內容

///

public static int sendRequestMessage（string openid， string template_id， string page， Dictionary> data）

{

string access_token = Utils.getToken（）;? ? //獲取接口調用憑證

string wxUrl = "https：//api.weixin.qq.com/cgi-bin/message/subscribe/send？access_token=" + access_token;

//模板數據

RequestRepairMessage mess = new RequestRepairMessage（）;

mess.touser = openid; //接收者（用戶）的 openid

mess.template_id = template_id;

mess.page = page;//點擊模板卡片后的跳轉頁面

mess.data = data;

string postData = JsonConvert.SerializeObject（mess）;

string result = Utils.HttpPost（wxUrl， postData）;? ?//Post調用

var wxResult = new { errcode = 0， errmsg = string.Empty };

wxResult = JsonConvert.DeserializeAnonymousType（result， wxResult）;

return wxResult.errcode;

}

4 結束語

移動端應用隨著技術的發展越來越普遍，而微信小程序正以其使用便捷，用完即走，開發成本低，易移植等特性使得到用戶與廣大開發者的喜愛。本文所開發的維修系統小程序正是移植于Web應用，把小程序作為前端，后端稍微修改一下代碼。即可發揮移動端的便捷優勢，又可使用Web端本身豐富的功能。

參考文獻

[1]微信公眾平臺官方團隊發布 微信小程序官方文檔

https：//developers.weixin.qq.com/miniprogram/dev/framework/

[2]Christian Nagel，Bill Evjen，Jay Glynn等著? ?李銘譯? C#高級編程（第7版）? 清華大學出版社， 2010.11

[3]馬 駿? 編著 C#網絡應用編程（第2版）? 人民郵電出版社 2010.2