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

 更新时间:2022年08月23日 10:24:01   作者:HullQin  
这篇文章主要给大家介绍了关于如何全局重写小程序Page函数wx对象的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用小程序具有一定的参考学习价值,需要的朋友可以参考下

背景

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

方案

重写Page函数

app.js中调用:

Page = pageProxy(Page);

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

重写wx对象

app.js中调用:

wx = wxProxy(wx);
复制代码

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

注意事项

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

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

pageProxy

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

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导航函数的行为。

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对象的文章就介绍到这了,更多相关重写小程序wx对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • 使用post方法实现json往返传输数据的方法

    使用post方法实现json往返传输数据的方法

    今天小编就为大家分享一篇关于使用post方法实现json往返传输数据的方法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-03-03
  • JavaScript实现微信飞机大战游戏

    JavaScript实现微信飞机大战游戏

    这篇文章主要为大家详细介绍了JavaScript实现微信飞机大战游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 解析JavaScript数组方法reduce

    解析JavaScript数组方法reduce

    本文主要介绍了JavaScript数组方法reduce的概述、语法、参数、工作原理等,由浅入深,便于理解。需要的朋友可以看下
    2016-12-12
  • js表单序列化判断空值的实例

    js表单序列化判断空值的实例

    下面小编就为大家带来一篇js表单序列化判断空值的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)

    layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)

    今天小编大家分享一篇layui监听下拉选框选中值变化的方法(包含监听普通下拉选框),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • TypeScript类型断言VS类型守卫示例详解

    TypeScript类型断言VS类型守卫示例详解

    这篇文章主要为大家介绍了TypeScript类型断言VS类型守卫示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • JavaScript中的回调函数实例讲解

    JavaScript中的回调函数实例讲解

    今天小编就为大家分享一篇关于JavaScript中的回调函数实例讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • JavaScript中常见的几种获取元素的方式

    JavaScript中常见的几种获取元素的方式

    这篇文章主要介绍了JavaScript中常见的几种获取元素的方式,需要的朋友可以参考下
    2023-05-05
  • JS实现的二叉树算法完整实例

    JS实现的二叉树算法完整实例

    这篇文章主要介绍了JS实现的二叉树算法,结合完整实例形式分析了基于JS定义、创建二叉树及常用的各种遍历、访问二叉树操作技巧,需要的朋友可以参考下
    2017-04-04
  • JS中产生标识符方式的演变

    JS中产生标识符方式的演变

    本文记录下JS中产生标识符方式的演变,从ES5到ES6,ES5及其之前是一种方式,只包含两种声明(var/function),ES6则增加了一些产生标识符的关键字,如 let、const、class。
    2015-06-06

最新评论