vue 实现微信公众号支付

1、安装js-sdk包 :   npm install weixin-jsapi
      引入: import wx from 'weixin-jsapi'
      下边字段都是后台接口返回的数据
         
            wx.config({
                    debug: true, // 开启调试模式
                    appId: this.appId, // 公众号的唯一标识
                    timestamp: this.timeStamp, // 生成签名的时间戳
                    nonceStr: this.nonce_str, // 生成签名的随机串
                    signature: this.sign,// 签名
                    jsApiList: ['chooseWXPay'] // 填入需要使用的JS接口列表,这里是先声明我们要用到支付的JS接口
                });

                  //弹出支付窗口
                    wx.chooseWXPay({
                        timestamp: this.timeStamp, // 支付签名时间戳,
                        nonceStr: this.nonceStr, // 支付签名随机串,不长于 32 位
                        package: "prepay_id="+this.prepay_id , // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=xxxx)
                        signType: 'MD5', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
                        paySign: this.paySign, // 支付签名
                        success: function (res) {
                            // 支付成功后的回调函数
                            console.log("11111111111111",res);
                        },cancel:function(res){
                            console.log("22222",res);

                        },fail:function(res){
                            console.log("33333",res)
                        }
                });

你可能感兴趣的:(vue 实现微信公众号支付)