微信小程序的支付与生命周期

最近完成了一个租车类型的小程序，无意间测试到了一个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) => {
    });

    },

以上就是相关代码，编译器里面按照既定的逻辑走流程，没什么问题。可是当用手机体验，调用微信支付后，先执行app onHide回调，再执行支付回调，然后执行app onShow回调，即支付之前会调用onHide()，支付之后，不管是支付成功或是失败，会调用onShow()，从而调用onShow里面的方法，由于之前不知道有这种关联，所以代码逻辑存在问题。

vConsole.png

既然微信有这样的机制，那就要想办法解决问题了，这里我用了变量isPay，来进行判断要不要调用getDevice方法

 //规定isPay为false表示支付成功，isPay为true表示支付失败，isPay初始化为false
    data: {
     isPay：false
     }，
       onShow: function() {
      //如果isPay为false，则调用getDevice方法
       if (!this.data.isPay) {
       this.getDevice();
        } 
      },

以上，用一个变量来判断，就完美解决问题啦，真好O(∩_∩)O~

exult.jpg