小程序开发实用技巧——扩展 Page页面对象

2022-04-21 管理员

扩展 Page页面对象是小程序开发中很实用的技巧，需要如何开发呢？

小程序是通过调用 Page 函数来注册一个页面的：

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onl oad: 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 = http
  return Page(config)
}

export default wxPage
复制代码

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

import Page from './wxPage'

Page({
  data: {
    text: "This is page data."
  },
  onl oad: 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 = http
  return originalPage(config)
}
复制代码

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

通过扩展 Page 页面对象实现常见需求

1. 给生命周期方法增加通用逻辑

有时我们希望在页面注册的 onLoad 阶段执行一些通用的逻辑，例如埋点，打 log 等，这时可以改写配置对象中的 onLoad 方法：

const originalPage = Page
Page = function(config) {
  const { onl oad } = config
  config.onLoad = function(onLoadOptions) {
    // 打 log、埋点……
    console.log('每个页面都会打出这个log')
    if (typeof onl oad === 'function') {
      onl oad.call(this, onl oadOptions)
    }
  }
  return originalPage(config)
}
复制代码

2. 获取上一页页面对象

小程序中的页面跳转会形成一个页面栈，栈中存放着每个页面对象，可以通过getCurrentPages 方法获得这个页面栈。可以在页面 onLoad 的时候获取这个页面栈，然后取出倒数第二个对象，就是当前页上一页的页面对象：

// 接上...
  const { onl oad } = config
  config.onLoad = function(onLoadOptions) {
    const pages = getCurrentPages()
    this.__previousPage = pages[pages.length - 2] // 将上一页的页面对象赋为this.__previousPage
    if (typeof onl oad === 'function') {
      onl oad.call(this, onl oadOptions)
    }
  }
  return originalPage(config)
复制代码

这样在页面对象中可通过引用 this.__previousPage 获取上一页页面对象的data及所有方法，这样在一些只需要两个页面互动的情景下，当前页直接调用上一个页面对象的方法（相当于回调）后再返回，比通过全局状态管理上一页的数据要方便。

3. 跳转页面并传递数据到下一页

这个不多说了，直接看代码吧：

// 接上
config.navigateTo = function(url, params) { // 实现一个navigateTo方法，参数包括跳转url和要传递的参数
  this.__params = params
  wx.navigateTo({ url })
}

config.onLoad = function(onLoadOptions) {
  const pages = getCurrentPages()
  this.__previousPage = pages[pages.length - 2] // 将上一页的页面对象赋为this.__previousPage
  if (this.__previousPage) {
    onl oadOptions.params = this.__previousPage.__params // 获取上一页面的__params赋给onLoad函数的options
    delete this.__previousPage.__params
  }
  if (typeof onl oad === 'function') {
    onl oad.call(this, onl oadOptions)
  }
}

// A 页面跳转 B 页面
this.navigateTo('urlToB', { foo: 'bar' })

// B 页面的 onl oad
Page({
  onl oad(options) {
    console.log(options.params) // { foo: 'bar' }
  }
})
复制代码

就写到这里吧，在使用原生方案开发的时候，这些技巧还是挺实用的。以后再写写怎样构建小程序，使小程序支持文件预编译、require npm 包等。

小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序商店请查看：小程序商店