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