微信小程序提供了路由API,用于提供页面间跳转的能力。在常见的页面间跳转的功能中,将数据从A页面传递到B页面处理,处理完后将结果返回到A页面并修改的场景是比较常见的。在传递的过程中,针对数据的处理有好几种方法,我常用的方法有两种。
一种是设置globalData中的变量或者缓存的形式来处理这些传递数据,这种情况适合跨页面数量少,变量较少的情况。
另外一种则是通过getCurrentPages()获取页面栈去操纵数据,这种方法使用起来比较简单,影响到的变量比较少。
在最近的一次更新中,微信官方在navigateTo中提供了一个页面间通信的接口,用于在页面间通信,试了一下,使用比较方便。
通过页面间通信接口实现页面间的通信
实现代码:
//index.wxml
<view>
{{sum}}
</view>
<view bindtap="nav">测试页面间传值</view>
//index.js
/**
* 监听页面显示
*/
nav: function(e) {
var that = this;
wx.navigateTo({
url: '/pages/nav/index',
events: {
sendEvent: function(data) {
console.log('data', data);
var sum = data.sum;
console.log('sum', sum)
that.setData({
sum: sum
})
},
},
success: function(res) {
console.log('res', res);
res.eventChannel.emit('receiveEvent', {
a: 9,
b: 10,
})
}
})
}
//nav.js
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this;
that.sum();
},
sum: function() {
var that = this;
const eventChannel = this.getOpenerEventChannel();
var sum = 0;
setTimeout(function() {
wx.navigateBack({
delta: 1,
success: function() {
eventChannel.on('receiveEvent', function(data) {
console.log('被跳转页面', data);
var a = data.a;
var b = data.b;
that.setData({
a: a,
b: b
})
sum = Number(a) + Number(b);
});
eventChannel.emit('sendEvent', {
sum: sum,
});
}
})
}, 1000)
}
截图
结论
根据使用场景,选择合适的跳转处理方式,微信提供了页面间通信功能之后,可以尝试采用新的方法进行页面间数据修改。