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

閑來無事，抽個(gè)瘋來寫寫博客大笑 。

寶劍尚未配好，出門已是江湖。對(duì)于擼VUE 我是認(rèn)真的~ 從啥也不懂到項(xiàng)目完成，也是花了不少時(shí)間啦。

說說我用到的技術(shù)棧吧

vue-cli 官方腳手架模板。

vue-router 前端路由 （采取的是hash模式）。

vuex 狀態(tài)管理工具。

axios 數(shù)據(jù)交互工具（官方封裝ajax，在node中也可以使用）。

mint-ui UI組件工具（餓了么VUE組件庫）。

less css預(yù)處理語言

ES5,ES6 （JS標(biāo)準(zhǔn)）。

webpack 編譯工具。

rem布局，解決大部分屏幕適配問題
當(dāng)然還有用到微信的一些API了，畢竟是開發(fā)公眾號(hào)。

總的來說就是碰到調(diào)微信API的問題

因?yàn)槭乔昂蠖朔蛛x，所以我的授權(quán)也是改了模式

1、定義一個(gè)vue中間件，所有的微信授權(quán)后的回跳都走這個(gè)中間件，然后再根據(jù)入口的不同跳轉(zhuǎn)到相應(yīng)的路由（這樣就顯得很傻逼了，授權(quán)的時(shí)候會(huì)閃一個(gè)頁面，讓人感覺很不舒服），請求的數(shù)據(jù)用localStroge緩存，這也帶來了很多麻煩，不推薦使用。

2、微信授權(quán)的回跳地址填后端的，然后再由后端重定向到前端程序，攜帶參數(shù)請求用戶信息，然后再用sesionStroge緩存在本地，方便后續(xù)調(diào)用，目前看還算是最優(yōu)的方案了。貼段代碼~

 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)
    })

后面我們看看微信支付：

大家知道微信支付是要到微信商戶平臺(tái)去配授權(quán)目錄的，那這個(gè)目錄應(yīng)該怎么配呢，

下面看看截圖

所以我配的支付目錄是： http://xxxxx.com/#/medicaserv...

配玩后就笑嘻嘻的去手機(jī)端調(diào)試了奮斗

能想象到的~ BUG出來了

在安卓手機(jī)測微信支付沒有問題，但是在IOS手機(jī)上測就會(huì)報(bào)“url未注冊”

然后只能各種百度了 查資料了

都說是什么current URL 和 this URL 的問題 ，反正我也沒看懂，就自己試著找問題，

發(fā)現(xiàn)了一個(gè)嚴(yán)重的問題，安卓機(jī)子測試 ，走到那個(gè)頁面，路由也是跟著變化的，然而IOS測試，頁面的渲染變化了，科室路由卻沒有跟著變。 當(dāng)時(shí)嚴(yán)重懷疑vue-route的兼容性，但是沒辦法啊，項(xiàng)目寫到這里了，總不能換框架吧。

只能硬著頭皮寫，還是一樣網(wǎng)上找資料，慢慢摸索。

終于找到解決辦法了：

在路由的#前面加個(gè)？號(hào)，微信瀏覽器就會(huì)把后面的路由當(dāng)成參數(shù)過濾掉了。

后面只需在商戶平臺(tái)配成這樣:

http://xxxxx.com/

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

一定要配兩個(gè)，不然安卓機(jī)是調(diào)不起來的。

配好后就差不多完事了

每次調(diào)到需要支付的路由時(shí)，判斷他是什么系統(tǒng)，如果是IOS 就在#前面加個(gè)?號(hào)，這樣就OK啦。

辦法比較土，也可以用路由鉤子函數(shù)來改變URL

weixinPay:function(parmse){

    var vm = this;
    if (typeof WeixinJSBridge == "undefined"){//微信瀏覽器內(nèi)置對(duì)象。參考微信官方文檔
      alert("微信瀏覽器");
      if( document.addEventListener ){
        alert("瀏覽器監(jiān)聽");
        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("直接回調(diào)");
      vm.onBridgeReady(parmse);
    }
  },
  /**
   * @method 支付費(fèi)用方法
   * @param data:后臺(tái)返回的支付對(duì)象,(詳情微信公眾號(hào)支付API中H5提交支付);
   */
  onBridgeReady:function(params){
    var  vm = this;
    WeixinJSBridge.invoke(
      "getBrandWCPayRequest",params,
      function(res){
        // 使用以上方式判斷前端返回,微信團(tuán)隊(duì)鄭重提示：res.err_msg將在用戶支付成功后返回ok，但并不保證它絕對(duì)可靠。
        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}});
        }
      }
    );
  },