vue.js 在微信JS-SDK中分享、微信支付、掃一掃等簽名失效的解決

一，先登錄微信公衆號後臺綁定js安全域名，不須要加http或https，詳情百度。

2、信公衆號後臺設置服務器的IP爲白名單，不然沒法獲取access_token，詳情百度

3、引入wx-js-sdk

1.使用script標籤 http://res.wx.qq.com/open/js/...（支持https）引入；
2.若是使用vue-cli腳手架工具，能夠先npm install weixin-js-sdk -s 加載依賴包
如下已腳手架爲例
.vue 文件中 import wx from 'weixin-js-sdk';

getConfig(){    let that = this;
          this.$axios({
              url:that.api.shareUrl,//換成你實際請求的路徑
              method:'post',
              data:{
                  url:window.location.href //獲取當前路徑，注意路徑通常不能寫死，請求籤名的路徑和最終調取wx-sdk路徑必須一致。
              }
          }).then(function (res) {
              let sign = res.data.data;//後端返回的微信的數據
              wx.config({
                  debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
                  appId: sign.appId, // 必填，公衆號的惟一標識
                  timestamp: sign.timestamp, // 必填，生成簽名的時間戳
                  nonceStr: sign.nonceStr, // 必填，生成簽名的隨機串
                  signature: sign.signature, // 必填，簽名，見附錄1
                  jsApiList: [
                      'onMenuShareTimeline',
                      'onMenuShareAppMessage',
                      'hideMenuItems',
                      'showMenuItems',
                      'showAllNonBaseMenuItem',
                      'hideAllNonBaseMenuItem',
                      'startRecord',
                      'stopRecord',
                      'onVoiceRecordEnd',
                      'uploadVoice',
                      'downloadVoice',
                      'playVoice',
                      'onVoicePlayEnd',
                      'pauseVoice',
                      'stopVoice',
                      'openLocation',
                      'getLocation',
                      'chooseWXPay',
                      'onMenuShareQQ',
                      'scanQRCode',
                  ], // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
              });
          }).catch(function (err) {
              
          })
        };
        初始化完成，以調起微信掃一掃爲例
            scan(){
            let that =this;
            wx.ready(function() {
                wx.scanQRCode({
                    needResult : 1, // 默認爲0，掃描結果由微信處理，1則直接返回掃描結果
                    success : function(res) {
                        var data = res.resultStr; // 當needResult 爲 1 時，掃碼返回的結果
                        var result  =data.split(',')[1];//返回的結果是碼的類型+‘,’+內容，因此要以數組分割取第二個。
                      //處理本身的邏輯
                         
                    }
                });
            })
        }

4、重點來了，解決微信signature無效的問題

使用vue-router的網友都知道，路由上帶有#作路由的跳轉，而#在發過去作微信驗證的signature的時候，#會被幹掉，最終致使簽名無效。例如你的路徑是 www.a.com/#/scan 拿去簽名，#被幹掉之後，你使用www.a.com/#/scan，作wx.config signature是無效的。不少人都知道要使用vue的history模式。
// 路由配置

const RouterConfig = {
    mode: 'history',
    routes: routers
};

例如你的域名是www.a.com，你的文件部署在根目錄下，首頁正常訪問，使用頁面內部調整路由，如菜單等，沒問題。可是一旦你直接訪問www.a.com/scan，或者從首頁菜單跳轉到www.a.com/sacn而後刷新本頁，你會發現返回404。
如下以nginx爲例分析這個問題，你訪問www.a.com，nginx請求到根目錄下index.html，沒問題，頁面上使用菜單作跳轉頁沒問題，可是一旦你直接訪問www.a.com/scan，或者刷新www.a.com/scan,nginx找不到scan這個文件夾，因此返回404
so，配置 mode: 'history',還須要nginx配置配合。訪問不到文件夾的時候，

location / {
            if (!-e $request_filename){
                rewrite ^/(.*) /index.html last;
            }
          }

直接回到你的index.html並把參數帶回來。解決全部問題

若是你的項目不是部署在根目錄怎麼辦？
假如你的項目部署的目錄是 /test/
vue router 的配置爲

const RouterConfig = {
    mode: 'history',
    base:'test',
    routes: routers
};

nginx的配置爲

location /test/ {
    if (!-e $request_filename){
                rewrite ^/(.*) /test/index.html last;
            }
}