背景

在小程序的原生开发中，页面中经常会用到一些公共方法，例如在页面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

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