前言

只要你的小程序超過一個頁面那么可能會需要涉及到頁面參數(shù)的傳遞，下面我總結(jié)了 4 種頁面方法。

路徑傳遞

通過在url后面拼接參數(shù)，參數(shù)與路徑之間使用 ? 分隔，參數(shù)鍵與參數(shù)值用 = 相連，不同參數(shù)用 & 分隔；如 ‘path?key=value&key2=value2’。

案例：A頁面帶參數(shù)跳轉(zhuǎn)到B頁面
A頁面跳轉(zhuǎn)代碼

goB(){
    wx.navigateTo({
      url: '/pages/B/index?id=value',
    })
  },

B頁面接收代碼

onLoad: function (options) {
	console.log('id', options.id)
}

上面的案例是字符串參數(shù)，但是很多情況下需要傳遞對象，如下方代碼。

Page({
  data: {
    userInfo:{
      name:'cym',
      age:16
    }
  },
  goB(){
    wx.navigateTo({
      url: '/pages/B/index?id='+this.data.userInfo,
    })
  },
})

如果使用上面同樣的方式結(jié)構(gòu)，輸出的結(jié)果是：[object Object]

這個時候需要先把對象通過JSON.stringify(obj)將 object 對象轉(zhuǎn)換為 JSON 字符串進行參數(shù)傳遞，再到接收頁面通過JSON.parse解析使用。

A頁面跳轉(zhuǎn)代碼

 goB(){
    let userStr = JSON.stringify(this.data.userInfo)
    wx.navigateTo({
      url: '/pages/B/index?id='+userStr,
    })
  }

B頁面接收代碼

onLoad: function (options) {
    console.log('id', JSON.parse(options.id))
  }

全局變量

通過App全局對象存放全局變量。

app.js代碼

App({
 // 存放對象的全局變量
  globalData:{},
})

A頁面跳轉(zhuǎn)代碼

// 獲取App對象
const app = getApp()
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    userInfo: {
      name: 'cym',
      age: 16
    }
  },

  goB() {
    app.globalData.userInfo = this.data.userInfo
    wx.navigateTo({
      url: '/pages/B/index',
    })
  },
})

B頁面接收代碼

// 獲取全局對象
 const app = getApp()
Page({

  onLoad: function (options) {
    console.log(app.globalData.userInfo)
  }
})

存放在 App 全局變量里面，可以被多個頁面使用，直接從 App 對象獲取即可。這個數(shù)據(jù)是保持在內(nèi)測中，每次小程序銷毀就沒有了。

數(shù)據(jù)緩存

通過存儲到數(shù)據(jù)緩存中。

A頁面跳轉(zhuǎn)代碼

 goB() {
    wx.setStorageSync('userInfo', this.data.userInfo)
    wx.navigateTo({
      url: '/pages/B/index',
    })
  }

B頁面接收代碼

 onLoad: function (options) {
    let userInfo = wx.getStorageSync('userInfo', this.data.userInfo)
    console.log(userInfo)
  }

存放在數(shù)據(jù)緩存里面，可以被多個頁面使用，直接用 getStorageSync 獲取即可。這個數(shù)據(jù)是保持在數(shù)據(jù)緩存中，除非清楚數(shù)據(jù)緩存或者刪除小程序否則一直存在。

事件通信

通過事件通信通道。

A頁面跳轉(zhuǎn)代碼

goB() {
    wx.navigateTo({
      url: '/pages/B/index',
      success:(res)=>{
				// 發(fā)送一個事件
				res.eventChannel.emit('toB',{ userInfo: this.data.userInfo })
			}
    })
  }

B頁面接收代碼

onLoad: function (options) {
     //	獲取所有打開的EventChannel事件
     const eventChannel = this.getOpenerEventChannel();
     // 監(jiān)聽 index頁面定義的 toB 事件
     eventChannel.on('toB', (res) => {
       console.log(res.userInfo) 
     })
   }

總結(jié)

大家可以針對具體業(yè)務(wù)場景來進行選擇合適自己的傳參方式。