盤點微信小程式跨頁面傳值的若干方式

• 2022 年 6 月 1 日
• 筆記
• 小程式

直接給大家上乾貨

1、跳轉頁面傳遞參數

pageA.wxml

<button type="primary" bindtap="jumpTo">點擊跳轉</button>

pageA.js

jumpTo:function(){
    //傳數字
    let number=0
    //傳字元串
    let str="字元串"
    //傳json對象
    let json={
        name:'小王',
        age:18
    }
    //傳json數組
    let jsonArray=[{
            name:'小趙',
            age:20
        },{
            name:'小李',
            age:18
     }]
     
    /**
     * url傳值只能傳字元串或數字，不能直接傳json對象
     * 所以要把json,jsonArray轉化為字元串傳值
     * 當然到另一個介面要把字元串還原成json，jsonArray對象
     */
    let jsonstr=JSON.stringify(json)
    let jsonArraystr=JSON.stringify(jsonArray)
    
    //skipurl換成你要跳轉的url
    //ex: ../page2/page2
	wx.navigateTo({
          url: 'skipurl?number='+number+'&str='+str+'&json='+jsonstr+'&jsonArray='+jsonArraystr,
    })
},

pageB.js

onLoad: function (options) {
        //接收number
        let number = options.number
        //接收str
        let str = options.str
        //接收json字元串，並將json字元串還原json
        let json=JSON.parse(options.json)
        //接收jsonArray字元串，並將jsonArray字元串還原jsonArray
        let jsonArray=JSON.parse(options.jsonArray)
        //列印接收到的數據
        console.warn("傳輸數據成功！！")
        console.log(number)
        console.log(str)
        console.log(json)
        console.log(jsonArray)
},

2、快取

pageA.js 寫入

let obj={ name:'小明', age:3 } 
wx.setStorage({ data: obj, key: 'test', })

pageB.js 讀取

wx.getStorage({
         key: 'test',
 }).then(res=>{
     console.log('獲取快取成功')
     console.log(res.data)
 })

3、全局的globalData對象

// 全局app.js 
globalData: { id: 1 } 

// xxxa頁面
var app = getApp();
app.globalData.id = 18

// xxxb頁面 
var app = getApp(); 
console.log(app.globalData.id) // 18

4、eventChannel發布訂閱

index.wxml

 <button bindtap="jump">jump to next page</button>

index.js

Page({
  jump: function () {
    wx.navigateTo({
      url: "./test",
      events: {
        // 監聽methodsFromTest事件，並獲取傳遞來的數據
        methodsFromTest: function (data) {
          console.log("index頁面接收數據：", data);
        },
      },
      success: function (res) {
        // 通過res.eventChannel觸發methodsFromIndex事件並傳遞出去數據
        res.eventChannel.emit("methodsFromIndex", {
          data: "send from opener page to test",
        });
      },
    });
  },
});

test.js

Page({
  onLoad: function (option) {
    console.log("test page onLoad");
    // 通過this.getOpenerEventChannel()實例對象可以主動觸發或監聽事件
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.emit("methodsFromTest", {
      data: "send from opened page to index",
    });
    eventChannel.on("methodsFromIndex", function (data) {
      console.log("test頁面接收數據：", data);
    });
  },
});

效果如下