vue 微信公众号中如何调取微信JSSDK 和微信支付

闲来无事，抽个疯来写写博客大笑 。

宝剑还没有配好，出门已经是江湖。对于撸VUE 我是认真的~ 从啥也不懂到项目完成，也是花了很多时间啦。

说说我用到的技术栈吧

• vue-cli 官方脚手架模板。
• vue-router 前端路由 （采起的是hash模式）。
• vuex 状态管理工具。
• axios 数据交互工具（官方封装ajax，在node中也可使用）。
• mint-ui UI组件工具（饿了么VUE组件库）。
• less css预处理语言
• ES5,ES6 （JS标准）。
• webpack 编译工具。
• rem布局，解决大部分屏幕适配问题
  固然还有用到微信的一些API了，毕竟是开发公众号。

总的来讲就是碰到调微信API的问题

由于是先后端分离，因此个人受权也是改了模式

一、定义一个vue中间件，全部的微信受权后的回跳都走这个中间件，而后再根据入口的不一样跳转到相应的路由（这样就显得很傻逼了，受权的时候会闪一个页面，让人感受很不舒服），请求的数据用localStroge缓存，这也带来了不少麻烦，不推荐使用。

二、微信受权的回跳地址填后端的，而后再由后端重定向到前端程序，携带参数请求用户信息，而后再用sesionStroge缓存在本地，方便后续调用，目前看还算是最优的方案了。贴段代码~

getquerystring(name){
    let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    let r = window.location.search.substr(1).match(reg);
    if(r!=null)return  unescape(r[2]); return null;
  },
  getnewsdata(code,state) {
    const url=this.HOST+'/api/user/detail';
    Indicator.open({spinnerType: 'triple-bounce'});
    Axios.get(url, {params: {code: code,state:state}}).then((response) => {
      Indicator.close();
      if(response.data) {
        const anduserInfo={
          uid: this.outjsencrpt(response.data.data.content.uid),
          openid: this.outjsencrpt(response.data.data.content.openid),
          nickname: response.data.data.content.nickname,
          headimgurl: response.data.data.content.headimgurl
        };
        const token = this.outjsencrpt(response.data.data.content.token);
        window.sessionStorage.setItem(this.DISCOVE,JSON.stringify(anduserInfo));
        window.sessionStorage.setItem("token",token);
        this.wxuserinfo = anduserInfo;
      }
    }).catch((response) => {
      console.log(response.data)
    })

后面咱们看看微信支付：

你们知道微信支付是要到微信商户平台去配受权目录的，那这个目录应该怎么配呢，

下面看看截图

因此我配的支付目录是： http://xxxxx.com/#/medicaserv...

配玩后就笑嘻嘻的去手机端调试了奋斗

能想象到的~ BUG出来了

在安卓手机测微信支付没有问题，可是在IOS手机上测就会报“url未注册”

而后只能各类百度了 查资料了

都说是什么current URL 和 this URL 的问题 ，反正我也没看懂，就本身试着找问题，

发现了一个严重的问题，安卓机子测试 ，走到那个页面，路由也是跟着变化的，然而IOS测试，页面的渲染变化了，科室路由却没有跟着变。 当时严重怀疑vue-route的兼容性，可是没办法啊，项目写到这里了，总不能换框架吧。

只能硬着头皮写，仍是同样网上找资料，慢慢摸索。

终于找到解决办法了：

在路由的#前面加个？号，微信浏览器就会把后面的路由当成参数过滤掉了。

后面只需在商户平台配成这样:

http://xxxxx.com/

http://xxxxx.com/#/medicaserv...

必定要配两个，否则安卓机是调不起来的。

配好后就差很少完事了

每次调到须要支付的路由时，判断他是什么系统，若是是IOS 就在#前面加个?号，这样就OK啦。

办法比较土，也能够用路由钩子函数来改变URL

weixinPay:function(parmse){

var vm = this;
    if (typeof WeixinJSBridge == "undefined"){//微信浏览器内置对象。参考微信官方文档
      alert("微信浏览器");
      if( document.addEventListener ){
        alert("浏览器监听");
        document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(parmse), false);
      }else if (document.attachEvent){
        document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(parmse));
        document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(parmse));
      }
    }else{
      //  alert("直接回调");
      vm.onBridgeReady(parmse);
    }
  },
  /**
   * @method 支付费用方法
   * @param data:后台返回的支付对象,(详情微信公众号支付API中H5提交支付);
   */
  onBridgeReady:function(params){
    var  vm = this;
    WeixinJSBridge.invoke(
      'getBrandWCPayRequest',params,
      function(res){
        // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
        if(res.err_msg == "get_brand_wcpay_request：ok" ){
          vm.$router.replace({path: '/medicalservice/orderdetail',query:{order_id:vm.order_id}});
        }else{
          vm.$router.replace({path: '/medicalservice/orderdetail',query:{order_id:vm.order_id}});
        }
      }
    );
  },