H5调用微信支付

调用微信 API

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

然后再调用微信官方支付API之前先调用后端接口,获取支付API所需要的参数,然后使用 window.wx.config去配置支付API,然后再去调用微信支付官方JDK,具体看下面代码即可

handleConfirm() {
            if (!parseInt(this.number)) return this.$fail("请填写金额")
            this.number = String(parseInt(this.number))
            console.log('充值金额', this.number);
            const params = {
                money: this.number,
                openId: this.openId
            }
            createRechargeOrderAPI(params).then(res => {
                if (res.code !== 200) return this.$fail(res.message)
                // 创建订单成功
                let prepayInfo = res.data
                // 微信支付相关配置
                window.wx.config({
                    appId: prepayInfo.appid,
                    timestamp: prepayInfo.timestamp,
                    nonceStr: prepayInfo.noncestr,
                    paySign: prepayInfo.paySign,
                    package: prepayInfo.package,
                    partnerid: prepayInfo.partnerid,
                    signType: prepayInfo.signType,
                    jsApiList: ['chooseWXPay']
                })
                // 调用微信支付JDK
                window.wx.ready(() => {
                    window.wx.chooseWXPay({
                        appId: prepayInfo.appid,
                        timestamp: prepayInfo.timestamp,
                        nonceStr: prepayInfo.noncestr,
                        package: prepayInfo.package,
                        signType: prepayInfo.signType,
                        paySign: prepayInfo.paySign,
                        success: function (res) {
                            if (res.errMsg === "chiiseWXPay:ok") {
                                getMerchantInfoAPI().then((result) => {
                                    if (result.code === 200) {
                                        localStorage.setItem("userId", result.data.id);
                                        this.setMerchantInfo(result.data)
                                    }
                                });
                                this.$success('支付成功')
                                this.$router.push("/user")
                            }
                        },
                        fail: function (err) {
                            console.log('微信支付失败', err);
                        }
                    })
                })
                window.wx.error((res) => {
                    console.log('JSK配置错误', res);
                })
            }).catch(err => {
                console.log(err);
            })
        }