[原创] 分享我们自己搭建的微信小程序开发框架——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.