小程序模板网

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

发布时间:2018-07-27 12:12 所属栏目:小程序开发教程

小程序是通过调用 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 。

// 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."
  },
  onLoad: 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 { 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 页面的 onLoad
Page({
  onLoad(options) {
    console.log(options.params) // { foo: 'bar' }
  }
})
复制代码

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



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24670.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询