最近完成了一个租车类型的小程序，无意间测试到了一个bug，从而发现了微信支付与onShow之间的联系，想记录下来，分享给更多的小伙伴。
一、生命周期回调函数
1.onLoad
页面加载时触发。一个页面只会调用一次，即第一次进入该页面时才会触发，在onShow之前触发，若页面获取显示数据固定（如签到数据等），可在onShow中进行数据交互，可以在 onLoad 的参数中获取打开当前页面路径中的参数或二维码信息的参数，可用于路径间传参或二维码信息的获取等。
onLoad(options) {}
2.onShow
页面显示/切入前台时触发。一般是进入页面时触发，在onLoad之后触发，若页面的获取显示数据不固定，经常变化（如：商品列表、车辆列表等），可在onShow中进行数据交互，获取数据信息。
onShow() {}
3.onReady
页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行，此时的DOM都已经渲染完成。
onReady() {}
4.onHide
页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等，与onShow对应。若页面中有setInterval、setTimeout定时器，可用于定时器的清除或者进行清除数据的操作等。
onHide()
5.onUnload
页面卸载时触发。如redirectTo或navigateBack到其他页面时，关闭当前页面，与onLoad对应，也可进行定时器和数据的清除等。
onUnload()
二、微信支付
发起微信支付 wx.requestPayment(Object object)
//调起微信支付，res.data.data.ChooseWXPayInfo为后台返回的数据
let chooseWXPayInfo = res.data.data.ChooseWXPayInfo;
//必传的4个参数：timeStamp，nonceStr，package，paySign
wx.requestPayment({
'nonceStr': chooseWXPayInfo.nonceStr,
'package': chooseWXPayInfo.packageInfo,
'signType': chooseWXPayInfo.signType,
'timeStamp': chooseWXPayInfo.timeStamp,
'paySign': chooseWXPayInfo.paySign,
// 支付成功
'success': function(res) {
that.data.isPay = true;
wx.showToast({
title: '支付成功',
image: '/image/icon_success.png',
duration: 1500,
mask: true
})
// 支付成功后跳转页面
setTimeout(function() {
wx.redirectTo({
url: `../takeCar/takeCar`
});
}, 2000);
},
// 支付失败
'fail': function(res) {
that.data.isPay = false;
wx.showToast({
title: '支付失败',
image: '/image/icon_fail.png',
duration: 2000,
mask: true
})
}
})
这里介绍一下我的页面逻辑：
在rentCar（项目中的一个文件）中，要列出扫码进来的车辆列表，这个数据可变性比较大，所以把数据交互放在onShow()中，写了一个方法：
onShow: function() {
this.getDevice();
},
getDevice(){
let that = this;
wxRequest('device/map/getScanInfo', nowData, "POST").then((res) => {
if (res.data.code == 200) {
let nowboxList = res.data.data.boxList;
// 这里判断返回车辆的长度
if (nowboxList.length > 0) {
that.setData({
boxList: nowboxList
})
}else{
wx.showModal({
title: '温馨提示',
content: '暂无可租车辆，请前往其他机柜',
showCancel: false,
confirmColor: '#fe861b',
success(res) {
if (res.confirm) {
wx.reLaunch({
url: '/pages/map/map'
})
}
}
})
}
} else if (res.data.code == -3) {
// 这里判断没有可用的车辆
wx.showModal({
title: '温馨提示',
content: res.data.msg,
showCancel: false,
confirmColor: '#fe861b',
success(res) {
if (res.confirm) {
wx.reLaunch({
url: '/pages/map/map'
})
}
}
})
return;
} else {
wx.showToast({
title: res.data.msg,
icon: 'none',
duration: 2000,
mask: true
})
}
}).catch((errMsg) => {
});
},
既然微信有这样的机制，那就要想办法解决问题了，这里我用了变量isPay，来进行判断要不要调用getDevice方法
//规定isPay为false表示支付成功，isPay为true表示支付失败，isPay初始化为false
data: {
isPay：false
}，
onShow: function() {
//如果isPay为false，则调用getDevice方法
if (!this.data.isPay) {
this.getDevice();
}
},
以上，用一个变量来判断，就完美解决问题啦，真好O(∩_∩)O~
