在微信里調(diào)用掃碼功能，文檔很簡單，但是發(fā)現(xiàn)了一些坑
先給一些資料
微信文檔：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
簽名驗證：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
JS-SDK使用權限簽名算法
jsapi_ticket
生成簽名之前必須先了解一下jsapi_ticket，jsapi_ticket是公眾號用于調(diào)用微信JS接口的臨時票據(jù)。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來獲取。由于獲取jsapi_ticket的api調(diào)用次數(shù)非常有限，頻繁刷新jsapi_ticket會導致api調(diào)用受限，影響自身業(yè)務，開發(fā)者必須在自己的服務全局緩存jsapi_ticket 。
參考以下文檔獲取access_token（有效期7200秒，開發(fā)者必須在自己的服務全局緩存access_token）：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
用第一步拿到的access_token 采用http GET方式請求獲得jsapi_ticket（有效期7200秒，開發(fā)者必須在自己的服務全局緩存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
成功返回如下JSON：
{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}
獲得jsapi_ticket之后，就可以生成JS-SDK權限驗證的簽名了。
簽名算法
簽名生成規(guī)則如下：參與簽名的字段包括noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網(wǎng)頁的URL，不包含#及其后面部分） 。對所有待簽名參數(shù)按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1。這里需要注意的是所有參數(shù)名均為小寫字符。對string1作sha1加密，字段名和字段值都采用原始值，不進行URL 轉義。
即signature=sha1(string1)。 示例：
noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value
步驟1. 對所有待簽名參數(shù)按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1：
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
步驟2. 對string1進行sha1簽名，得到signature：
0f9de62fce790f9a083d5c99e95740ceb90c27ed
注意事項
簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。
簽名用的url必須是調(diào)用JS接口頁面的完整URL。
出于安全考慮，開發(fā)者必須在服務器端實現(xiàn)簽名的邏輯。
如出現(xiàn)invalid signature 等錯誤詳見附錄5常見錯誤及解決辦法。
調(diào)用Api:wx.config出現(xiàn)invalid signature
上面微信的加密規(guī)則，這里最大的一個坑就是url，很多網(wǎng)友的url都是通過window.location.href.split('#')[0]獲取的，然后就用來加密了，很可能出現(xiàn)簽名無效的情況
- url可能有特殊字符或者什么的，使用encodeURIComponent，后臺去解析
- 傳給后臺加密的url，跟你發(fā)布H5在微信點進去的鏈接要是一樣的，這是最重要的一條，就假如你公眾號的鏈接是http://xx.xxx.com/H5，那你加密的url也應該是是http://xx.xxx.com/H5
下面是我寫的一個js文件，導入就可以使用了
let urlEn = encodeURIComponent(window.location.href.split('#')[0])
this.$httpUtil.httpRequest.request({
url: this.$httpUtil.httpUrl.getWXConfig,
data: {
url: urlEn
}
}).then(res => {
getApp().globalData.dLog('getWXConfig=====', res.data)
wxScan.wxJSAPIInit(res.data)
})
// wxScan.js
let wxScan = {}
wxScan.wxJSAPIInit = function(wxData) {
return new Promise((success, fail) => {
const wx = require('./jweixin-module.js')
wx.config({
debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: wxData.app_id, // 必填，企業(yè)號的唯一標識，此處填寫企業(yè)號corpid
timestamp: wxData.timestamp, // 必填，生成簽名的時間戳
nonceStr: wxData.nonce_str, // 必填，生成簽名的隨機串
signature: wxData.signature, // 必填，簽名
jsApiList: [
'scanQRCode',
]
})
wx.ready(function() {
wx.checkJsApi({
jsApiList: ['scanQRCode'], // 需要檢測的JS接口列表，所有JS接口列表見附錄2,
success: function(res) {
// 以鍵值對的形式返回，可用的api值true，不可用為false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
});
wx.error(function(res){
});
});
};
wxScan.wxJSAPIScan = function(wxData) {
return new Promise((success, fail) => {
const wx = require('./jweixin-module.js')
wx.ready(function() {
wx.scanQRCode({
needResult: 1, // 默認為0，掃描結果由微信處理，1則直接返回掃描結果，
scanType: ["qrCode", "barCode"], // 可以指定掃二維碼還是一維碼，默認二者都有
success: function(res) {
console.log('res=========>', res);
var result = res.resultStr; // 當needResult 為 1 時，掃碼返回的結果
// this.parsePrintKey(result, index)
success(result)
}
});
});
});
}
export default wxScan
