微信小程式前後端互動流程
阿新 • • 發佈:2019-01-04
(近期有時間,也餓,接點小型微信小程式私活填肚子)
建議封裝自己的HTTP請求,使用方便並且多少可以減少程式碼量:
function HttpRequst(loading, url, sessionChoose, sessionId, params, method, ask, callBack) { if (loading == true) { wx.showToast({ title: '資料載入中', icon: 'loading' }) } var paramSession = [{}, { 'content-type': 'application/json', 'Cookie': 'JSESSIONID=' + sessionId }, { 'content-type': 'application/json' }, { 'content-type': 'application/x-www-form-urlencoded', 'Cookie': 'JSESSIONID=' + sessionId }, { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8', 'Cookie': 'JSESSIONID=' + sessionId } ] wx.request({ url: baseUrl + url, data: params, dataType: "json", header: paramSession[sessionChoose], method: method, success: function(res) { console.log(res); console.log(res.data.statusCode); if (loading == true) { wx.hideToast(); } if (res.data.needLogin == true) { wxLogin2(loading, callBack);//在此做自己的wx.login } if (res.data.needLogin != true) { callBack(res.data); } }, complete: function() { if (loading == true) { wx.hideToast(); } } }) }
我們可以在能夠使用 HttpRequst 的地方很簡單的發出請求,並預定callback函式:
util.HttpRequst(true, "house/report.do", 4, wx.getStorageSync("sessionId"), params, "POST", false, _this.sthAfterReport);
利用微信提供的API—getSession,我們可以在小程式端對session過期做相應處理,這可以解決使用者登出並切換使用者登入的時候,系統需要更新使用者的問題:
在app.js-onLaunch()方法中: wx.checkSession({ success: function (res) { console.log("處於登入態"); console.log(wx.getStorageSync('sessionId')); }, fail: function (res) { wx.removeStorageSync('sessionId');//在此可以在使用者切換登入的時候,將儲存在快取中的session資訊刪除. console.log("處於非登入態"); } })
在後端我們可以對請求進行攔截,針對不同的框架有不同的實現方法,這裡以後端請求filter為例:
/* *當小程式端接收到needLogin == true的標記時,觸發wx.login()方法,在後端login方法中,將user資訊加入session中並將sessionId傳回小程式端儲存,可以通過wx.setStorageSync()方法儲存到微信端快取當中. *若session中存在user資訊,則可以繼續進行請求的操作. / User user = (User)req.getSession().getAttribute("user"); if(null == user){ res.put("needLogin", true); return res; } //後端login. map.put("sessionId", req.getSession().getId()); //前端login. wx.setStorageSync('sessionId', res.sessionId);
大致流程彙總說明:
新使用者初次登入,小程式端----傳送https-request----->服務端.
filter獲取user為空,返回needLogin為true的標識.
小程式端呼叫wx.login().
服務端將session資訊放到response.
小程式端將session資訊儲存到快取.
小程式端之後的request呼叫,都在request裡附加session資訊.
服務端根據session資訊取出user物件,進行後續操作.