h5页面回到小程序页面进行支付踩坑

随着公司业务的发展，产品大大任务每次开发一个需求，相同的功能小程序，客户端，h5都需要开发一遍。故决定把确认订单页统一成H5页面

但是在小程序有自己的支付方式，要想实现支付功能，就只能在支付时回到小程序页面支付

下面是支付流程

遇到问题

1. 支付完成后，会在次执行支付页面的onShow钩子，也会执行全局的onShow钩子
2. 除了ios微信支付取消支付，是直接执行取消的回调以外，其它场景都会执行onShow钩子
3. 支付云闪付，安卓机跟苹果机支付完成后，页面onSow跟成功的回调，执行顺序不一样

onShow(){

    console.log(222)

    //...调用支付方法

    this.doPay()

},

doPay(){

    wx.requestPayment({

    ...config,//一些列的入参

    success:(res){

        console.log(111)

        }

    })

}

Android手机是先走支付回调，然后再执行onShow方法 输出结果为 1111 222
在IOS手机是现在执行onShow，在走支付成功的回调 输出结果为222 1111

针对以上问题的解决方案如下

data: {
    count:0,//第几次进入
    successOrderList:[],//存储支付成功的订单号
},
onShow:function(){
    if(this.data.count===1){
        //通过判断当前订单是否支付成功来跳转到支付完成页还是订单列表页面
    }else{
        this.setData({
            count:1
        })
        this.toPay()
    }
},
toPay(){
   wx.requestPayment({
       ...config,
        success: function (res) {
          //存储支付成功的订单号，方便二次执行onShow的时候判断页面跳转
          let orderList = that.data.successOrderList
          orderList.push(that.data.options.orderId)
          
          that.setData({
            successOrderList:orderList
          })
          wx.redirectTo({
            url: 支付完成页面
          })
        },
        fail: function (res) {
          console.log('支付取消',res)
          that.toastShow('支付取消');
            setTimeout(function() {
              wx.redirectTo({
                url: 订单列表页面
              })
          }, 200)
        }
      })
}