多種詳細講解小程式頁面傳值

開發小程式，總是避免不了頁面和頁面之間資料共享，實作方法有很多種，今天就詳細講解下小程式頁面傳值，需要的朋友可以參考下。

1 使用wx.navigateTo()傳值

這種傳值方式有兩種，

• url後面拼接傳值：需要跳轉的應用内非 tabBar 的頁面的路徑 (代碼包路徑), 路徑後可以帶參數。參數與路徑之間使用 ? 分隔，參數鍵與參數值用 = 相連，不同參數用 & 分隔；如 'path?key=value&key2=value2'
• events頁面間通信接口：用于監聽被打開頁面發送到目前頁面的資料。基礎庫 2.7.3 開始支援。

1.url後面拼接傳值

wx.navigateTo({
  url: 'test?id=1',
})
           

複制

test頁面接收資料

Page({
  onLoad: function(option){
    console.log(option.query)
  }
})
           

複制

2.events頁面間通信接口

wx.navigateTo({
  url: 'test',
  events: {},
  success: function (res) {
    res.eventChannel.emit('goTest', { data: {id:1,content:'hello word'} })
  }
})
           

複制

test頁面接收資料

Page({
  onShow: function () {
    let that = this
    const eventChannel = that.getOpenerEventChannel()
    eventChannel.on('goTest', function (data) {
      console.log(data)
    })
  },
})
           

複制

2 資料緩存

利用微信提供的wx.setStorage()、wx.setStorageSync()、wx.getStorage()、wx.getStorageSync()等API

目前頁傳資料，為確定資料已經進入緩存，最好用同步

wx.setStorageSync('data', {data:"資料"})
           

複制

目标頁，在需要用的地方擷取

let data= wx.getStorageSync('data')
           

複制

3 頁面棧傳值

getCurrentPages() 函數用于擷取目前頁面棧的執行個體，以數組形式按棧的順序給出，第一個元素為首頁，最後一個元素為目前頁面。

let pages = getCurrentPages();
console.log(pages)
           

複制

檢視log

需要修改資料的頁面

currPage = pages[pages.length - 1]
currPage.setData({
  data:'hello word'
})
           

複制

注意：

• 不要嘗試修改頁面棧，會導緻路由以及頁面狀态錯誤。
• 不要在 App.onLaunch 的時候調用 getCurrentPages()，此時 page 還沒有生成。

4 app.js儲存全局屬性

app.js配置全局屬性

globalData: {
  userInfo: null
}
           

複制

需要使用的頁面

const app = getApp()
let userInfo = app.globalData.userInfo
           

複制

需要改變app.js的值

const app = getApp()
app.globalData.userInfo= "hello word"           

複制