小程序系列--Presenter简单使用

在wx小程序的开发过程中，大部分的逻辑代码都写在Page对象中（类似Activity）。如果逻辑很多的话，会导致Page.js越来越臃肿，影响代码的阅读与修改。所以，可以把Android中的MVP思想应用到Page中。

wx的Page本身用的是 VM 的思想，将数据与View绑定，通过setData() 将数据映射到UI。非常像 DataBinding,但比DataBinding简单很多且不是双向绑定。

可以新建文件夹presenter 将所有的 presenter JS文件放在这个目录下。

var url = require("../network/urlConfig.js").url;
var httpUtils = require("../network/HttpUtils.js");

function loginRequest(data, resp) {

  httpUtils.request({
    url: url.loginUrl,
    data: data,
    success: function (data) {
      httpUtils.saveHttpHeader(data.userId, data.token);
      if (resp)
        resp.success(data);
    }
  }
  );
}

function login(resp) {
  //wx登陆
  wx.login({
    success: function (res) {
      if (res.code) {
        var code = res.code;
        //wx获取用户信息
        wx.getUserInfo({
          success: function (res) {
            var userInfo = res.userInfo
            var nickName = userInfo.nickName
            var avatarUrl = userInfo.avatarUrl
            var gender = userInfo.gender //性别 0：未知、1：男、2：女
            var province = userInfo.province
            var city = userInfo.city
            var country = userInfo.country
            //注册/登陆逻辑
            loginRequest(
              { //data 对象
              code: code,
              nickName: nickName,
              avatar: avatarUrl,
              gender: gender,
              city: city,
              province: province
            }, { //response 对象
                success: function (data) {
                  if (resp) {
                    resp.success(data);
                  }
                }
              });
          },
        })
      }
    }
  })
}

//暴露方法
module.exports = {
  login
}

在Page 中直接调用

var presenter = require("../../presenter/UserPresenter.js");

Page({
  data: {

  },

  onLoad: function () {
    presenter.login({
      success: data => {
           console.log(data);
      }
    });
  },
})

详细代码参见源码

gitHub源码