vue +微信公众号+微信支付 js-sdk

vue +微信公众号+微信支付 js-sdk
最近项目中有用到，所以记下笔记

是个停车场项目，前后端完全分离的项目，我前端用的是vue框架写的。

首先因为不是微信环境，在页面调取微信支付需要配置config，才有权限。页面一加载，我就调取了配置

    mounted() {
      var url_final = location.href.split('#')[0];
     //调取js-sdk
        let _this =this
        var appConfig = {
        pro:{
            appid: "******************************",
            token: "*****************************",
            url:encodeURIComponent(url_final)
        },
        api: "api.woaap.com",
        }
        ajaxService.getJssdk(appConfig.pro, config => {   //这里axios封装了。正常调就行
        config.debug = true  //开启debug 
        wx.config(config)//配置     config为后台返回值
         wx.ready(function(){
            wx.checkJsApi({
                jsApiList: ['chooseWXPay'],
                success:function(res){
                    console.log("seccess")
                    console.log(res,111)
                },
                fail:function(res){
                    console.log("fail");
                    console.log(res,222)
                }
            })
           })
        })
    }

点击立即支付调取支付接口，代码如下：

  //支付
        payMoney() {
         let _this = this
         let openid = document.getElementById('openid').innerHTML
         let params ={   //参数
           'openid':openid,
           'plate_number': _this.plates,
           'pay_fee':_this.dataObj.pay_price
         }
         ajaxService.parkPay(params, res => {
            console.log(res)
          if(res.errcode=='0') {
            let resData = res.data
            _this.Pay(resData)
          }
        
         });
        },
        Pay (resData) {
            let _this= this
            if (typeof WeixinJSBridge === 'undefined') {
                if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', _this.onBridgeReady(data), false)
                } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', _this.onBridgeReady(data))
                document.attachEvent('onWeixinJSBridgeReady', _this.onBridgeReady(data))
                }
            } else {
                _this.onBridgeReady(data)
            }
        },
        onBridgeReady (resData) {
            let _this = this
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', data,
                function (res) {
                if (res.err_msg === 'get_brand_wcpay_request:ok') {
                   _this.$toast('支付成功！')
                   _this.$router.replace({path:'/Success'})
                } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
                   _this.$toast('支付取消')
                  
                } else {
                   _this.$toast('支付失败')
                   _this.$router.replace({path:'/fail'})
                  
                }
                }
            )
        }

这样就可以了。