摘要：布局，解決大部分屏幕適配問題當然還有用到微信的一些了，畢竟是開發公眾號。微信授權的回跳地址填后端的，然后再由后端重定向到前端程序，攜帶參數請求用戶信息，然后再用緩存在本地，方便后續調用，目前看還算是最優的方案了。

閑來無事，抽個瘋來寫寫博客大笑 。

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