1. 程式人生 > >微信小程式前後端互動流程

微信小程式前後端互動流程

(近期有時間,也餓,接點小型微信小程式私活填肚子)

建議封裝自己的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物件,進行後續操作.