微信小程序2

官方默认的Page初始代码为

var option = {

/**

* 页面的初始数据

*/

data: {

},

/**

* 生命周期函数--监听页面加载

*

*/

onLoad: function (options) {

}

　//　... 其他生命周期函数,以及自定义 方法

}

Page(option);

其中: option中的函数,在运行期,this 指向 当前Page对象

 

扩展思路: 对Page页面提供的PageOption 再次包装

编码要求:

　　　　　option不再是一个独立定义的对象,而是经过方法创建

　　　　　整个创建过程,你可以认为类似 继承 , decorator包装器 等... , 创建类名称 /util/BasePageOptionClass.js

BasePageOptionClass 类中包含了微信小程序中所定义的所有生命周期函数的定义,并带有多个自定义的扩展函数

页面调用示例

let PageOption = {}

Page(app.BasePageOptionClass.initPage(PageOption));

核心函数 initPage

/**
 * 全局初始化界面函数,供页面调用
 * PageOption = {
 *  needLogin:false,  //是否需要登录
 *  loginReturnUrl: null  // 登录成功后,需要跳转回的页面,可以是function ,为空则返回默认页面
 * 
 * }
 * 
 */
BasePageOptionClass.initPage = function (PageOption ) {
    var app = getApp();
    PageOption = PageOption || {};
 
        var actualOption = new BasePageOptionClass(PageOption.data);
        actualOption.PageOption = PageOption;
        var wxFunctions = {
            "onLoad": 1, "onReady": 1, "onShow": 1, "onHide": 1, "onUnload": 1, 
      "onPullDownRefresh": 1, "onReachBottom": 1 , "onShareAppMessage": 1, "onPageScroll": 1
        };
    for (var key in PageOption) {
      if (!wxFunctions[key]) {
        const functionKey = key;
        actualOption[functionKey] = actualOption.PageOption[functionKey]
      }
    }

        for (var functionKey in wxFunctions) {
      const key = functionKey;  // 这里要一个临时常量,否则执行的时候,functionKey永远是最后一个
      if (!PageOption[key]){  //如果 参数没有,而基类有,那么保持基类不变
        if (actualOption[key]) {  //目前只有 onShareAppMessage 是底层封装好的
          continue;
        }
      }
      //否则重写基类方法
      Object.defineProperty(actualOption, key, {
        configurable: true  ,
        enumerable: true  ,
        value: function () {
          var $target = this;  //这里的 $target 可以认为是  BasePageOptionClass实例, 实际上,在运行时,已经转变为 Page对象
          try { 
            //处理通知消息
            if("onLoad"==key){  //当页面第一次打开的时候,注册 以 当前页 route 为 name的通知事件,通知内部做了 获取未处理消息的机制,如果有未处理的消息,那么立即执行
              $target.addNotifyListener($target.getCurrentPageUrl());
            } else if ("onUnload" == key) {
              //页面销毁的时候,销毁所有已注册的通知
              $target.removeNotifyListener(); 
            }
            // 嵌入了 前置处理程序,如果注册了 , 必须有 返回值 true | false , 如 before_onLoad , 参数和 原始方法保持一致,类 拦截器,暂时未支持栈,只支持一个
            var canContinueRun = BasePageOptionClass.wrapPageLifeCircle(key, $target)
            if (!canContinueRun) {
              console.log("前置处理未通过,方法 " + currUrl + "  " + key)
              return;
            } 
            //这里要使用 actualOption ,不能用 $target ,在页面带有 component 时 , 会冲突掉 PageOption
            var func = actualOption.PageOption[key];
            if (func && func!=null) {
              console.log("初始化方法 " + key + " 执行 ")
              func.apply($target, arguments);
            }
          } catch (err) {
            console.log(key + "", err);
          }
        },
        writable:  false
      }); 
        }
    // console.log(actualOption)
  return actualOption;
}



BasePageOptionClass.wrapPageLifeCircle = function (LifeCircleFuncName, PageOption={}) {
    var canContinueRun = true;
  var app = getApp();
    // console.log(LifeCircleFuncName)
  
  if (PageOption.needLogin) {  //是否需要登录 
        // console.log("执行前置")
    if ("onLoad" == LifeCircleFuncName || "onShow" == LifeCircleFuncName) {  //在onload 事件之前做 登录判断
            var xgUserInfo = app.globalData.xgUserInfo;
            if (!xgUserInfo) {
        var loginReturnUrl = "/pages/my/index/index"
                if (!PageOption.loginReturnUrl) {
            loginReturnUrl = PageOption.loginReturnUrl;
                } else { 
                    if (typeof loginReturnUrl === "function") {
            loginReturnUrl = (loginReturnUrl)();
                    } else {
            loginReturnUrl = "/pages/my/index/index"
                    }
                }
        wx.reLaunch({
          url: "/pages/my/register/index?returnUrl=" + loginReturnUrl
        });
                canContinueRun = false;
            }
        } 
    } 
  if (!canContinueRun) return canContinueRun;

  var func = "before_" + LifeCircleFuncName;
  var pf = PageOption[func];
  if (pf && pf!=null){ // 带有before_ 开头的对应的内置方法,作为前置判断 , 需要有返回值
    var ret = pf.apply(PageOption, []);
    if(ret!==undefined){
      if (!ret) canContinueRun=false;
    }
  } 
  // app.util.log("进入前置", LifeCircleFuncName)
    return canContinueRun;
}

这个方法的核心完成了2件事

1. 包装 Page中的PageOption内的生命周期函数(onLoad等), 使得 onLoad函数被作为 超类 onLoad 方法中的一个过程.

结构类似

 
BasePageOptionClass.onLoad=function(options){
       //一些逻辑
      //固定前置拦截器 逻辑
     PageOption.onLoad(options);
     
}    

BasePageOptionClass.onLoad 最终作为生命周期函数传递给Page对象

2. 增加 固定模式的前置拦截器

　　　　这里的处理较简单, 只是增加了单个 以 before_ 开头,以生命周期函数名为结尾的函数,作为拦截器,return true | false

BasePageOptionClass.onLoad=function(options){
       //一些逻辑
      //固定前置拦截器 逻辑  伪代码
    if(PageOption.before_onLoad){
       //这里就是拦截器逻辑
        var ret =    PageOption.before_onLoad(option)
         if(!ret){
                
                return;
         }
    }
     PageOption.onLoad(options);
     
}