小程序开发实用技巧——扩展 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?。

const wxPage = function(config) {
  config.http = http
  return Page(config)
}

export default wxPage
复制代码

注册页面的时候改用这个?wxPage?：

Page({
  data: {
    text: function(options) {
    console.log(this.http) // 打印 http 模块变量
    this.http.get(api).then(callback) // 直接调用 http 的方法
  },})
复制代码

直接修改?Page?函数

为了增强页面对象，每个需要的页面都得引入?wxPage?是一件不太省心的事；更多时候我们是在维护一个老项目，需要扩展每个原有的页面对象，这时可以直接修改?Page?：

一般来说，修改?Page?的时机是在?App?onLoad?的时候。这样原有的页面不用修改，直接就能通过?this.http?拿到?http?。

通过扩展?Page?页面对象实现常见需求
1. 给生命周期方法增加通用逻辑
有时我们希望在页面注册的?onLoad?阶段执行一些通用的逻辑，例如埋点，打 log 等，这时可以改写配置对象中的?onLoad?方法：
)
    if (typeof onLoad === 'function') {
      onLoad.call(this,onLoadOptions)
    }
  }
  return originalPage(config)
}
复制代码
2. 获取上一页页面对象
小程序中的页面跳转会形成一个页面栈，栈中存放着每个页面对象，可以通过getCurrentPages?方法获得这个页面栈。可以在页面?onLoad?的时候获取这个页面栈，然后取出倒数第二个对象，就是当前页上一页的页面对象：
function') {
      onLoad.call(config)
复制代码
这样在页面对象中可通过引用?this.__previousPage?获取上一页页面对象的data及所有方法，这样在一些只需要两个页面互动的情景下，当前页直接调用上一个页面对象的方法（相当于回调）后再返回，比通过全局状态管理上一页的数据要方便。
3. 跳转页面并传递数据到下一页
这个不多说了，直接看代码吧：
) {
    onLoad.call(// A 页面跳转 B 页面
this.navigateTo('urlToB',{ foo: 'bar' })

// B 页面的 onLoad
Page({
  onLoad(options) {
    console.log(options.params) // { foo: 'bar' }
  }
})
复制代码
就写到这里吧，在使用原生方案开发的时候，这些技巧还是挺实用的。以后再写写怎样构建小程序，使小程序支持文件预编译、require npm 包等。
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!