如何正確的在項目中接入微信JS-SDK

溫夜瑯

2018年8月7日 10:11

如果你點進來，那么我相信你應該知道微信的JS-SDK可以用來做什么了。微信的官方文檔描述如下。

微信JS-SDK是微信公眾平臺面向網頁開發者提供的基于微信內的網頁開發工具包。

通過使用微信JS-SDK，網頁開發者可借助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃等微信特有的能力，為微信用戶提供更優質的網頁體驗。

通過使用微信的JS-SDK，你可以讓你網頁在微信內調用拍照、語音、支付、位置、掃一掃這些只能在微信內使用的功能。進過下面的步驟，一步一步的配置，就可以讓你正確的在項目中引入微信的JS-SDK。

引入微信的JS文件

微信的javascript文件的鏈接是： http://res.wx.qq.com/open/js/jweixin-1.2.0.js

但是只支持使用 AMD/CMD 標準模塊加載方法加載。于是我就在npm的官網上找到了發布后的js-sdk，支持CommonJS的引入方式。npm的地址在這里。可以在你的項目中使用如下命令安裝。

npm install weixin-js-sdk 復制代碼

安裝好后可以使用一下兩種方式進行引入。

/* 使用CommonJs規范引入 */ const wx = require('weixin-js-sdk'); /* 使用ES6模塊引入 */ import wx from 'weixin-js-sdk'; 復制代碼

為wx.config實現權限簽名算法

如果你按照大部分的教程來，他們會讓你使用wx.config注入，獲取權限。但是使用wx.config的前提是你必須要先實現權限簽名算法。而權限簽名算法的關鍵就是jsapi_ticket。關于jsapi_ticketm，官方的描述如下。

生成簽名之前必須先了解一下jsapi_ticket，jsapi_ticket是企業號號用于調用微信JS接口的臨時票據。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來獲取。由于獲取jsapi_ticket的api調用次數非常有限，頻繁刷新jsapi_ticket會導致api調用受限，影響自身業務，開發者必須在自己的服務全局緩存jsapi_ticket。

大概什么意思呢，看官方文檔可能有點懵。大概意思就是：你想用我的sdk？可以，我給你個2個小時有效期的調用憑證。這個憑證我每天發給你的次數有限，所以你要保存好，不然到時候再想要憑證，沒門。

這是通（很）俗（皮）的解釋。下面來點正常的解釋。想要獲取jsapi_ticket，你就需要向下面這個url:https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=ACCESS_TOKE發送Http GET請求，需要帶上兩個參數。access_token和type，如果你是獲取jsapi_ticket，那么type就是固定的，值為jsapi。就可以在返回里面拿到ticket。并且你需要在服務器端緩存返回拿到的ticket。這個ticket就是上面通俗解釋里的憑證，有效期兩個小時，此后前端所有需要用到ticket的地方，后端需要去判斷，如果ticket仍然沒有過期，就從緩存中取出返回給前端，如果失效，就再發一個GET接口，獲取后再存入緩存并且返回給前端。如果請求正常的話，會返回下列數據。

{     'errcode': 0,     'errmsg': 'ok',     'ticket': 'bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA',     'expires_in': 7200, } 復制代碼

拿到了jsapi_ticket之后，我們就可以開始進行權限簽名算法了。算法的流程如下。

這個邏輯需要在后端實現。為什么會在下文給出。將需要用到js-sdk頁面的url、以及jsapi_ticket、noncestr（隨機字符串）、timestamp（當前的時間戳）進行字典序排序，然后使用URL鍵值對的格式（即 key1=value1&key2=value2…）拼接成字符串string。然后將這個string使用sha1加密，得到的結果就是signature了。然后將signature、timestamp、nonceStr返回給前端，wx.config需要用到這些數據。然后將它們用這里需要特別注意一下，官方的注意文檔如下。

注意事項

簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。

簽名用的url必須是調用JS接口頁面的完整URL。

出于安全考慮，開發者必須在服務器端實現簽名的邏輯。

這里的官方文檔其實也沒有那么官方，其實就是告訴我們，實現上述簽名邏輯必須在服務器，以及noncestr和timestamp必須要和在服務器端簽名所使用的一致，還有就是調用微信js-sdk的頁面的url必須要跟服務端簽名所使用的url一致。所有在服務端可以直接從請求的header里面的referer獲取。

你把接口做好之后，只要能夠正確的返回signature、nonceStr、timestamp（有后端的更好，直接找他們要接口就好了），就可以愉快的進行下一步了。

通過config接口注入權限驗證配置

官方的描述如下。

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對于變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。

在進行了正確的微信javascript文件引入后（看上面）在頁面中調用如下代碼就可以注入權限驗證配置。下面是官方給的樣例代碼。

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

下面我給一個樣例數據。

// data就是上一步說的后端返回的那些數據，包含signature、nonceStr、timestamp const data = await getJsSDK(); wx.config({     debug: true,     appId: '你的appId',     timestamp: data.timestamp,     nonceStr: data.nonceStr,     signature: data.signature,     jsApiList: [       'onMenuShareTimeline', // 分享到朋友圈       'onMenuShareAppMessage', // 分享給朋友       'onMenuShareQQ',// 分享到QQ       'onMenuShareWeibo',// 分享到騰訊微博       'onMenuShareQZone',// 分享到QQ空間     ] }); 復制代碼

注入后的生命周期函數

在調用config后會有兩個結果，成（這）功（是）和（廢）失（話）敗。可以通過微信提供的兩個接口來進行事件回調。

wx.ready(function(){     // config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對于用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。 }); wx.error(function(res){     // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對于SPA可以在這里更新簽名。 }); 復制代碼

調用分享接口

在ready()中調用具體的分享接口。如分享到朋友圈、好友、QQ空間。代碼如下。我把接口的所有的鉤子函數都給了出來。其實常用的就只有的success和cancel。根據你個人的需求而定。

wx.ready(function(){   /* 分享到朋友圈 */   wx.onMenuShareTimeline({     title: '', // 分享標題     link: '', // 分享鏈接，該鏈接域名必須與當前企業的可信域名一致     imgUrl: '', // 分享圖標     success: function () {       // 用戶確認分享后執行的回調函數     },     cancel: function () {       // 用戶取消分享后執行的回調函數     },     trigger: function () {       // 監聽Menu中的按鈕點擊時觸發的方法     },     complete: function () {       // 接口調用完成時執行的回調函數，無論成功或失敗都會執行     },     fail: function () {       // 接口調用失敗時執行的回調函數     },   }); }); 復制代碼

微信官方文檔在這給了一個特別的提醒。

注意：不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回。

大概意思就是，不要嘗試在鉤子函數中動態的修改title啊link啊的值，因為分享是同步的操作，ajax的值返回回來的時候分享的操作已經結束了。比起這個，要注意的是link字段，它的域名必須要跟微信后臺配置的JS安全域域名一致，否則分享會失敗。到這為止，微信js-sdk的接入就完成了。還有問題可以直接留言或者聯系我。