盘点微信小程序跨页面传值的若干方式

直接给大家上干货

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);
    });
  },
});

效果如下