今天在开发微信小程序中碰到一个问题:
背景: 使用wx.navigateTo的events做两个页面数据流通 , A页面传一部数据到B页面 , 在B页面中进行选择等一系列操作后在B页面执行wx.navigateBack返回A页面并将修改后的数据通过events传回A页面 , A页面根据B页面传来的数据发起一次异步请求。
下面展示部分代码。
// A页面部分代码
wx.navigateTo({
url: "B页面",
events: {
choose(e) {
//一系列操作
//调用wx.** api
wx.showLoading({});
//发起异步请求
api.xxx();
}
},
success(res) {
res.eventChannel.emit('data', {
//数据
})
}
})
//B页面部分代码
onLoad: function (options) {
let that = this;
let eventChannel = this.getOpenerEventChannel();
eventChannel.on('data', function (data) {
console.log('A页面传来的参数:', data);
})
},
choose(e) {
//将数据进行一系列操作后
let eventChannel = this.getOpenerEventChannel();
//出发A页面中events的choose方法
eventChannel.emit('choose', e.detail);
//返回上一页面,也就是A页面
wx.navigateBack();
},
问题: A页面在数据回传过来时发起的请求中,也就是在events中,我调用了wx.showLoading发现真机无效(开发者工具正常)
经测试发现, wx.navigateTo在执行events中方法的时候,执行顺序是在B页面还处在当前页面栈中执行。也就是说,events中执行时类似于在B页面的以下代码执行顺序,即使代码是写在A页面中。
choose(e) {
//将数据进行一系列操作后
let eventChannel = this.getOpenerEventChannel();
//出发A页面中events的choose方法
eventChannel.emit('choose', e.detail);
***
//此次执行events的choose方法
***
//返回上一页面,也就是A页面
wx.navigateBack();
},
也就是说,出现wx.showLoading失效是因为B页面的wx.navigateBack在异步请求还没请求触发后就执行了,wx.showLoading刚出现在B页面中就被wx.navigateBack返回到A页面了。
后续解决方法:在events请求结束后再调用wx.navigateBack方法,部分代码如下
// A页面部分代码
wx.navigateTo({
url: "B页面",
events: {
choose(e) {
//一系列操作
//调用wx.** api
wx.showLoading({});
//发起异步请求
api.xxx().then(res=>{
//代码执行到当前页面栈顶部仍是B页面
//返回上一页面,也就是A页面
wx.navigateBack();
});
}
},
success(res) {
res.eventChannel.emit('data', {
//数据
})
}
})
//B页面部分代码
onLoad: function (options) {
let that = this;
let eventChannel = this.getOpenerEventChannel();
eventChannel.on('data', function (data) {
console.log('A页面传来的参数:', data);
})
},
choose(e) {
//将数据进行一系列操作后
let eventChannel = this.getOpenerEventChannel();
//出发A页面中events的choose方法
eventChannel.emit('choose', e.detail);
},