评论

小程序页面(Page)扩展,为所有页面添加公共的生命周期、事件处理等函数

一种优雅的公共代码实现方式

背景

在小程序的原生开发中,页面中经常会用到一些公共方法,例如在页面onLoad中验证权限、所有页面都需要onShareAppMessage设置分享等

假设我们在编码时每个页面都写一遍,显然不是一个高级程序员会干的事情,太Low了。如果我们定义一个公共文件,导出这些公共方法,每个页面都引入,然后再生命周期或者事件处理函数中调用,虽然看起来很方便,但不够优雅,达不到我们最终的目的(偷懒)。

下面给大家介绍一种相对比较优雅的实现方式,扩展Page来实现以上的操作。

Page(页面) 需要传入的是一个 object 类型的参数,那么我们重载一个 Page 函数,将这个 object 参数拦截改掉就可以了,下面直接上代码。

实现

1、在根目录新建一个 page-extend.js 文件,公共的逻辑都写在这里面

/**
 *
 * Page扩展函数
 *
 * @param {*} Page 原生Page
 */
const pageExtend = Page => {
  return object => {
    // 导出原生Page传入的object参数中的生命周期函数
    // 由于命名冲突,所以将onLoad生命周期函数命名成了onLoaded
    const { onLoaded } = object

    // 公共的onLoad生命周期函数
    object.onLoad = function (options) {
      // 在onLoad中执行的代码
      ...

      // 执行onLoaded生命周期函数
      if (typeof onLoaded === 'function') {
        onLoaded.call(this, options)
      }
    }

    // 公共的onShareAppMessage事件处理函数
    object.onShareAppMessage = () => {
      return {
        title: '分享标题',
        imageUrl: '分享封面'
      }
    }
    return Page(object)
  }
}

// 获取原生Page
const originalPage = Page
// 定义一个新的Page,将原生Page传入Page扩展函数
Page = pageExtend(originalPage)

2、在 app.js 中引入 page-extend.js 文件

require('./page-extend')

App({
  // 其他代码
  ...
})

代码片段 https://developers.weixin.qq.com/s/Cyx8iGmV7Ldp

本文内容及评论未经允许,禁止任何形式的转载与复制(代码可在程序中使用)

最后一次编辑于  2019-12-24  
点赞 34
收藏
评论

11 个评论

  • 阿旺
    阿旺
    2021-01-28

    刚刚

    >>文章原代码

    const { onLoaded } = object


        // 公共的onLoad生命周期函数

        object.onLoad = function (options) {

          // 在onLoad中执行的代码

          // 执行onLoaded生命周期函数

          if (typeof onLoaded === 'function') {

            onLoaded.call(this, options)

          }

        }

    >>跳转后代码

    这一段再改成扩展onload也可以

    let originalOnLoad = object.onLoad;

    object.onLoad = function(options){

    ....//可以在之前添加自定义操作

    originalOnload.cal(this,options);//原有页面onload正常执行

    ....//可以在之后添加自定义操作

    }

    这样的操作使用了 装饰者设计模式 早在很久有过一篇文章进行了分享感觉不错(传送门:https://developers.weixin.qq.com/community/develop/article/doc/000022ca3e4d0877fb68e44ac56013


    2021-01-28
    赞同 2
    回复
  • XCXer
    XCXer
    2020-05-05

    这个对深入理解 App() 函数 和 Page() 函数有帮助

    2020-05-05
    赞同 1
    回复
  • YGBen
    YGBen
    2019-12-22

    赞,这是偷换方法啊。但为什么每次进入页面都会执行page-extend.js 呢?不太懂,大佬解释下 [smile.png]

    2019-12-22
    赞同 1
    回复 4
    • 托塔李天王先生
      托塔李天王先生
      2020-05-11
      我也不懂,请问你现在懂了吗,兄弟
      2020-05-11
      回复
    • 醉酒浓
      醉酒浓
      2020-06-15回复托塔李天王先生
      是加载的时候根目录都会加载一遍?
      2020-06-15
      回复
    • AILUG
      AILUG
      2020-08-28回复托塔李天王先生
      没有啊  就初始化执行了一次
      2020-08-28
      回复
    • Magic
      Magic
      07-03
      这就是代理模式
      07-03
      回复
  • 许
    2022-07-03

    很不错!这样在可以多个组件(生命周期里)相同的代码抽离出来;有点像react的自定义hooks

    2022-07-03
    赞同
    回复
  • 起航
    起航
    2021-04-26

    这是所有的页面都会调用吗,能不能 需要调用的时候引用?

    2021-04-26
    赞同
    回复
  • 起航
    起航
    2021-04-26

    这个一引用,所有的页面都要执行吗,能不能哪个页面想验证,在引用?

    2021-04-26
    赞同
    回复
  • AILUG
    AILUG
    2020-08-28

    那问题来了 这样写是直接把每个page的onLoad方法重载了 ,我原先放在onLoad里的代码就得全部迁移, 有没啥好办法呢

    2020-08-28
    赞同
    回复 1
    • 剑文
      剑文
      发表于移动端
      2020-11-04
      使用onLoaded来放原来onLoad内容
      2020-11-04
      回复
  • 崇墨
    崇墨
    2020-07-10

    我试了你的方法 不用修改原函数的名字也能啊 是有什么其他影响么

    2020-07-10
    赞同
    回复 2
    • 剑文
      剑文
      发表于移动端
      2020-11-04
      页面onload将不起作用
      2020-11-04
      回复
    • 那么那么强国
      那么那么强国
      2022-08-18回复剑文
      会起作用,只是混入了。先执行这里写的onload,在执行页面的onload
      2022-08-18
      回复
  • 给未来的自己
    给未来的自己
    2020-03-26

    点赞!

    2020-03-26
    赞同
    回复
  • 小肥羊🍊
    小肥羊🍊
    2019-12-06

    已点赞,学习了。

    2019-12-06
    赞同
    回复

正在加载...

登录 后发表内容