微信公众号支付

前端通常要做的只是拉起支付

1.首先要引入微信官方提供的api

npm install jweixin-module --save

 

2.我使用的是uni-app，不能直接使用该对象，因为uni已经定义了这个对象，在main.js中重新定义

// #ifdef H5
import Jweixin from 'jweixin-module';
Vue.prototype.$jweixin = Jweixin;
// #endif

 

3.在页面中使用，需要先注入方法，再引用

this.$jweixin.config({
                          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                          appId: data.appId, // 必填，公众号的唯一标识
                          timestamp: data.timeStamp, // 必填，生成签名的时间戳
                          nonceStr:data.nonceStr, // 必填，生成签名的随机串
                          signature:data.paySign,// 必填，签名
                          jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
                        });
                        
                        setTimeout(()=>{
                            this.$jweixin.chooseWXPay({
                                  timestamp: data.timeStamp,
                                  nonceStr: data.nonceStr,
                                  package: data.package,
                                  signType: data.signType,
                                  paySign: data.paySign,
                                  success: res => {
                                    //  支付成功
                                    if(res.err_msg == "get_brand_wcpay_request:ok" ){
                                       this.$message.info('支付已成功');
                                       uni.redirectTo({
                                           url:'/pages/homePages/payResult/payResult?order_sn='+sn
                                       })
                                    }else if(res.err_msg == "get_brand_wcpay_request:cancel" ){
                                       console.log('支付已取消!')
                                       this.$message.info(res.err_msg);
                                       this.loading = false;
                                    } else{
                                        this.$message.info(res.err_msg);
                                        this.loading = false;
                                    }        
                                  },
                                  fail: res => {
                                    this.$message.info(res);
                                    this.loading = false;
                                  },
                                  complate:res => {
                                    this.$message.info(res);
                                    if(res.err_msg == "getBrandWCPayRequest:ok" || res.err_msg == "chooseWXPay:ok"){
                                           uni.redirectTo({
                                               url:'/pages/homePages/payResult/payResult?order_sn='+sn
                                           })
                                    }
                                  },
                                });
                        },200)

 

4.支付回调，因为我总觉得这个回调里拿不到信息，我就轮询调用的接口查询，