vue 微信支付(hash模式)

1. vue 微信支付遇到的坑

使用的vue-router 的hash模式， 所以页面的路径是www.ssss.com/shop/#/home 的样子，但是微信支付目录验证不支持这种hash模式，所以在微信看来目录是错误。

// Recharge.vue
created() {
    let config = {};
    config.url = window.location.href;
    // 判断当前url是否存在?参数匹配符
    if(!config.url.match(/\?/)) {
        location.replace(window.location.href.split('#')[0] + '?' + window.location.hash);
        return ;
    }
}

2. 微信中拉起微信支付控件

  1. 使用wx的[jssdk](https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)；是比较新的方式,需要引入威信度的jssdk
  2.  使用老的WeixinJSBridgeReady方式拉起支付控件，

这次使用的是后面这种方法： 步需要引入七牛的jssdk直接就可以拉起

 handleWxpay() {
   if(this.isweixin) {
     //options 是接口返回的wx的一些配置信息
     this.wxReadyToPay(options)
   }else {
      console.log('open in wx')
   }
 },
 onBridgeReady(options){
   let that = this
   console.log(options)
   WeixinJSBridge.invoke(
     'getBrandWCPayRequest',
     options,
     function(res){
       console.log(res);
       //使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
       switch(res.err_msg){
         case "get_brand_wcpay_request:ok": //支付成功
           console.log('支付成功')
           // that.$router.push({path:'/SettlemenSuccess'})
           break;
         case "get_brand_wcpay_request:cancel": //支付取消
           console.log('取消支付')
           break;
         case "get_brand_wcpay_request:fail": //支付失败
           console.log('支付失败')
           break;
         default:
           // console.log(res.err_msg);
         break;
       }
     }
   )
 },
 wxReadyToPay(options){
   let that = this
   if (typeof WeixinJSBridge == "undefined"){
     if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady(options), false);
     }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady(options));
       document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady(options));
     }
   }else{
     that.onBridgeReady(options);
   }
 },
 isweixin() {
   const ua = window.navigator.userAgent.toLowerCase();
   if(ua.match(/MicroMessenger/i) == 'micromessenger'){
       return true;
   } else {
       return false;
   }
 },