扩展 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 。。。

// 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 包等。。。

小程序工具提供多类型商城/门店小程序制作，，，可视化编辑 1秒天生5步上线。。。通过拖拽、拼接？？？？？榻峁剐〕绦蛏坛且趁妫，所看即所得，，，只需要美工就能做出细腻商城。。。更多小程序市肆请审查：小程序市肆