阅读 3168

微信支付前端

一:关于扫码支付,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,进行调试开发。

写在最后

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

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

文章分类
前端
文章标签