小程序页面（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
本文内容及评论未经允许，禁止任何形式的转载与复制（代码可在程序中使用）
