vue-cli公众号调用微信支付（坑）

vue微信支付及坑点：
调用微信支付首先要引入微信jssdk
在index.html文件引入

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

也可以用npm进行安装，在main.js引入
我这里是在index.html文件引入
封装支付接口，以便于在各个组件调用
1.创建wx-js-sdk.js文件，封装调用微信支付的接口，并导出（根据项目需求封装）

import request from '../request/http'
import Vue from 'vue'
import {
  Toast
} from 'vant'
Vue.use(Toast)
import api from '../request/api'

export default {
  /* 微信支付 */
  creatWxPay: function (options, callback) {
    request({
      url: api.requestApi.video.rewardpay,
      data: {
        id: options.id,
        money: options.money
      }
    }).then((res) => {
      if (res.error === 0) {
        if (res.wechat.success) {
          if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
              document.addEventListener('WeixinJSBridgeReady', function () {
                onBridgeReady(res.wechat, callback)
              }, false);
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady', function () {
                onBridgeReady(res.wechat, callback)
              });
              document.attachEvent('onWeixinJSBridgeReady', function () {
                onBridgeReady(res.wechat, callback)
              });
            }
          } else {
            onBridgeReady(res.wechat, callback);
          }
        }
      }
    }).catch((err) => {
      Toast('系统异常！')
    });

  },

// 调用微信内置js对象 WeixinJSBridge 发起支付
function onBridgeReady(params, callback) {
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
      "appId": params.appId, //公众号名称，由商户传入     
      "timeStamp": params.timeStamp, //时间戳，自1970年以来的秒数     
      "nonceStr": params.nonceStr, //随机串     
      "package": params.package,
      "signType": params.signType, //微信签名方式：     
      "paySign": params.paySign //微信签名 
    },
    function (res) {
      if (res.err_msg == "get_brand_wcpay_request:ok") {
        // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
        // 添加支付成功回调，在组件调用之后根据需求修改js逻辑
        callback && callback()
      }else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
        Toast('已取消支付')
      }
    }
  )
}

2.在main.js引入，并添加到Vue原型（方便调用）

import wxJSSDK from './common/wx-js-sdk'
const wxApi = {
    // wxShare: wxJSSDK.creatWxShare, // 微信分享
    wxPay: wxJSSDK.creatWxPay // 微信支付
}
Vue.prototype.wx = wxApi

3.在组件中调用

reward_pay(){ // 支付
// 调用刚封装好的支付api
 this.wx.wxPay({
          id: this.id,
          money: this.inputPrice ? this.inputPrice : this.rewardPrice
      }, ()=>{
      // 成功回调
          this.$toast.success('支付成功！')
          setTimeout(()=>{
              this.hide()
              this.callBack && this.callBack()
          }, 2000)
      })
  },

按照正常的微信支付调用，到这里就可以正常调用支付了，但是，vue-cli打包后访问路由的路径是http://xxx/dist/index.html#/xxxx?id=1（栗子）的形式，而正常的url是https://so.youkuaiyun.com/so/search/s.do?q=1（栗子）的形式，
所以会报URL未注册的错

看到url未注册，在支付参数配置都正确的情况下，首先考虑到公众号后台设置，支付授权目录
正常url配置：
比如完整路径：http://xxx.xxx.com/index/detail?id=1
则URL配置这样写：http://xxx.xxx.com/index/
vue-cli打包后的访问路径：http://xxx.xxx.com/dist/index.html#/detail?id=1
如果按照正常配置url：http://xxx.xxx.com/dist/
调用微信支付发现还是会报同样的错，那么问题就出在这里
通过调试，仔细观察发现，vue的每一个路由访问，路由路径都是index.html#/后面发生路由变化，所以index.html#/就相当于是路由的一级目录，当配置成http://xxx.xxx.com/dist/调用支付，它会认为这不是根目录，怎么解决这个问题？
配置url的时候，加上index.html#/：http://xxx.xxx.com/dist/index.html#/
这样就可以解决url未注册的问题了，支付也能正常调用
希望对你们有所帮助，如有疑问请留言

如果对你有帮助，点个赞再走吧~谢谢
关注我，不定时分享技术干货~