微信支付前端

一：关于扫码支付，h5支付，和jsapi支付的区别？

1：扫码支付，适合用PC端。拿到后台接口返回的链接，前端利用qrcodejs2插件生成二维码扫码即可 代码如下

<div class="pay_wrap">
    <div ref="qrCodeUrl" class="qrcode"></div>
</div>

1：(1): 生成二维码遇到的坑？ 因为我遇到的是切换条件会生成不同的二维码，所有每次切换页面要展示最新的二维码，解决方法就是每次切换的时候利用原生js把全部的隐藏，然后再显示最后一个代码如下

this.$refs.qrCodeUrl.childNodes.forEach(item => { item.style.display='none' }); this.$refs.qrCodeUrl.lastChild.style.display='block'

1:(2): 前端如何拿到微信支付的接口然后跳转对应的页面，需要后台写个查询微信支付结果的接口，但是现在有个问题？ 前端用过什么时候调用呢？ 查看微信支付的官网文档，只有利用定时器轮循去调用接口代码如下:根据后台接口返回的数据写自己的业务逻辑

  getCheckResult(orderNo) {
        this.num  = setInterval(async()=>{
            let data =  await this.checkResult({
                orderNo
            })
            if ( data == 1) {
                this._close()
                // 直接跳到列表页
                if (this.type !== 'index') {
                    this._success()
                    this.isShowPaySuccess = true
                }else {
                    this.isShowPaySuccess = true

                    // this.$emit('success')
                }

            }else if(data == 2 ) {
                showMessage({
                    type: 'error',
                    message: '支付失败'
                })
                clearInterval(this.num);
            }
        },5000)
        // 同时设置一个定时任务，10分钟后，终止查询，认为付款失败
        setTimeout(function () {
            clearInterval(this.num);
            showMessage({
                type: 'error',
                message: '支付失败'
            })
        }, 300000)

    },
 

1: (3): 最后一点记住页面关闭时需要清除定时器可以利用vue的钩子函数destroyed代码如下

 destroyed() {
    if (this.num) {
        clearInterval(this.num);
    }
},

2: jsapi支付：h5支付和jsapi支付容易混淆，我当时开发的是两套，pc端一套用的是扫码支付，还有从微信公众号入口的h5页面。当时以为微信公众号里面的支付是h5支付，然后读文档开发，调用接口的时候发现请在微信外打开连接，然后仔细阅读文档才发现应该是用jsapi支付开发，JSAPI支付只能用微信浏览器打开

2: (1):jsapi支付需要微信授权拿到code,我开发的项目里面有好多处页面需要微信支付，所以我传当前页面的地址，后台接口返回的链接会重定向我的页面进行授权并且code会拼接在连接后面。从而拿到code. 2:(2):遇到的坑？我在当前页面跳转连接，会拿不到code,而且会造成用户体验很不好，因为在当前页面，跳转到当前页面授权,会出现长时间的滚动条。所以在前一个页面进行授权，代码如下

let url = await this.getCode({
               uri: `${process.env.VUE_APP_THIRD_PARTY_HOST}/wechat/nurse-profile-pay?serviceType=2&type=index`
            })
 window.location.href = url

2:(3): const code = this.$route.query.code拿到code请求后台接口拿到微信支付需要的参数，然后唤起微信支付，代码如下。

   onBridgeReady() {
            // 下面这些参数都是通过后端传回来的
            const that = this
            window.WeixinJSBridge.invoke(
                'getBrandWCPayRequest',
                {
                    appId:this.dataInvoke.appId,     //公众号名称，由商户传入
                    timeStamp:this.dataInvoke.timeStamp,         //时间戳，自1970年以来的秒数
                    nonceStr:this.dataInvoke.nonceStr, //随机串
                    package:`prepay_id=${this.dataInvoke.prepayId}`,
                    signType:'MD5',         //微信签名方式：
                    paySign:this.dataInvoke.paySign
                },
                function(res) {
                    if (res.err_msg == 'get_brand_wcpay_request:ok') {
                        Toast('支付成功');
                        setTimeout(()=>{
                            console.log(that.$route.query.serviceType);
                            if (that.$route.query.serviceType == 3) {
                                that.$router.push({name: 'NurseMedicalServices'})
                            }else if (that.$route.query.serviceType == 2&&that.$route.query.type == 'index'){
                                that.$router.push({name: 'userMedicalServices'})
                            }else {
                                that.$router.push({name: 'serviceRegistration'})
                            }
                        },500)
                    } else {
                        Toast('取消支付');
                        setTimeout(()=>{
                            if (that.$route.query.serviceType == 3) {
                                that.$router.push({name: 'ProfileProlong'})
                            }else if (that.$route.query.serviceType == 2&&that.$route.query.type == 'index'){
                                that.$router.push({name: 'userMedicalServices'})
                            }else {
                                that.$router.push({name: 'serviceRegistration'})
                            }

                        },500)
                    }
                }
            );
        },

3：h5支付，我们的使用场景是发送短信到手机上，点击连接跳到h5的一个页面，进行支付，这个支付前端就比较容易了，直接调接口拿到后台的链接直接跳转唤起微信支付就好了，需要注意的一点主要用于触屏版的手机浏览器请求微信支付的场景。可以方便的从外部浏览器唤起微信支付。

4：总结一下，jsapi支付调试比较麻烦，因为他回调地址必须是域名，而且需要微信公众号里面配置这个域名，本地调试就调试不了，需要发在公司测试地址上进行调试。你本地也可以进行内网穿透弄一个域名配置上去，用这个域名进行授权拿code,进行调试开发。

写在最后

文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊

本文首发于掘金，未经许可禁止转载💌