如何全局重写小程序Page函数wx对象详解

网友投稿 607 2023-11-14

−目录背景方案重写Page函数重写wx对象注意事项pageProxywxProxy总结

背景

如果能够全局改写小程序的Page里的生命周期方法或wx里的函数，那么可以做很多有意思的事情。与其说是改写，不如说是代理或装饰。属于是设计模式中的代理模式或装饰器模式。

方案

重写Page函数

如何全局重写小程序Page函数wx对象详解

在app.js中调用：

?
1
Page = pageProxy(Page);

实现对Page里生命周期方法装饰。文章后面会继续聊怎么实现pageProxy。

重写wx对象

在app.js中调用：

实现对wx里函数的装饰。文章后面会继续聊怎么实现wxProxy。

注意事项

上面二者都是全局生效的。

在app.js中调用Page = pageDecorator(Page);和wx = wxDecorator(wx);时，不要带var或const或let，因为带了后就只在本页面生效。不带才是全局生效。必须在app.js中调用，或在app.js中引用相关的文件中执行上面2个语句。如果在页面的js中调用，会来不及，那时候可能存在一些页面初始化用了旧的Page对象。只能执行一次，多次执行会导致多次代理/装饰，不可取。

pageProxy

直接举个例子，比如要修改onLoad生命周期函数的行为。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function onLoadProxy(onLoad?: WechatMiniprogram.Page.ILifetime[onLoad]): WechatMiniprogram.Page.ILifetime[onLoad] {
return function newOnLoad(query) {
doSomethingWith(query); // 可访问参数query，做一些事情，比如上报
if (onLoad) { // 如果开发者在Page中定义了onLoad，我们需要调用一下开发者定义的onLoad
return onLoad.call(this, query); // 注意这里必须用call(this)。这里也可以把query换成个新对象，达到修改参数的目的。（不建议直接修改query，因为会把传入的数据给改掉，而业务开发者不知情）
}
};
}
function pageProxy(Page: WechatMiniprogram.Page.Constructor): WechatMiniprogram.Page.Constructor {
return function newPage(options) {
const newOptions = { ...options };
newOptions.onLoad = onLoadProxy(options.onLoad);
Page(newOptions);
};
}

关键点：重写方法时，务必使用call(this)保持this引用，否则会导致业务开发者写onLoad的函数体时，无法访问到符合预期的this。

wxProxy

举个例子，比如要修改wx.navigateTo导航函数的行为。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function navigateToProxy(navigateTo: WechatMiniprogram.Wx[navigateTo]): WechatMiniprogram.Wx[navigateTo] {
return function newNavigateTo(object) {
doSomethingWith(object); // 可访问参数object，做一些事情，比如上报
// 这里可以直接把参数换个新对象，达到修改参数的目的
// 注意下面是浅拷贝，不建议直接修改原始options，因为会把传入的数据给改掉，而业务开发者不知情
return navigateTo({
...object,
});
};
}
function wxProxy(wx: WechatMiniprogram.Wx): WechatMiniprogram.Wx {
const newWx = { ...wx };
newWx.navigateTo = navigateToProxy(wx.navigateTo);
return newWx;
}

总结

到此这篇关于如何全局重写小程序Page函数wx对象的文章就介绍到这了,更多相关重写小程序

您可能感兴趣的文章:微信小程序 Page（）函数详解

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 小程序 微信小程序 js 参数
上一篇:学会使用这个app制作工具，不用再花钱找app开发公司了！
下一篇:自己开发app和找app开发公司开发的优势劣势分析！
相关文章

 发表评论

暂时没有评论，来抢沙发吧~