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

直接给大家上干货

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


效果如下