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的问题 

因为是前后端分离，所以我的授权也是改了模式

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

2、微信授权的回跳地址填后端的，然后再由后端重定向到前端程序，携带参数请求用户信息，然后再用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/#/medicaservice/

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

能想象到的~ BUG出来了

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

然后只能各种百度了  查资料了

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

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

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

终于找到解决办法了：

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

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

  http://xxxxx.com/

  http://xxxxx.com/#/medicaservice/

一定要配两个，不然安卓机是调不起来的。

配好后就差不多完事了

每次调到需要支付的路由时，判断他是什么系统，如果是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}});
            }
          }
        );
      },