最近微信小程序開發很火。我們的移動端項目也開始使用小程序來實現，在這之前我們已經基于Html5實現了類似于小程序的應用。了解了小程序開發后覺得有很多相似之處，還是要用到js和css這些技術。但也有許多不同，jquery等這些js庫不能直接使用了、http session也不支持、頁面發起http請求小程序有自己的api。

對于我們項目來說就不只是簡單的將H5頁面翻譯成小程序的頁面這么簡單了。首先要解決的問題就是http session。在H5項目中，使用http session來關聯微信openid這樣每次http請求都能確定是哪個用戶發起的請求。如果熟悉http session的原理，session問題就好解決了。常見的session保持方式是，當瀏覽器向服務端發起http請求時，服務端檢查在http 頭部cookie參數里是否包含sessionid，如果有sessionid就根據sessionid去查看存儲在服務器端的session，session里保存的當前會話的一些信息。如果sessionid沒有服務端就會分配一個，寫到cookie字段里，瀏覽器下次發起其它請求的時候帶上。而在小程序里所有的請求都通過wx.request API來發起的。如果對wx.request API包裝一下，使其每次向服務端發起請求時也添加一個名稱為Cookie的http header，這樣也不用對服務端作改動。服務端分配的sessionid使用wx.setStorageSync API存儲在微信客戶端。

1、客戶端實現 

客戶端代碼目錄smallapp-session/views，客戶端主要實現對wx.request的封裝，在wafer-client-demo項目的基礎上作了一些修改。 

wx.request封裝

var constants = require('./constants');

var utils = require('./utils');

var Session = require('./session');

var loginLib = require('./login');

var noop = function noop() {};

var buildAuthHeader = function buildAuthHeader(session) {

    var header = {};

    if (session && session.id) {

        header['Cookie'] =constants.WX_HEADER_ID+'='+session.id;

    }

    return header;

};

function request(options) {

    if (typeof options !== 'object') {

        var message = '請求傳參應為 object 類型，但實際傳了 ' + (typeof options) + ' 類型';

        throw new RequestError(constants.ERR_INVALID_PARAMS, message);

    }

    var requireLogin = options.login;

    var success = options.success || noop;

    var fail = options.fail || noop;

    var complete = options.complete || noop;

    var originHeader = options.header || {};

    // 成功回調

    var callSuccess = function () {

        success.apply(null, arguments);

        complete.apply(null, arguments);

    };

    // 失敗回調

    var callFail = function (error) {

        fail.call(null, error);

        complete.call(null, error);

    };

    // 是否已經進行過重試

    var hasRetried = false;

    if (requireLogin) {

        doRequestWithLogin();

    } else {

        doRequest();

    }

    // 登錄后再請求

    function doRequestWithLogin() {

        loginLib.login({ success: doRequest, fail: callFail });

    }

    // 實際進行請求的方法

    function doRequest() {

        var authHeader = buildAuthHeader(Session.get());

        console.log(authHeader)

        wx.request(utils.extend({}, options, {

            header: utils.extend({}, originHeader, authHeader),

            success: function (response) {

                var data = response.data;

                console.log("err:",data)

                console.log("errid:",data[constants.WX_SESSION_MAGIC_ID])

                // 如果響應的數據里面包含 SDK Magic ID，表示被服務端 SDK 處理過，此時一定包含登錄態失敗的信息

                if (data && data[constants.WX_SESSION_MAGIC_ID]) {

                    console.log("clear session")

                    // 清除登錄態

                    Session.clear();

                    var error, message;

                    if (data.error === constants.ERR_INVALID_SESSION) {

                        // 如果是登錄態無效，并且還沒重試過，會嘗試登錄后刷新憑據重新請求

                        if (!hasRetried) {

                            hasRetried = true;

                            doRequestWithLogin();

                            return;

                        }

                        message = '登錄態已過期';

                        error = new RequestError(data.error, message);

                    } else {

                        message = '鑒權服務器檢查登錄態發生錯誤(' + (data.error || 'OTHER') + ')：' + (data.message || '未知錯誤');

                        error = new RequestError(constants.ERR_CHECK_LOGIN_FAILED, message);

                    }

                    callFail(error);

                    return;

                }

                callSuccess.apply(null, arguments);

            },

            fail: callFail,