微信支付

记录在微信支付中遇到的问题

1、做h5页面的时候，需要将h5页面嵌入到其他的小程序中。支付的时候唤起小程序支付，小程序使用的是uniapp框架。

 第一次的时候用的是wx.navigateTo跳转到小程序支付页面，发现偶尔会发生换不起支付的情况

wx.miniProgram.getEnv(function(apiRes) {
        if (apiRes.miniProgram) {
            wx.miniProgram.navigateTo({
                url: `/pagesMain/Pay/Pay?timeStamp=${jsPayApi.timeStamp}&nonceStr=${jsPayApi.nonceStr}&package=${jsPayApi['package_']}&signType=${jsPayApi.signType}&paySign=${jsPayApi.paySign}&successUrl=${successUrl}`
             })
        }
})

第二次尝试用uni的方法，首先初始化uni的环境，需要引入uni的js；万事准备完毕后，信心满满的去使用，发现比一种情况好了许多。但是还是用偶发的支付唤不起来的情况发生。后来听说rediretTo可能好一点，更改后发现还是不行。极度奔溃啊~~

'https://res.wx.qq.com/open/js/jweixin-1.6.0.js',    //微信
'https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js'

在页面mounted中初始化uni方法
this.$nextTick(() => {
    document.addEventListener("UniAppJSBridgeReady", function() {
       console.log("初始化uniapp的API成功");
    });
})

拼接跳转地址，并跳转
let jsPayApi = res.data.jsApiRequestData
let paySuccessUrl = `${this.$_config.URL.success}?orderNo=${res.data.orderNo}&code=Z01` // 线上支付成功回调地址
let successUrl = escape(paySuccessUrl)
let package_prePay = escape(jsPayApi['package_'])
let strPath =
    `/pagesMain/Pay/Pay?timeStamp=${jsPayApi.timeStamp}&nonceStr=${jsPayApi.nonceStr}&package=${package_prePay}&signType=${jsPayApi.signType}&paySign=${jsPayApi.paySign}&successUrl=${successUrl}`
                          this.$indicator.close();
setTimeout(function() {
    uni.navigateTo({
       url: `/pagesMain/Pay/Pay?timeStamp=${jsPayApi.timeStamp}&nonceStr=${jsPayApi.nonceStr}&package=${package_prePay}&signType=${jsPayApi.signType}&paySign=${jsPayApi.paySign}&successUrl=${successUrl}`,
       success: function(res) {
           console.log("调用第三方支付成功！")
       },
       fail: function(res) {
           console.log("调用第三方支失败付！", res)
       },
       complete: function(res) {
           console.log(res)
       }
   })
}, 1600)

第三次尝试，使用微信原生的跳转方式。方式不是在保存后唤起支付 的时候去初始化调用。是在页面加载之前去封装，然后在保存后调用

在import之前初始化
let wxR = wx.miniProgram.redirectTo;

在methods中写一个专门唤起支付的方法
openWx(pageUrl){
     let This = this;
     // 若没有唤起支付，关闭弹框
     setTimeout(function() {
        console.log("唤起支付失败！已超过3s");
           This.$indicator.close();
     }, 3000);

     if(!wxR){
        console.info('wx.miniProgram.redirectTo 加载失败');
     }

     setTimeout(()=>{
        wxR({
           url: pageUrl,
           success: function(res) {
               console.info("调用第三方支付成功！pageUrl="+pageUrl)
           },
           fail: function(res) {
               console.info("调用第三方支付失败！", res+pageUrl)
           },
           complete: function(res) {
               try{
                 This.strGoPath = ""
                 console.log("打开页面完成complete", e)
                 This.$indicator.close();
               }catch(e){
                 This.strGoPath = ""
                 console.log("打开页面完成complete报错", e)
               }
            }
         });
    },300);
 },

在保存的方法中直接调用该方法，即可

使用第三种支付方式后，发现没有在出现过唤不起支付的情况。

2、在h5页面使用微信jsdk方式支付，偶尔不走cancel方法，使用complete方法，区分返回的errorMsg方式来区分支付成功、支付取消

wx.ready(function () {
                wx.chooseWXPay({
                    appId: params.jsApiRequestData.appId,
                    timestamp: params.jsApiRequestData.timeStamp,    // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                    nonceStr: params.jsApiRequestData.nonceStr,    // 支付签名随机串，不长于 32 位
                    package: params.jsApiRequestData['package_'],    // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                    signType: params.jsApiRequestData.signType,    // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                    paySign: params.jsApiRequestData.paySign,        // 支付签名
                    success: function (res) {
                        Indicator.open('支付中...');
                        setTimeout(function(){
                            Indicator.close();
                            // window.location.href = `/sy-test/#/pay-success?orderNo=${params.orderNo}&code=${productCode}` // 测试
                            window.location.href = `${URL.success}?orderNo=${params.orderNo}&code=${productCode}` // 线上
                        },2000)
                    },
                    complete: function(res) {
                        // ios和Android支付成功都是chooseWXPay:ok
                        Indicator.close();
                        if(res.errMsg != 'chooseWXPay:ok') {
                            let proposalNo = params.proposalList[0]
                            window.location.href = `${URL.unpaid}?proposalNo=${proposalNo}&code=${productCode}` // 线上
                        }
                    },
                    cancel: function (res) {
                        Indicator.close();
                        Toast('取消支付');
                        let proposalNo = params.proposalList[0]
                        window.location.href = `${URL.unpaid}?proposalNo=${proposalNo}&code=${productCode}` // 线上
                    },
                    fail: function (res) {
                        Toast('支付失败');
                    }
                });
            })