微信小程序2 - 扩展Page参数

官方默认的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);

}