如何正確的在專案中接入微信JS SDK

但是只支援使用 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的前提是你必須要先實現許可權簽名演算法。而許可權簽名演算法的關鍵就是jsapi_ticket。關於jsapi_ticketm，官方的描述如下。

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

這是通（很）俗（皮）的解釋。下面來點正常的解釋。想要獲取jsapi_ticket，你就需要向下面這個url:傳送http get請求，需要帶上兩個引數。access_token和type，如果你是獲取jsapi_ticket，那麼type就是固定的，值為jsapi。就可以在返回裡面拿到ticket。並且你需要在伺服器端快取返回拿到的ticket。這個ticket就是上面通俗解釋裡的憑證，有效期兩個小時，此後前端所有需要用到ticket的地方，後端需要去判斷，如果ticket仍然沒有過期，就從快取中取出返回給前端，如果失效，就再發乙個get介面，獲取後再存入快取並且返回給前端。如果請求正常的話，會返回下列資料。

拿到了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。

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

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

官方的描述如下。

wx.config();

下面我給乙個樣例資料。

// data就是上一步說的後端返回的那些資料，包含signature、noncestr、timestamp
const data = await getjssdk();
wx.config();

wx.ready(function());
wx.error(function(res));

wx.ready(function(),
cancel: function () ,
trigger: function () ,
complete: function () ,
fail: function () ,
});});

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

最後還需要注意一點的是，如果頁面的url發生了變化，在新的url下呼叫js-sdk一定要再呼叫一次簽名介面，用新的url再進行一次簽名，否則會呼叫不成功。

如何正確的在專案中接入微信JS SDK

如何正確的在專案中接入微信JS SDK

如何正確的在專案中接入微信JS SDK

在專案中接入微信JS SDK你所需要知道的所有細節

相關推薦