小程序開發(fā)中如何擴(kuò)展Page頁(yè)面對(duì)象

這篇文章主要介紹“小程序開發(fā)中如何擴(kuò)展Page頁(yè)面對(duì)象 ”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“小程序開發(fā)中如何擴(kuò)展Page頁(yè)面對(duì)象 ”文章能幫助大家解決問題。

小程序是通過調(diào)用 Page 函數(shù)來(lái)注冊(cè)一個(gè)頁(yè)面的：

//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
    })
  }
})
復(fù)制代碼

這里 Page 的作用相當(dāng)于構(gòu)造函數(shù)， Page 會(huì)初始化頁(yè)面對(duì)象（實(shí)例），然后將配置參數(shù)中的屬性 merge 到頁(yè)面對(duì)象上。

假設(shè)你封裝了個(gè) http 模塊負(fù)責(zé)發(fā)出請(qǐng)求，你想在頁(yè)面對(duì)象中直接通過 this.http 引用這個(gè)模塊，就需要擴(kuò)展頁(yè)面對(duì)象。要擴(kuò)展一個(gè)對(duì)象，在 JavaScript 中的常見做法是擴(kuò)展構(gòu)造函數(shù)的 prototype 屬性，這是 Vue 很多插件的實(shí)現(xiàn)：

import axios from 'axios'
Vue.prototype.axios = axios
// 在 vue 組件中
this.axios.get(api).then(callback)
復(fù)制代碼

很不幸，在小程序中這個(gè)辦法無(wú)效。 Page 并不是普通的構(gòu)造函數(shù)，底層還做了很多其他事情，沒辦法直接通過 Page.prototype 擴(kuò)展頁(yè)面對(duì)象。

我們可以轉(zhuǎn)變思路，擴(kuò)展傳進(jìn) Page 的配置對(duì)象。既然始終要通過調(diào)用 Page 注冊(cè)頁(yè)面，可以定義一個(gè)函數(shù)，這個(gè)函數(shù)會(huì)將收到的配置對(duì)象參數(shù)進(jìn)行處理，然后再傳給 Page 。

// wxPage.js
import http from '../utils/http'

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

export default wxPage
復(fù)制代碼

注冊(cè)頁(yè)面的時(shí)候改用這個(gè) 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) // 直接調(diào)用 http 的方法
  },
})
復(fù)制代碼

直接修改 Page 函數(shù)

為了增強(qiáng)頁(yè)面對(duì)象，每個(gè)需要的頁(yè)面都得引入 wxPage 是一件不太省心的事；更多時(shí)候我們是在維護(hù)一個(gè)老項(xiàng)目，需要擴(kuò)展每個(gè)原有的頁(yè)面對(duì)象，這時(shí)可以直接修改 Page ：

const originalPage = Page //保存原來(lái)的Page
Page = function(config) { // 覆蓋Page變量
  config.http = http
  return originalPage(config)
}
復(fù)制代碼

一般來(lái)說，修改 Page 的時(shí)機(jī)是在 App onLoad 的時(shí)候。這樣原有的頁(yè)面不用修改，直接就能通過 this.http 拿到 http 。

通過擴(kuò)展 Page 頁(yè)面對(duì)象實(shí)現(xiàn)常見需求

1. 給生命周期方法增加通用邏輯

有時(shí)我們希望在頁(yè)面注冊(cè)的 onLoad 階段執(zhí)行一些通用的邏輯，例如埋點(diǎn)，打 log 等，這時(shí)可以改寫配置對(duì)象中的 onLoad 方法：

const originalPage = Page
Page = function(config) {
  const { onLoad } = config
  config.onLoad = function(onLoadOptions) {
    // 打 log、埋點(diǎn)……
    console.log('每個(gè)頁(yè)面都會(huì)打出這個(gè)log')
    if (typeof onLoad === 'function') {
      onLoad.call(this, onLoadOptions)
    }
  }
  return originalPage(config)
}
復(fù)制代碼

2. 獲取上一頁(yè)頁(yè)面對(duì)象

小程序中的頁(yè)面跳轉(zhuǎn)會(huì)形成一個(gè)頁(yè)面棧，棧中存放著每個(gè)頁(yè)面對(duì)象，可以通過getCurrentPages 方法獲得這個(gè)頁(yè)面棧?？梢栽陧?yè)面 onLoad 的時(shí)候獲取這個(gè)頁(yè)面棧，然后取出倒數(shù)第二個(gè)對(duì)象，就是當(dāng)前頁(yè)上一頁(yè)的頁(yè)面對(duì)象：

// 接上...
  const { onLoad } = config
  config.onLoad = function(onLoadOptions) {
    const pages = getCurrentPages()
    this.__previousPage = pages[pages.length - 2] // 將上一頁(yè)的頁(yè)面對(duì)象賦為this.__previousPage
    if (typeof onLoad === 'function') {
      onLoad.call(this, onLoadOptions)
    }
  }
  return originalPage(config)
復(fù)制代碼

這樣在頁(yè)面對(duì)象中可通過引用 this.__previousPage 獲取上一頁(yè)頁(yè)面對(duì)象的data及所有方法，這樣在一些只需要兩個(gè)頁(yè)面互動(dòng)的情景下，當(dāng)前頁(yè)直接調(diào)用上一個(gè)頁(yè)面對(duì)象的方法（相當(dāng)于回調(diào)）后再返回，比通過全局狀態(tài)管理上一頁(yè)的數(shù)據(jù)要方便。

3. 跳轉(zhuǎn)頁(yè)面并傳遞數(shù)據(jù)到下一頁(yè)

這個(gè)不多說了，直接看代碼吧：

// 接上
config.navigateTo = function(url, params) { // 實(shí)現(xiàn)一個(gè)navigateTo方法，參數(shù)包括跳轉(zhuǎn)url和要傳遞的參數(shù)
  this.__params = params
  wx.navigateTo({ url })
}

config.onLoad = function(onLoadOptions) {
  const pages = getCurrentPages()
  this.__previousPage = pages[pages.length - 2] // 將上一頁(yè)的頁(yè)面對(duì)象賦為this.__previousPage
  if (this.__previousPage) {
    onLoadOptions.params = this.__previousPage.__params // 獲取上一頁(yè)面的__params賦給onLoad函數(shù)的options
    delete this.__previousPage.__params
  }
  if (typeof onLoad === 'function') {
    onLoad.call(this, onLoadOptions)
  }
}

// A 頁(yè)面跳轉(zhuǎn) B 頁(yè)面
this.navigateTo('urlToB', { foo: 'bar' })

// B 頁(yè)面的 onLoad
Page({
  onLoad(options) {
    console.log(options.params) // { foo: 'bar' }
  }
})
復(fù)制代碼

關(guān)于“小程序開發(fā)中如何擴(kuò)展Page頁(yè)面對(duì)象 ”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。