vue前端开发微信支付和支付宝支付

1.微信支付

微信支付后台程序员会给你返一个地址，首先我们需要安装qrcodejs2将地址转换成二维码，需要先npm install qrcodejs2

然后需要一个div来存放这个微信二维码，宽高样式各位自己可以去css里写，我在这里还加了一个loading，有需要的也可以自己加

                               <div id="wechatcode" v-loading="loading" 
                                element-loading-text="拼命加载中"
                                element-loading-spinner="el-icon-loading"
                                element-loading-background="rgba(0, 0, 0, 0.8)"></div>

不要忘记在

import QRCode from 'qrcodejs2' // 引入qrcode

下面是接口数据获取然后操作二维码

 getWechatCode() {
                Models
                    .getModel("wechatpay")
                    .get({
                        orderId:this.orderId
                    })
                    .then(res => {
                        if(res.data.code == 200){
                            this.wechatPayUrl = res.data.resultData
                            if(!this.flag){
                            //重点是这里，其余的是为了我的切换业务逻辑和接口
                                let wechatcode = new QRCode('wechatcode', {
                                    width: 200,
                                    height: 200,
                                    text: this.wechatPayUrl, // 二维码地址
                                    colorDark: "#000",
                                    colorLight: "#fff",
				                })
                            }
                            this.flag = true
                            this.loading = false
                            this.isWechatCodeShow = true
                        }
                    })
        },

在微信扫描支付完之后，后台人员可以拿到支付成功结果，返给前台人员，那么前端人员只能不断去调接口查询是否已支付，在这里我们可以用生命周期来做轮询，在跳出之后需要销毁

mounted() {
        this.getWechatCode()
        //实现轮询
        this.interval = window.setInterval(() => {
        setTimeout(this.getOrderStatus(), 0);
        }, 3000);
        
    },
    beforeDestroy() {
        //清除轮询   
        clearInterval(this.interval)
        this.interval = null
    },

这里的getOrderStatus()方法是为了查询后台支付状态的，如果成功跳转到支付页面，做个If else判断即可

2.支付宝支付

我发现支付宝返回的是个html，form文件，它会让你跳转到支付宝的页面进行支付，而且实时更新，那么我们需要将返回的form文件放到一个div并且跳转新页面

getAliPay(){
            Models
                .getModel("alipay")
                .post({
                    orderId:this.orderId
                })
                .then(res => {
                    this.isWechatCodeShow = !this.isWechatCodeShow
                    //主要部分如下
                    const div=document.createElement('divform');
                    div.innerHTML=res.data; // data就是接口返回的form 表单字符串
                    document.body.appendChild(div);
                    document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
                    document.forms[0].submit();
                    })
                },