閒來無事，抽個瘋來寫寫部落格   。 

   寶劍尚未配好，出門已是江湖。對於擼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}});
            }
          }
        );
      },