寫過了兩個微信的頁面，遇到了挺多不會的問題，當時也是自己邊查資料，邊實踐完成了簡單的需求，剛好現在有空，把之前的東西整理一遍。

與普通的手機頁面不同的是，微信頁面提供給你了調用微信APP內置功能的接口，可以實現更復雜的功能。

jssdk的前端使用

前端頁面調用jssdk首先要通綁定“公眾號設置”的“功能設置”里填寫“JS接口安全域名”

然后在頁面中引入

調用 wx.config({...}) 來驗證權限配置

然后可根據需要 調用微信所提供的接口

后端返回接口

在前端調用時wx.config({...})中需要的參數需要我們自己進行返回

wx.config({ debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。 appId: '', // 必填，公眾號的唯一標識 timestamp: , // 必填，生成簽名的時間戳 nonceStr: '', // 必填，生成簽名的隨機串 signature: '',// 必填，簽名 jsApiList: [] // 必填，需要使用的JS接口列表 });

其中 timestamp , nonceStr, signature,是需要后端計算返回的。

簽名獲取方法

簽名生成規則如下：參與簽名的字段包括noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其后面部分） 。對所有待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1。這里需要注意的是所有參數名均為小寫字符。對string1作sha1加密，字段名和字段值都采用原始值，不進行URL 轉義。

而其中的 jsapi_ticket 是通過 access_token 來獲取的，且兩者都有過期時間（7200秒）其中 jsapi_ticket 更是限制了獲取次數。所以為了保存兩者，使用redis數據庫保存在內存中是個很好的選擇（可快速讀取，并設置過期時間）。

token獲取方法：

/** * 獲取token * @return {promise} res 值為token */ function getToken () { return redis.getVal('token') // 首先讀取 redis 是否存在token .then(function (res) { if (res === null) { // 若不存在，則返回savetoken() 獲取 // console.log('不存在token 調用saveToken') return saveToken () } else { // 若存在 則直接返回 // console.log('存在token 直接返回') return res } }) .catch(function (err) { // 捕獲 錯誤 console.log(err) }) } /** * 從服務端獲取token 并保存在redis中 * @return {promise} 值 為 token */ function saveToken () { return new Promise((resolve, reject) => { let reqUrl = config.gettoken_url // https://api.weixin.qq.com/cgi-bin/token? let params = { grant_type: 'client_credential', appid: config.appid, secret: config.appsecret } let options = { method: 'get', url: reqUrl + qs.stringify(params) } request(options, function (err, res, body) { if (res) { let bodys = JSON.parse(body) let expires = bodys.expires_in let token = bodys.access_token redis.setKey('token', token, expires) // 將token 保存到 redis .catch(function (err) { console.log(err) }) resolve(token) } else { reject(err) } }) }) }

在配置文件中配置好所需要的appid和appsecret，首先查看redis中是否存在，如果存在就直接返回，沒有的話，就調用saveToken去獲取并保存在redis中

jsapi_ticket 獲取方法

同理，jsapi_ticket 也采用同樣的方式去獲取

/** * 獲取ticket * @return {promise} res 值為ticket */ function getJsTicket() { // 獲取token return redis.getVal('ticket') // 首先讀取 redis 是否存在ticket .then(function (res) { if (res === null) { // 若不存在，則返回saveJsTicket() 獲取 // console.log('不存在ticket 調用saveJsTicket') return saveJsTicket () } else { // 若存在 則直接返回 // console.log('存在ticket 直接返回') return res } }) .catch(function (err) { // 捕獲 錯誤 console.log(err) }) } /** * 從服務端獲取ticket 并保存在redis中 * @return {promise} 值 為 ticket */ function saveJsTicket () { return new Promise((resolve, reject) => { getToken().then(function (token) { let reqUrl = config.ticket_start + token + config.ticket_end let options = { method: 'get', url: reqUrl } request(options, function (err, res, body) { if (res) { let bodys = JSON.parse(body) // 解析微信服務器返回的 let ticket = bodys.ticket // 獲取 ticket let expires = bodys.expires_in // 獲取過期時間 redis.setKey('ticket', ticket, expires) // 將ticket 保存到 redis .catch(function (err) { console.log(err) }) resolve(ticket) } else { reject(err) } }) }).catch(function (err) { console.log(err) }) }) }

簽名算法

在獲取jsapi_ticket后就可以生成JS-SDK權限驗證的簽名了