vue调用微信公众号支付

微信支付官方文档

https://pay.weixin.qq.com/wiki/doc/api/index.html

	//将支付的认证和回调 封装成函数
        onBridgeReady(){
            let that = this
            WeixinJSBridge.invoke(
            //微信支付的一些认证  需要去网站设置好  然后在这调用
                'getBrandWCPayRequest', {
                    "appId":that.appId,                            //公众号名称，由商户传入     
                    "timeStamp":that.timeStamp,         //时间戳，自1970年以来的秒数     
                    "nonceStr":that.nonceStr,                //随机串     
                    "package":that.package,     
                    "signType":that.signType,         //微信签名方式：     
                    "paySign":that.paySign             //微信签名 
                },
                function(res){
                //这个是支付成功的回调
                
                    if(res.err_msg == "get_brand_wcpay_request:ok" ){
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。

                            // alert(1)
                            // alert(res.err_msg)
                            that.$router.push({
                                path:'/ing',
                                query:{
                                    ordersn:that.ordersn
                                }
                            })
                    } else{
                    //else 支付不成功的回调
                    
                        // alert(2)
                        // alert(res.err_msg)
                        that.$router.push({
                            path:'/ing',
                            query:{
                                ordersn:that.ordersn
                            }
                        })
                    }
                }); 
        },

//在这里调用支付 并把认证的参数代入

	qr(){
                // this.popupVisible = true
                let a = ''
                if(JSON.parse(localStorage.getItem('info')) == null){
                    a = ''
                }else{
                    a= JSON.parse(localStorage.getItem('info')).token
                }

            console.log(this.radio)
            this.$axios({
                method:'post',
                url:this.api+'mobile/order/pay',
                data:{
                    token:a,
                    ordersn:this.ordersn,
                    paytype:this.radio,
                    client:'web',
                }
            }).then(res=>{
                console.log(res.data)
                //判断状态  在什么情况下调用微信支付
                if(res.data.status == 1 && this.radio == '3'){
                    let qas = res.data.result
                    console.log(qas)
                            this.appId = qas.appId
                            this.timeStamp = qas.timeStamp
                            this.nonceStr = qas.nonceStr
                            this.package = qas.package
                            this.paySign = qas.paySign
                            this.signType = qas.signType

                    let vm = this
                    // alert(3)
                    
                    //判断typeof WeixinJSBridge是否为undefind
                    if (typeof WeixinJSBridge == "undefined"){
                    //js事件  冒泡.
                        if( document.addEventListener ){
                            document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady, false);
                        }else if (document.attachEvent){
                            document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady); 
                            document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady);
                        }
                    }else{
                    //部位空时执行 调用微信支付
                        // alert(4)
                        vm.onBridgeReady();
                    }


                    // this.$message.success(res.data.message)
                    // this.popupVisible = true
                }else if(res.data.status == 10000){
                    this.$message.success(res.data.message)
                    this.popupVisible = true
                }
                else{
                    this.$message.error(res.data.message)
                }
            })
        },

其实就是官方文档 ctrl+c 加上ctrl+v 复制粘贴就好 再根据自己的代码改改就好