vue微信公众号支付过程-详解_飞道的博客

vue微信公众号支付过程-详解

2020-08-24 18:24 489人阅读评论(0)

关于验签看这篇博客即可，这里不做赘述，签名的时候打开debug用微信开发者工具查看错误，主要说支付过程(当然必须验签成功后)。

下载依赖

npm install weixin-jsapi

引入

import wx from 'weixin-jsapi'

拉起支付

// 点击立即支付按钮
payNow () {
    var $this = this;
    this.$post('/wx/pay/orderPayNow',    // 支付接口 
        {
            ... ...   一堆参数
            totalFee: this.totalFee          // 示例：总费用
        }
    ).then(function(res) {
        if(res.code == 1000){
            wx.ready(function(){
                wx.chooseWXPay({
                    appId:res.data.appId,     // appId
                    timestamp: res.data.timeStamp, // 支付签名时间戳
                    nonceStr: res.data.nonceStr, // 支付签名随机串
                    package: res.data.packageValue, // 统一支付接口返回的prepay_id参数值
                    signType: res.data.signType, // 签名方式
                    paySign: res.data.paySign, // 支付签名(签名算法看微信开放文档的js-sdk文档的附录1，当然这是后端的事情)
                    // 支付成功，跳入支付成功页面，点击完成按钮会进入success和complete函数
                    success: function (res) {
                        // res.errMsg === 'chooseWXPay:ok'方式判断前端返回,微信团队郑重提示：
                        // res.errMsg将在用户支付成功后返回ok，但并不保证它绝对可靠， 切记。
                        // res.errMsg === 'chooseWXPay:cancel'  支付取消

                        if (res.errMsg === 'chooseWXPay:ok') {      // 支付成功进入这个判断
                                $this.$toast('支付成功!')
                                $this.$router.replace({       // 支付成功后跳入自己需要额页面
                                    path: "/payHistory",
                                })
                        } else if (res.errMsg === 'chooseWXPay:cancel') {    // 经过测试 用户取消支付不会进入这个判断，而是进入complate和cancel函数
                                $this.$toast('取消支付');
                        }
                        $this.$toast('success：' + res.errMsg)
                    },
                    // 不管支付成功与否，只要拉起支付之后进行任何操作之后，都会进入complate函数
                    complete: function (res) {      
                        if (res.errMsg === 'chooseWXPay:ok') {           // 成功 res.errMsg === 'chooseWXPay:ok' // 支付成功提示页面，点击完成按钮之后 
                                $this.$toast('支付成功!')
                                $this.$router.replace({
                                    path: "/payHistory",
                                })
                                // 或者关闭窗口// wx.closeWindow()  如果调用这个关闭接口，要在验签的时候配置jsapiList// WeixinJSBridge.call('closeWindow');
                        } else if (res.errMsg === 'chooseWXPay:cancel') {   // 取消 res.errMsg === 'chooseWXPay:cancel'
                                $this.$toast('取消支付');
                        }
                        $this.$toast('complete：' + res.errMsg)
                        // 对于下面这个说法：我经过实际测试：ios和Android支付成功后点击完成按钮都会进入success和complete函数，并且返回信息都是 res.errMsg === 'chooseWXPay:ok'
                        // 网友说法：对于安卓客户端支付成功后不进入chooseWXPay函数success的问题原因是：iOS和安卓返回的数据不同，实际如下：支付成功后：安卓客户端返回的是 {"errMsg":"getBrandWCPayRequest:ok"}，而iOS返回的是{"err_Info":"success","errMsg":"chooseWXPay:ok"}，安卓找不到success入口
                    },
                    // 用户取消支付--实际上进入cancel 和 complate 函数
                    cancel: function (res) {     
                        $this.$toast('已取消支付');
                    },
                    // 支付失败
                    fail: function (res) {
                        $this.$toast('支付失败，请重试');
                    }
                })
            })
            // 验签错误或者其他错误
            wx.error(function (res) {
                $this.$toast('支付错误！')
            })
        }else{
            $this.$toast({
                message: '获取支付信息失败，请重试',
            });
        }
    }).catch(function(error){
        $this.$toast('缴费请求失败！请重试');
    });
}

点击立即支付，拉起付款密码框，输入密码后，支付成功就会自动跳入这个页面：

点击这个完成按钮，就会进入success和complate函数中，进行判断就好了，如果拉起密码框后，取消支付了，debug状态下都会提示：