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