小程序开发中如何扩展Page页面对象

这篇文章主要介绍"小程序开发中如何扩展Page页面对象 "的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"小程序开发中如何扩展Page页面对象 "文章能帮助大家解决问题。

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

//index.jsPage({  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.jsimport 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) // 打印 http 模块变量    this.http.get(api).then(callback) // 直接调用 http 的方法  },})复制代码

直接修改 Page 函数

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

const originalPage = Page //保存原来的PagePage = function(config) { // 覆盖Page变量  config.http = http  return originalPage(config)}复制代码

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

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

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

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

const originalPage = PagePage = function(config) {  const { onLoad } = config  config.onLoad = function(onLoadOptions) {    // 打 log、埋点……    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] // 将上一页的页面对象赋为this.__previousPage    if (typeof onLoad === 'function') {      onLoad.call(this, onLoadOptions)    }  }  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) {    onLoadOptions.params = this.__previousPage.__params // 获取上一页面的__params赋给onLoad函数的options    delete this.__previousPage.__params  }  if (typeof onLoad === 'function') {    onLoad.call(this, onLoadOptions)  }}// A 页面跳转 B 页面this.navigateTo('urlToB', { foo: 'bar' })// B 页面的 onLoadPage({  onLoad(options) {    console.log(options.params) // { foo: 'bar' }  }})复制代码

关于"小程序开发中如何扩展Page页面对象 "的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。