评论

小程序页面(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  
点赞 18
收藏
评论

3 个评论

  • YGBen
    YGBen
    2019-12-22

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

    2019-12-22
    赞同
    回复
  • 小肥羊
    小肥羊
    2019-12-06

    已点赞,学习了。

    2019-12-06
    赞同
    回复
  • 子不语
    子不语
    2019-12-06

    点赞!

    2019-12-06
    赞同
    回复
登录 后发表内容