小程序是通过调用 Page 函数来注册一个页面的，这里 Page 的作用相当于构造函数， Page 会初始化页面对象（实例），然后将配置参数中的属性 merge 到页面对象上。
//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})
}
})
假设你封装了个 http 模块负责发出请求，你想在页面对象中直接通过 this.http 引用这个模块，就需要扩展页面对象。要扩展一个对象，在 JavaScript 中的常见做法是扩展构造函数的 prototype 属性，这是 Vue 很多插件的实现：
importaxios from\'axios\'
Vue.prototype.axios = axios
// 在 vue 组件中
this.axios.get(api).then(callback)
很不幸，在小程序中这个办法无效。 Page 并不是普通的构造函数，底层还做了很多其他事情，没办法直接通过 Page.prototype 扩展页面对象。
我们可以转变思路，扩展传进 Page 的配置对象。既然始终要通过调用 Page 注册页面，可以定义一个函数，这个函数会将收到的配置对象参数进行处理，然后再传给 Page 。
// wxPage.js
importhttpfrom\'../utils/http\'
constwxPage =function(config){
config.http = http
returnPage(config)
}exportdefaultwxPage
注册页面的时候改用这个 wxPage ：
importPagefrom\'./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 ：
constoriginalPage = Page//保存原来的
PagePage =function(config) {// 覆盖Page变量
config.http= http
return originalPage(config)}
一般来说，修改 Page 的时机是在 App onLoad 的时候。这样原有的页面不用修改，直接就能通过 this.http 拿到 http 。
通过扩展 Page 页面对象实现常见需求
给生命周期方法增加通用逻辑
有时我们希望在页面注册的 onLoad 阶段执行一些通用的逻辑，例如埋点，打 log 等，这时可以改写配置对象中的 onLoad 方法：
constoriginalPage = Page
Page =function(config){
const{ onLoad } = config
config.onLoad =function(onLoadOptions){// 打 log、埋点……console.log(\'每个页面都会打出这个log\')
if(typeofonLoad ===\'function\') {
onLoad.call(this, onLoadOptions)
}
}returnoriginalPage(config)}
获取上一页页面对象
小程序中的页面跳转会形成一个页面栈，栈中存放着每个页面对象，可以通过getCurrentPages 方法获得这个页面栈。可以在页面 onLoad 的时候获取这个页面栈，然后取出倒数第二个对象，就是当前页上一页的页面对象：
const{ onLoad } =config
config.onLoad=function(onLoadOptions) {
constpages = getCurrentPages()
this.__previousPage= pages[pages.length-2]// 将上一页的页面对象赋为this.__previousPage
if(typeof onLoad === \'function\') {
onLoad.call(this, onLoadOptions)
}
}returnoriginalPage(config)
这样在页面对象中可通过引用 this.__previousPage 获取上一页页面对象的data及所有方法，这样在一些只需要两个页面互动的情景下，当前页直接调用上一个页面对象的方法（相当于回调）后再返回，比通过全局状态管理上一页的数据要方便。
跳转页面并传递数据到下一页
这个不多说了，直接看代码吧：
config.navigateTo =function(url, params){// 实现一个navigateTo方法，参数包括跳转url和要传递的参数
this.__params = params
wx.navigateTo({ url })
}
config.onLoad =function(onLoadOptions){
constpages = getCurrentPages()
this.__previousPage = pages[pages.length -2]// 将上一页的页面对象赋为this.__previousPage
if(this.__previousPage) {
onLoadOptions.params =this.__previousPage.__params// 获取上一页面的__params赋给onLoad函数的options
deletethis.__previousPage.__params
}if(typeofonLoad ===\'function\') {
onLoad.call(this, onLoadOptions)
}}// A 页面跳转 B 页面
this.navigateTo(
\'urlToB\',
{
foo:\'bar\'
})
// B 页面的
onLoadPage({
onLoad(options) {
console.log(options.params)
// {
foo: \'bar\'
}}
}
)
参与讨论
发表评论