前言

這幾天公司需要做微信端h5專案，需要用到微信掃一掃功能，就需要涉及到配置微信JS-SDK的問題，怎麼配置怎麼生成簽名這邊就不說了官方文件(https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)都說的比較詳細，按照官方使用介面簽名校驗工具(https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign&token=&lang=zh_CN)一步步檢查下來發現並沒什麼錯誤,結果還是出現了簽名錯誤，讓人蛋疼，經過一段時間摸索才發現了問題所在，話不多說看程式碼

wx.config({
              debug: false, 
              appId: appId,
              timestamp: timestamp, 
              nonceStr: noncestr, 
              signature: signature,
              jsApiList: ['scanQRCode']
});

上面程式碼主要是配置JS-SDK的程式碼文件都有說，下面介紹這些引數的功能，和容易引起出錯的注意事項

1、debug : 為true開啟除錯模式，微信每一步執行的回撥資訊會自動alert出來，方便除錯

2、appId : 這個沒啥好說的微信的appId，不要和其他引數弄混就好，開發者工具可以查

3、timestamp : 時間戳，和生成簽名時候拼接的時間戳一樣

//js獲取當前時間戳
new Date().getTime();

4、nonceStr : 隨機的字串，這個倒是比較無所謂可以直接copy官網的Wm3WZYTPz0wzccnW，和時間戳一樣要和生成簽名時候拼接的一樣，而且在提交時候nonceStr變數名S要大寫

5、(重點，下面會詳細講)signature : 簽名， 由後臺返回的jsapi_ticket、剛才的隨機字串noncestr、剛才的時間戳timestamp、以及當前頁面的url拼接之後通過SHA1方式加密(js的SHA1加密網上一搜很多)

6、jsApiList : 要呼叫的SDK方法，官網可以查，這裡用的是掃碼功能

上面說的簽名是最容易出錯的地方，大部分出錯的地方在拼接的url上，不要誤解成回撥地址，這邊填寫的是當前頁面的地址，比如你在https://www.a.com呼叫這個配置，url上就要寫https://www.a.com，而且不需要對url進行轉碼，切記！博主這邊使用的vue-router跳轉,路由後面帶上#的，比如https://www.a.com/#/b,仍然是整個丟上去拼接，不進行任何轉碼！

重點來了，雖然這些步驟一步步走過來發現還是出現簽名錯誤，令人抓狂。最後細心發現拼接url和當前頁面url不一樣，由於博主使用了微信授權登入，需要通過appId進行回撥頁面獲取code，code會自動帶到/#/之間，比如通過微信授權登入獲取的code為aabbcc，state不帶任何引數，微信授權登入的回撥url為https://www.a.com/#/b(微信授權登入填寫的回撥url需要轉碼hash模式才能生效)，則訪問獲取code的頁面地址會變成https://www.a.com/code=aabbcc&state=#/b，這個時候如果你在微信JS-SDK配置簽名中的拼接的url就和他不一樣了，所以博主將code拿過來對簽名中拼接url重新進行修改，改成和當前頁面的地址一模一樣就成功了。

IOS問題，這種方法在安卓機中適用但是IOS又報簽名錯誤，原因還是Url不同，IOS貌似會把hash後面路由改成/的路由，比如你路由中預設將所有訪問根路徑的地址重定向到/login中(就是訪問當前域名的第一個路由頁面的路由地址)，此時你的配置url引數就寫死為https://www.a.com/code=aabbcc&state=#/login，就不用管當前頁面的url的

總結：簽名錯誤出現最多的地方還是url，安卓中一定要是當前頁面的url，IOS比較奇葩需要將拼接的url寫死成根路徑重定向的路由，還有就是獲取code的時候會放到hash中容易被人忽略。