背景
在小程序的原生开发中,页面中经常会用到一些公共方法,例如在页面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({
// 其他代码
...
})
本文内容及评论未经允许,禁止任何形式的转载与复制(代码可在程序中使用)
刚刚
>>文章原代码
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
这个对深入理解 App() 函数 和 Page() 函数有帮助
赞,这是偷换方法啊。但为什么每次进入页面都会执行page-extend.js 呢?不太懂,大佬解释下 [smile.png]
很不错!这样在可以多个组件(生命周期里)相同的代码抽离出来;有点像react的自定义hooks
这是所有的页面都会调用吗,能不能 需要调用的时候引用?
这个一引用,所有的页面都要执行吗,能不能哪个页面想验证,在引用?
那问题来了 这样写是直接把每个page的onLoad方法重载了 ,我原先放在onLoad里的代码就得全部迁移, 有没啥好办法呢
我试了你的方法 不用修改原函数的名字也能啊 是有什么其他影响么
点赞!
已点赞,学习了。