小程序开发实用技巧——扩展 Page 页面对象
扩展原生 Page 对象
小程序是通过调用 Page 函数来注册一个页面的：
//index.js
Page({data: {text: "This is page data."},onLoad: function(options) {// Do some initialize when page load.},// Event handler.viewTap: function() {this.setData({text: 'Set some data for updating view.'}, function() {// this is setData callback})}
})
复制代码这里Page的作用相当于构造函数，Page会初始化页面对象（实例），然后将配置参数中的属性 merge 到页面对象上。
假设你封装了个http模块负责发出请求，你想在页面对象中直接通过this.http引用这个模块，就需要扩展页面对象。要扩展一个对象，在 JavaScript 中的常见做法是扩展构造函数的prototype属性，这是Vue很多插件的实现：
import axios from 'axios'
Vue.prototype.axios = axios
// 在 vue 组件中
this.axios.get(api).then(callback)
复制代码很不幸，在小程序中这个办法无效。Page并不是普通的构造函数，底层还做了很多其他事情，没办法直接通过Page.prototype扩展页面对象。
我们可以转变思路，扩展传进Page的配置对象。既然始终要通过调用Page注册页面，可以定义一个函数，这个函数会将收到的配置对象参数进行处理，然后再传给Page。
// wxPage.js
import http from '../utils/http'const wxPage = function(config) {config.http = httpreturn Page(config)
}export default wxPage
复制代码注册页面的时候改用这个wxPage：
import Page from './wxPage'Page({data: {text: "This is page data."},onLoad: function(options) {console.log(this.http) // 打印 http 模块变量this.http.get(api).then(callback) // 直接调用 http 的方法},
})
复制代码直接修改 Page 函数
为了增强页面对象，每个需要的页面都得引入 wxPage 是一件不太省心的事；更多时候我们是在维护一个老项目，需要扩展每个原有的页面对象，这时可以直接修改 Page：
const originalPage = Page //保存原来的Page
Page = function(config) { // 覆盖Page变量config.http = httpreturn originalPage(config)
}
复制代码一般来说，修改 Page 的时机是在App onLoad 的时候。这样原有的页面不用修改，直接就能通过this.http拿到http。
通过扩展 Page 页面对象实现常见需求
1. 给生命周期方法增加通用逻辑
有时我们希望在页面注册的onLoad阶段执行一些通用的逻辑，例如埋点，打 log 等，这时可以改写配置对象中的 onLoad 方法：
const originalPage = Page
Page = function(config) {const { onLoad } = configconfig.onLoad = function(onLoadOptions) {// 打 log、埋点……console.log('每个页面都会打出这个log')if (typeof onLoad === 'function') {onLoad.call(this, onLoadOptions)}}return originalPage(config)
}
复制代码2. 获取上一页页面对象
小程序中的页面跳转会形成一个页面栈，栈中存放着每个页面对象，可以通过 getCurrentPages 方法获得这个页面栈。可以在页面 onLoad 的时候获取这个页面栈，然后取出倒数第二个对象，就是当前页上一页的页面对象：
// 接上...const { onLoad } = configconfig.onLoad = function(onLoadOptions) {const pages = getCurrentPages()this.__previousPage = pages[pages.length - 2] // 将上一页的页面对象赋为this.__previousPageif (typeof onLoad === 'function') {onLoad.call(this, onLoadOptions)}}return originalPage(config)
复制代码这样在页面对象中可通过引用 this.__previousPage 获取上一页页面对象的data及所有方法，这样在一些只需要两个页面互动的情景下，当前页直接调用上一个页面对象的方法（相当于回调）后再返回，比通过全局状态管理上一页的数据要方便。
3. 跳转页面并传递数据到下一页
这个不多说了，直接看代码吧：
// 接上
config.navigateTo = function(url, params) { // 实现一个navigateTo方法，参数包括跳转url和要传递的参数this.__params = paramswx.navigateTo({ url })
}config.onLoad = function(onLoadOptions) {const pages = getCurrentPages()this.__previousPage = pages[pages.length - 2] // 将上一页的页面对象赋为this.__previousPageif (this.__previousPage) {onLoadOptions.params = this.__previousPage.__params // 获取上一页面的__params赋给onLoad函数的optionsdelete this.__previousPage.__params}if (typeof onLoad === 'function') {onLoad.call(this, onLoadOptions)}
}// A 页面跳转 B 页面
this.navigateTo('urlToB', { foo: 'bar' })// B 页面的 onLoad
Page({onLoad(options) {console.log(options.params) // { foo: 'bar' }}
})
复制代码就写到这里吧，在使用原生方案开发的时候，这些技巧还是挺实用的。以后再写写怎样构建小程序，使小程序支持文件预编译、require npm 包等。
作者：lijiashen
链接：https://juejin.im/post/5b55c1056fb9a04f951d1d4b
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。