背景 在小程序的原生开发中，页面中经常会用到一些公共方法，例如在页面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 本文内容及评论未经允许，禁止任何形式的转载与复制（代码可在程序中使用）

onload-more.js的内容如下 /* * 分页加载数据 */ const onloadMore = Behavior({ // 组件加载 attached() { if (thisdata.autoOnload) { // 开启自动加载数据let pages = getCurrentPages()let page = pages[pages.length - ] this.onShow() if (thisdata.onShowRefresh) { // 每次onShow都刷新数据// 拦截当前页面的onShow事件let oldOnShow = page.onShow page.onShow = () => { if (this.isActive()) { this.onShow() } if (oldOnShow) { oldOnShow() } } } // 拦截当前页面的上拉触底事件let oldOnReachBottom = page.onReachBottom page.onReachBottom = () => { if (this.isActive()) { this.onReachBottom() } if (oldOnReachBottom) { oldOnReachBottom() } } if (thisdata.isPullDownRefresh) { // 拦截当前页面的下拉刷新事件//需要设置 "enablePullDownRefresh": true,let oldOnPullDownRefresh = page.onPullDownRefresh page.onPullDownRefresh = () => { if (this.isActive()) { this.onPullDownRefresh() } if (oldOnPullDownRefresh) { oldOnPullDownRefresh() } } } } }, // 组件移除 detached() { // 组件移除后不再加载数据this.setData({ isInit: false }) }, observers: { 'params': function () { // 参数变化时初始化列表this.initList() } }, data: { autoOnload: true, // 是否自动加载数据,自动加载数据通过拦截页面的事件和生命周期实现 onShowRefresh: true, // 是否每次进入页面都刷新数据，当autoOnload为true时可用 isPullDownRefresh: true, // 是否开启下拉刷新 api: '', // 请求接口地址 isLoading: false, // 是否加载中 isEnd: false, // 数据是否已加载完毕 list: [], // 加载到的数据列表 page: { pageNum: , // 当前第几页 pageSize: 10// 每页多少条 }, params: {}, // 请求额外参数 isInit: false// 列表数据是否已经初始化 }, methods: { isActive () { returnthis.data.isInit }, // 组件所在页面的onShow事件 onShow () { this.initList() }, // 组件所在页面的onReachBottom事件 onReachBottom () { // 加载更多if (!thisdata.isEnd && !thisdata.isLoading) {console.log('触底加载')this.loadData() } }, // 组件所在页面的onPullDownRefresh事件 onPullDownRefresh () { // 初始化数据this.initList() setTimeout(() => { wx.stopPullDownRefresh() }, 400) }, // 初始化列表 initList: function () { this.setData({ page: {pageNum: , pageSize: 10}, isEnd: false }, () => { this.loadData(true) }) }, // 加载数据成功 loadDataSuccess (isInit) { if (isInit) { // 列表数据初始化完成 } else { // 当前页数据加载完成 } }, // 加载数据 loadData: function (isInit) { if (thisdata.isEnd || !thisdata.api) { return } this.setData({ isLoading: true }) wx.$request({ // wx.$request是我在wx.request的基础上做了简单的封装 url: thisdata.api, data: Object.assign({}, thisdata.page, thisdata.params) }).then(res => { // res的格式 /* let res = { code: 200, data: { rows: [] } } */ this.loadDataSuccess(isInit) // 加载数据成功 let list = thisdata.list let obj = { isEnd: res.data.rows.length < thisdata.page.pageSize, // 判断是否结束 isLoading: false, page: Object.assign({}, thisdata.page, {pageNum: thisdata.page.pageNum + }) // pageNum + 1 } if (!isInit) { // 加载第二页及以上数据// 数据局部更新 res.data.rows.forEach(item, i) => { obj['list['+ (list.length + i) + ']'] = this.filterItem(item, list.length + i) }) } else { // 初始化列表 obj.isInit = true obj.list = res.data.rows.map(item, i) =>this.filterItem(item, i)) } this.setData(obj) }).catch(() => { this.setData({ isLoading: false }) }) }, // 过滤item，oldIndex为在list中的index filterItem (item, oldIndex) { return item } } }) module.exports = {onloadMore} 使用方法 注意：Behavior只能在组件中使用 information组件中使用 [图片] [图片] loading组件主要是数据加载中、数据为空、数据加载完成的提示 [图片] [图片] 效果 information组件就是列表部分 [图片] 最后 代码片段：https://developers.weixin.qq.com/s/vazUgPmi7kdQ 第一次写如果有人看我就更新多一些用法，还有如果大家有更好的建议欢迎一起交流啊

[图片]扫码查看效果