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