[原創] 分享我們自己搭建的微信小程序開發框架——wframe及設計思想詳解

 

wframe不是控件庫，也不是UI庫，她是一個微信小程序面向對象編程框架，代碼只有幾百行。她的主要功能是規范小程序項目的文件結構、規范應用程序初始化、規范頁面加載及授權管理的框架，當然，wframe也提供了一些封裝好了的函數庫，方便開發者調用。

 

wframe目前已實現的核心功能：

1. 應用程序初始化自動從服務器獲取配置，ajax成功后觸發ready事件；

2. 每個頁面對象可以配置是否requireLogin屬性，如果需要登錄，則每個頁面在進入ready方法之前會自動完成授權、獲取用戶信息、服務器端登錄；

3. 完成ajax全局封裝：如果用戶已經登錄，則會自動在http-header添加token信息，如果session過期則會重新進入登錄流程；

 

本文的閱讀對象：想要自己搭建小程序框架的人，相信本文會給你提供一些思路。

 

我們為什么要開發wframe？

 

我們開發的小程序越來越多，小程序也越來越復雜，於是我們就想將每個小程序重復在寫的那一部分代碼提出來，變成一個公共的函數庫，一個跟每個項目的業務邏輯完全不相關的函數庫。除了在新項目中可以節省代碼之外，有一些復雜的代碼邏輯由於提到了公共的函數庫，我們將其優化得更優雅、更健壯。

 

說wframe是一個函數庫雖說也可以，但wframe更像一個框架。我們通常把一些靜態方法、靜態對象、僅處理頁面內容的JS文件集稱作函數庫，比如jQuery；我們通常把處理了應用程序和頁面生命周期，以及使用了大量的面向對象編程技術的JS文件集稱作框架。因此，wframe其實是一個框架。

 

重要說明：wframe框架用到了大量的面向對象編程知識，比如實例、繼承、覆寫、擴展、抽象方法等等，因此對開發人員，特別是項目中的架構師，的面向對象編程能力有較高要求。

 

項目源碼已上傳到GitHub並會持續更新：https://github.com/leotsai/wframe

 

一、wframe項目結構

wframe的最核心的職責就是規范項目文件結構。

 

為什么需要規范呢？因為我們小程序越來越多，如果每個小程序的文件結構都不一樣的話，那定是一件很難受的事。另外，wframe由於其框架的身份，其本職工作就是定義一個最好的文件結構，這樣基於wframe創建的所有小程序都將自動繼承wframe的優秀品質。

 

1. _core文件夾

wframe框架源碼，與業務毫不相干，每個小程序都可以直接將_core文件夾復制到項目中，而當wframe更新版本時，所有小程序可以直接覆蓋_core完成升級。用下划線“_”開頭的目的有2個：

(a) 將此文件夾置頂；

(b) 標記此文件夾是一個特殊文件夾，本框架中還有其他地方也會用到下划線開頭為文件夾/文件。

 

2. _demo文件夾

業務核心文件夾，比如定義一些擴展wframe框架的類，同時這些類又被具體的業務類繼承使用，比如ViewModelBase等。

 

3. pages文件夾

與微信小程序官方文檔定義一致：放置頁面的地方。

 

4. app.js

程序主入口，只不過基於wframe的小程序的app.js跟官方的長得很不一樣，我們定義了一個自己的Applicaiton類，然后再new的一個Application實例。稍后詳解。

 

5. mvcApp.js

幾乎每個js文件都會require引入的一個文件，因為這相當於是項目的靜態入口，其包含了所有的靜態函數庫，比如對wx下面方法的封裝、Array類擴展、Date類擴展、網絡請求（ajax）封裝等等。mvcApp.js幾乎只定義了一個入口，其內部的很多對象、方法都是通過require其他JS引入的。因此，大多數情況下，我們只需要require引入mvcApp.js就夠了。

 

寫到這里，分享一個我們的編程思想：入口要少。小程序里有哪些入口：this、getApp()、wx、mvcApp。其實也就是每一行代碼點號“.”前面的都叫代碼入口。

 

我們還有另一個編程規范（強制）：每個文件不能超過200行代碼（最好不超100行）。這就是要求每個程序員必須學會拆分，拆分也是我們的另一個編程思想。通過拆分，每個JS文件職責清晰，極大的提高了代碼閱讀率。

 

二、詳解

1. app.js和Application類詳解

app.js定義了程序入口。

var mvcApp = require('mvcApp.js');
var Application = require('_core/Application.js');

function MvcApplication() {
    Application.call(this);
    this.initUrl = 'https://www.somdomain.com/api/client-config/get?key=wx_applet_wframe';
    this.host = 'http://localhost:18007';
    this.confgis = {
        host: 'http://localhost:18007',
        cdn: 'https://images.local-dev.cdn.somedomain.com'
    };
    this.mock = true;
    this.accessToken = null;
    this.useDefaultConfigsOnInitFailed = false;
};

MvcApplication.prototype = new Application();

MvcApplication.prototype.onInitialized = function (configs) {
    if (configs != null && configs !== '') {
        this.configs = JSON.parse(configs);
        this.host = this.configs.host;
    }
};

App(new MvcApplication());

 

 可以看到app.js定義了一個MvcApplication類，繼承自框架中的Application類，同時重寫了父類的onInitialized方法。

 

下面是框架中的Application類：

var WebClient = require('http/WebClient.js');
var AuthorizeManager = require('weixin/AuthorizeManager.js');
var weixin = require('weixin.js');


function Application() {
    this.initUrl = '';
    this.host = '';
    this.session = null;
    this.initialized = false;
    this.mock = false;
    this.useDefaultConfigsOnInitFailed = false;
    this.authorizeManager = new AuthorizeManager();
    this._userInfo = null;
    this._readyHandlers = [];
};

Application.prototype = {
    onLaunch: function () {
        var me = this;
        if(this.initUrl === ''){
            throw 'please create YourOwnApplication class in app.js that inerits from Application class and provide initUrl in constructor';
        }
        var client = new WebClient();
        client.post(this.initUrl, null, function(result){
            if (result.success || me.useDefaultConfigsOnInitFailed){
                me.initialized = true;
                me.onInitialized(result.success ? result.value : null);
                me.triggerReady();
            }
            else{
                weixin.alert('小程序初始化失敗', result.message);
            }
        }, '初始化中...');
    },
    onShow: function () {

    },
    onHide: function () {

    },
    onError: function () {

    },
    onPageNotFound: function () {

    },
    ready: function (callback) {
        var me = this;
        if (this.initialized === true) {
            callback && callback();
            return;
        }
        this._readyHandlers.push(callback);
    },
    triggerReady: function () {
        for (var i = 0; i < this._readyHandlers.length; i++) {
            var callback = this._readyHandlers[i];
            callback && callback();
        }
        this._readyHandlers = [];
    },
    onInitialized: function(configs){

    },
    getUserInfo: function(callback){
        var me = this;
        if(this._userInfo != null){
            callback && callback(this._userInfo.userInfo);
            return;
        }
        this.authorizeManager.getUserInfo(function(result){
            me._userInfo = result;
            callback && callback(me._userInfo.userInfo);
        });
    },
    getCurrentPage: function(){
        var pages = getCurrentPages();
        return pages.length > 0 ? pages[0] : null;
    }
};

module.exports = Application;

 

Applicaiton類（及其子類）在wframe框架中的主要工作：

1. 應用程序初始化的時候從服務器獲取一個配置，比如服務器域名（實現域名實時切換）、CDN域名，以及其他程序配置信息；

2. 全局存儲用戶的授權信息和登陸之后的會話信息；

3. 全局mock開關；

4. 其他快捷方法，比如獲取當前頁面等。

 

Application類核心執行流程：

1. 應用程序初始化時首先從服務器獲取客戶端配置信息；

2. 獲取完成之后會觸發onInitialized方法（在子類中覆寫）和ready方法。

 

2. PageBase類詳解

PageBase類是所有頁面都會繼承的一個基類。先看代碼：

console.log("PageBae.js entered");

const app = getApp();

function PageBase(title) {
    this.vm = null;
    this.title = title;
    this.requireLogin = true;
};

PageBase.prototype = {
    onLoad: function (options) {
        var me = this;
        if (this.title != null) {
            this.setTitle(this.title);
        }
        this.onPreload(options);
        app.ready(function () {
            if (me.requireLogin && app.session == null) {
                app.getUserInfo(function (info) {
                    me.login(info, function (session) {
                        app.session = session;
                        me.ready(options);
                    });
                });
            }
            else {
                me.ready(options);
            }
        });
    },
    ready: function (options) {

    },
    onPreload: function(options){

    },
    render: function () {
        var data = {};
        for (var p in this.vm) {
            var value = this.vm[p];
            if (!this.vm.hasOwnProperty(p)) {
                continue;
            }
            if (value == null || typeof (value) === 'function') {
                continue;
            }
            if (value.__route__ != null) {
                continue;
            }
            data[p] = this.vm[p];
        }
        this.setData(data);
    },
    go: function (url, addToHistory) {
        if (addToHistory === false) {
            wx.redirectTo({ url: url });
        }
        else {
            wx.navigateTo({ url: url });
        }
    },
    goBack: function () {
        wx.navigateBack({});
    },
    setTitle: function (title) {
        this.title = title;
        wx.setNavigationBarTitle({ title: this.title });
    },
    login: function (userInfo, callback) {
        throw 'please implement PageBase.login method.';
    },
    getFullUrl: function () {
        var url = this.route.indexOf('/') === 0 ? this.route : '/' + this.route;
        var parts = [];
        for (var p in this.options) {
            if (this.options.hasOwnProperty(p)) {
                parts.push(p + "=" + this.options[p]);
            }
        }
        if (parts.length > 0) {
            url += "?" + parts.join('&');
        }
        return url;
    },
    isCurrentPage: function(){
        return this === getApp().getCurrentPage();
    }
};

PageBase.extend = function (prototypeObject) {
    var fn = new PageBase();
    for (var p in prototypeObject) {
        fn[p] = prototypeObject[p];
    }
    return fn;
};

module.exports = PageBase;

 

 由於微信小程序Application類的onLaunch不支持回調，也就是說，在wframe框架中，雖然我們在onLaunch時發起了ajax調用，但是程序並不會等待ajax返回就會立即進入Page對象的onLoad方法。這是一個非常重要的開發小程序的知識前提，但是官方文檔並沒有重要說明。

 

PageBase類的三個實例屬性：

1. vm：即ViewModel實例，可以理解為官方文檔中的Page實例的data屬性；

2. title：頁面標題

3. requireLogin：是否需要登錄，如果設置為true，則頁面onLoad執行后自動進入登錄流程，登錄完成后才會觸發頁面的ready方法；

 

PageBase類的實例方法：

1. onLoad：對應官方文檔中的onLoad事件。wframe框架自動會處理requireLogin屬性，處理完成后才觸發ready方法；

2. ready：每個業務級頁面的主入口，每個業務級頁面都應該實現ready方法，而不一定實現onLoad方法；

3. onPreload：在執行onLoad之前執行的方法，不支持異步；

4. render：非常常用的方法，功能是將ViewModel（即data）呈現到頁面上，在業務頁面中直接使用this.render()即可將更新的數據呈現出來；

5. go：頁面跳轉，相比官方的wx.navigateTo簡化了很多；

6. goBack：等於wx.navigateBack；

7. setTitle：直接設置頁面標題；

8. login：可以理解成抽象方法，必須由子類實現，在我們demo中由業務級框架中的DemoPageBase實現；

9. getFullUrl：獲取頁面完整地址，包括路徑和參數，便於直接跳轉；

10. isCurrentPage：判斷該頁面實例是否在應用程序頁面棧中處於當前頁面，主要用於setInterval函數中判斷用戶是否已離開了頁面；

 

 3. DemoPageBase類詳解

 這是業務層級的框架內容。我們建議每個頁面都繼承自該類，這個類可以封裝跟業務相關的很多邏輯，方便子類（業務頁面）直接通過this調用相關方法。

 

在wframe的demo框架中，我們實現了PageBase類的抽象方法login。

 

這里請注意同目錄的api.js文件。在我們的編碼規范中，所有ajax訪問都需要提到專門的api.js文件，通常與頁面類處於同一目錄，這是為了方便mock API。請看示例代碼：

var mvcApp = require('../mvcApp.js');

var api = {
    login: function (userInfo, code, callback) {
        var data = mvcApp.serializeToKeyValues(userInfo) + "&code=" + code;
        mvcApp.ajax.busyPost('/demo/api/login', data, function(result){
            callback(result.value);
        }, '登陸中...', true);
    }
};
if (getApp().mock) {
    var api = {
        login: function (userInfo, code, callback) {
            setTimeout(function(){
                callback({
                    token: '98c2f1bd7beb3bef3b796a5ebf32940498cb5586ddb4a5aa8e'
                });
            }, 2000);
        }
    };
}

module.exports = api;

 

 4. 頁面類的實現

 請看pages/index目錄下的文件列表：

1. IndexViewModel：該頁面的ViewModel；

2. api.js：該頁面所有ajax的封裝；

3. index.js：頁面入口；

4. index.wxml：HTML；

5. index.wxss：樣式；

 

先看入口index.js，代碼如下：

var mvcApp = require('../../mvcApp.js');
var DemoPageBase = require('../DemoPageBase.js');
var IndexViewModel = require('IndexViewModel.js');

function IndexPage() {
    DemoPageBase.call(this, 'index');
};

IndexPage.prototype = new DemoPageBase();

IndexPage.prototype.onPreload = function(options){
    this.vm = new IndexViewModel(this);
    this.render();
};

IndexPage.prototype.ready = function () {
    var me = this;
    this.vm.load();
};

IndexPage.prototype.goDetails = function (e) {
    var item = e.target.dataset.item;
    wx.navigateTo({
        url: '/pages/details/details?id=' + item.id
    });
};

Page(new IndexPage());

 

index.js核心邏輯：繼承自DemoPageBase，onPreload時設置了ViewModel，ready時（自動登錄完成后）調用ViewModel的數據加載方法，完成。

 

5. ViewModel的實現

在微信小程序官方文檔中，並沒有提ViewModel的概念，這會導致一些稍微有點復雜的頁面的data對象的處理變得很凌亂，更別說復雜頁面的data處理，那根本無從維護。ViewModel的設計思想是專門用來封裝視圖數據的一層代碼，不管是MVC，還是MVVM，ViewModel都是拆分數據層代碼的最佳實踐。因此，wframe框架強烈建議每個頁面都建一個對應的ViewModel，封裝數據結構，以及獲取、處理數據。

 

在我們的編程思想中，ViewModel不僅僅是放數據的地方，更是封裝業務邏輯的最佳位置之一。所以我們的ViewModel會很肥（fat model），會包含相關的很多業務邏輯處理。

 

如果項目需要，還可以封裝一個DemoViewModelBase類，將其他頁面ViewModel常用的方法封裝進來，比如this.getUserName()等方法。

 

請看示例代碼：

var api = require('api.js');
var mvcApp = require('../../mvcApp.js');

function IndexViewModel(page){
    this.users = [];
    this.showLoading = true;
    this.males = 0;
    this.females = 0;
    this.page = page;
};

IndexViewModel.prototype.load = function(){
    var me = this;
    api.getUsers(function(users){
        me.showLoading = false;
        me.females = users._count(function(x){
            return x.gender === 'female';
        });
        me.males = users._count(function (x) {
            return x.gender === 'male';
        });
        me.users = users._orderByDescending(null, function(first, second){
            if(first.gender === 'male'){
                if(second.gender === 'male'){
                    return first.birthYear > second.birthYear;
                }
                return true;
            }
            if(second.gender === 'female'){
                return first.birthYear > second.birthYear;
            }
            return false;
        });
        me.page.render();
    });
};

module.exports = IndexViewModel;

 

api.js就不貼代碼了，跟上一小節中的api.js一樣的。html和css部分也忽略不講。

 

至此，頁面級實現就完成了。

 

下面，筆者再對wframe框架中的其他特殊部分進行特殊說明。繼續。

 

6. pages/_authorize文件夾

這個文件夾定義了一個授權頁面，這是因為新版小程序API強制要求用戶自己點授權按鈕才能彈出授權。這個雖然集成在wframe框架中，但是每個項目應該自行修改此頁面的樣式以符合項目UI設計。

 

這個目錄下面只有一個_authorize.js值得貼一下代碼，其實都非常簡單：

var DemoPageBase = require('../DemoPageBase.js');


function AuthPage() {
    DemoPageBase.call(this, 'auth');
    this.requireLogin = false;
};

AuthPage.prototype = new DemoPageBase();

AuthPage.prototype.onPreload = function (options) {
    this.returnUrl = decodeURIComponent(options.returnUrl);
};

AuthPage.prototype.onGotUserInfo = function (event) {
    var me = this;
    if (event.detail.userInfo == null) {
        return;
    }
    var app = getApp();
    app._userInfo = event.detail;
    DemoPageBase.prototype.login.call(this, app._userInfo.userInfo, function () {
        me.go(me.returnUrl, false);
    })
}

Page(new AuthPage())

 

請注意onPreload方法中對returnUrl的獲取，以及獲取用戶授權信息后對DemoPageBase.login方法的調用。

 

 7. _core文件夾其他文件詳解

 _core文件夾之前已經講了Application和PageBase類。繼續。

 

1. weixin.js

主要封裝了toast、busy（增加延時功能）、alert、confirm方法，后期可能會增加更多常用方法的封裝。代碼如下：

var weixin = {
    _busyTimer: null,
    _busyDelay: 1500,
    toast: function (message, icon) {
        wx.showToast({
            title: message,
            icon: icon == null || icon == '' ? 'none' : icon
        });
    },
    toastSuccess: function (message) {
        this.toast(message, 'success');
    },
    busy: function (option, delay) {
        clearTimeout(this._busyTimer);
        if (option === false) {
            wx.hideLoading();
            return;
        }
        if (delay === 0) {
            wx.showLoading({
                title: option,
                mask: true
            });
        }
        else {
            this._busyTimer = setTimeout(function () {
                wx.showLoading({
                    title: option,
                    mask: true
                });
            }, delay == null ? this._busyDelay : delay);
        }
    },
    alert: function (title, content, callback) {
        content = content == undefined ? '' : content;
        wx.showModal({
            title: title,
            content: content,
            showCancel: false,
            confirmText: "確定",
            success: res => {
                callback && callback();
            }
        });
    },
    confirm: function (title, content, buttons) {
        var buttonList = [];
        for (var p in buttons) {
            if (buttons.hasOwnProperty(p)) {
                buttonList.push({
                    text: p,
                    handler: buttons[p]
                })
            }
        }
        content = content == undefined ? '' : content;
        wx.showModal({
            title: title,
            content: content,
            showCancel: true,
            cancelText: buttonList[0].text,
            confirmText: buttonList[1].text,
            success: res => {
                if (res.confirm) {
                    buttonList[1].handler && buttonList[1].handler();
                } else if (res.cancel) {
                    buttonList[0].handler && buttonList[0].handler();
                }
            }
        });
    }
};

module.exports = weixin;

 

2. extensions/ArrayExtensions.js

一大堆數組擴展方法，非常常用，非常好用。引入mvcApp的業務層代碼均可直接使用。代碼如下：

var ArrayExtensions = {};

Array.prototype._each = function (func) {
    for (var i = 0; i < this.length; i++) {
        var item = this[i];
        var result = func(i, item);
        if (result === false) {
            return;
        }
    }
};

Array.prototype._sum = function (propertyOrFunc) {
    var total = 0;
    var isFunc = typeof (propertyOrFunc) == "function";
    this._each(function (i, item) {
        if (isFunc) {
            total += propertyOrFunc(item);
        } else {
            var value = item[propertyOrFunc];
            if (value != undefined) {
                value = value * 1;
                if (!isNaN(value)) {
                    total += value;
                }
            }
        }
    });
    return total;
};

Array.prototype._where = function (predicateFunction) {
    var results = new Array();
    this._each(function (i, item) {
        if (predicateFunction(item)) {
            results.push(item);
        }
    });
    return results;
};

Array.prototype._orderBy = function (property, isFirstGreaterThanSecondFunction) {
    var items = this;
    for (var i = 0; i < items.length - 1; i++) {
        for (var j = 0; j < items.length - 1 - i; j++) {
            if (isFirstGreaterThanSecond(items[j], items[j + 1])) {
                var temp = items[j + 1];
                items[j + 1] = items[j];
                items[j] = temp;
            }
        }
    }
    function isFirstGreaterThanSecond(first, second) {
        if (isFirstGreaterThanSecondFunction != undefined) {
            return isFirstGreaterThanSecondFunction(first, second);
        }
        else if (property == undefined || property == null) {
            return first > second;
        }
        else {
            return first[property] > second[property];
        }
    }

    return items;
};

Array.prototype._orderByDescending = function (property, isFirstGreaterThanSecondFunction) {
    var items = this;
    for (var i = 0; i < items.length - 1; i++) {
        for (var j = 0; j < items.length - 1 - i; j++) {
            if (!isFirstGreaterThanSecond(items[j], items[j + 1])) {
                var temp = items[j + 1];
                items[j + 1] = items[j];
                items[j] = temp;
            }
        }
    }
    function isFirstGreaterThanSecond(first, second) {
        if (isFirstGreaterThanSecondFunction != undefined) {
            return isFirstGreaterThanSecondFunction(first, second);
        }
        else if (property == undefined || property == null) {
            return first > second;
        }
        else {
            return first[property] > second[property];
        }
    }

    return items;
};

Array.prototype._groupBy = function (property) {
    var results = [];
    var items = this;

    var keys = {}, index = 0;
    for (var i = 0; i < items.length; i++) {
        var selector;
        if (typeof property === "string") {
            selector = items[i][property];
        } else {
            selector = property(items[i]);
        }
        if (keys[selector] === undefined) {
            keys[selector] = index++;
            results.push({ key: selector, value: [items[i]] });
        } else {
            results[keys[selector]].value.push(items[i]);
        }
    }
    return results;
};

Array.prototype._skip = function (count) {
    var items = new Array();
    for (var i = count; i < this.length; i++) {
        items.push(this[i]);
    }
    return items;
};

Array.prototype._take = function (count) {
    var items = new Array();
    for (var i = 0; i < this.length && i < count; i++) {
        items.push(this[i]);
    }
    return items;
};

Array.prototype._firstOrDefault = function (predicateFunction) {
    if (this.length == 0) {
        return null;
    }
    if (predicateFunction == undefined) {
        return this[0];
    }
    var foundItem = null;
    this._each(function (i, item) {
        if (predicateFunction(item)) {
            foundItem = item;
            return false;
        }
        return true;
    });
    return foundItem;
};

Array.prototype._any = function (predicateFunction) {
    if (predicateFunction == undefined) {
        return this.length > 0;
    }
    var hasAny = false;
    this._each(function (i, item) {
        if (predicateFunction(item)) {
            hasAny = true;
            return false;
        }
        return true;
    });
    return hasAny;
};

Array.prototype._select = function (newObjectFunction) {
    if (newObjectFunction == undefined) {
        throw "parameter newObjectFunction cannot be null or undefined";
    }
    var items = [];
    this._each(function (i, item) {
        items.push(newObjectFunction(item));
    });
    return items;
};

Array.prototype._insert = function (index, item) {
    this.splice(index, 0, item);
};

Array.prototype._insertMany = function (index, items) {
    if (items == null) {
        return;
    }
    for (var i = 0; i < items.length; i++) {
        this._insert(index + i, items[i]);
    }
};

Array.prototype._add = function (item) {
    this.push(item);
};

Array.prototype._addMany = function (items) {
    if (items == null) {
        return;
    }
    for (var i = 0; i < items.length; i++) {
        this.push(items[i]);
    }
};

Array.prototype._clear = function () {
    this.splice(0, this.length);
};

Array.prototype._count = function (predicateFunction) {
    var count = 0;
    this._each(function (i, item) {
        if (predicateFunction(item)) {
            count++;
        }
    });
    return count;
};


/************************************** */
module.exports = ArrayExtensions;

 

3. http/WebClient.js

封裝網絡請求，我們叫ajax。增加busy、header、自動異常處理等邏輯。非常常用，非常好用。代碼如下：

var weixin = require('../weixin.js');

function WebClient() {
    this.busyText = null;
    this.busyDelay = 1500;
    this.url = '';
    this.data = null;
    this.method = 'GET';
    this.contentType = 'application/x-www-form-urlencoded';
    this.dataType = 'json';
    this.onlyCallbackOnSuccess = false;
    this._request = null;
    this._callback = null;
    this._header = {};
};

WebClient.prototype = {
    setHeader: function(key, value){
        this._header[key] = value;
    },
    removeHeader: function(key){
        delete this.header[key];
    },
    get: function (url, callback, busyText, onlyCallbackOnSuccess){
        this.method = 'GET';
        this.url = url;
        this.data = null;
        this._callback = callback; 
        this.busyText = busyText;
        this.onlyCallbackOnSuccess = onlyCallbackOnSuccess == null ? false : onlyCallbackOnSuccess;
        this.execute();
    },
    post: function (url, data, callback, busyText, onlyCallbackOnSuccess) {
        this.method = 'POST';
        this.url = url;
        this.data = data;
        this._callback = callback;
        this.busyText = busyText;
        this.onlyCallbackOnSuccess = onlyCallbackOnSuccess == null ? false : onlyCallbackOnSuccess;
        this.execute();
    },
    execute: function () {
        var me = this;
        if (this.busyText != null && this.busyText !== '') {
            weixin.busy(me.busyText, me.busyDelay);
        }
        this._request = wx.request({
            url: me.url,
            data: me.data,
            method: me.method,
            header: me._getRequestHeader(),
            success: (response) => {
                if (me.busyText != null) {
                    weixin.busy(false);
                }
                me._onResponse(response);
            },
            fail: res => {
                if (me.busyText != null) {
                    weixin.busy(false);
                }
                me._handleError({ statusCode: 500 });
            }
        });
    },
    _getRequestHeader: function(){
        var header = {};
        if(this.contentType != null && this.contentType !== ''){
            header['content-type'] = this.contentType;
        }
        for(var p in this._header){
            if(this._header.hasOwnProperty(p)){
                header[p] = this._header[p];
            }
        }
        return header;
    },
    _onResponse: function (response) {
        if (response.statusCode === 200) {
            if (this.onlyCallbackOnSuccess === false) {
                this._callback && this._callback(response.data);
            } else {
                if (response.data.success === true) {
                    this._callback && this._callback(response.data);
                } else {
                    weixin.alert("提示", response.data.message);
                }
            }
        }
        else {
            this._handleError(response);
        }
    },
    _handleError: function (response) {
        if (response.statusCode === 0 && err.statusText === "abort") {
            return;
        }
        if (this.onlyCallbackOnSuccess) {
            weixin.alert("網絡錯誤", "錯誤碼：" + response.statusCode);
        } else {
            this._callback && this._callback({
                success: false,
                message: "網絡錯誤：" + response.statusCode,
                code: response.statusCode
            });
        }
    }
};

module.exports = WebClient;

 

4. weixin/AuthorizeManager.js

wframe框架自帶的授權管理器，在Application初始化時已賦值到Application.authorizeManager實例屬性上面，因此，如果想要自定義實現AuthorizeManager，那么可以繼承框架中的默認AuthorizeManager，然后再重寫部分方法，然后在初始化Applicaiton的時候注入不同的實現類即可。

 

這個類的實例已經添加到Application實例，所以可以通過 getApp().authorizeManager.authorize('your-scope-name', callback)  彈出授權。

 

var weixin = require('../weixin.js');



function AuthorizeManager() {
    this.pageUrl = '/pages/_authorize/_authorize';
};

AuthorizeManager.scopes = {
    userInfo: 'scope.userInfo'
};

AuthorizeManager.prototype = {
    authorize: function (scope, callback) {
        var me = this;
        me._isAuthorized(scope, function (authorized) {
            if (authorized) {
                callback();
            }
            else {
                me._showAuthorize(scope, callback);
            }
        });
    },
    getUserInfo: function (callback) {
        var me = this;
        var scope = AuthorizeManager.scopes.userInfo;
        function handleAuthorized() {
            wx.getUserInfo({
                success: function (res) {
                    callback && callback(res);
                },
                fail: function (res) {
                    var url = getApp().getCurrentPage().getFullUrl();
                    wx.redirectTo({
                        url: me.pageUrl + "?returnUrl=" + encodeURIComponent(url)
                    });
                }
            })
        };
        me.authorize(scope, handleAuthorized);
    },
    _isAuthorized: function (scope, callback) {
        wx.getSetting({
            success: function (res) {
                callback(res.authSetting[scope] === true);
            }
        });
    },
    _showAuthorize: function (scope, callback) {
        var me = this;
        wx.authorize({
            scope: scope,
            success: function () {
                callback();
            },
            fail: function (res) {
                if (scope === AuthorizeManager.scopes.userInfo) {
                    callback();
                }
                else {
                    me._openAuthorizeSetting(scope, callback);
                }
            }
        })
    },
    _openAuthorizeSetting: function (scope, calback) {
        var me = this;
        weixin.alert('提示', '您需要授權才能繼續操作', function () {
            wx.openSetting({
                success: function (res) {
                    if (!res.authSetting[scope]) {
                        me._openAuthorizeSetting(scope, callback);
                    } else {
                        callback && callback();
                    }
                }
            })
        });
    }
};

module.exports = AuthorizeManager;

 

 三、結語

 wframe會持續更新，我們會持續將項目中的最佳實踐、框架優化等添加進來。

 

使用wframe框架開發小程序，那才能真正的體會JS面向對象的編程體驗，這種體驗是相當的美妙。希望小程序官方可以盡早引入wframe的設計思想，讓小程序開發體驗變成完完全全的面向對象開發體驗。

 

THE END.