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

微信JS-SDK的功能

若是你點進來，那麼我相信你應該知道微信的JS-SDK能夠用來作什麼了。微信的官方文檔描述以下。

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

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

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

引入微信的JS文件

微信的javascript文件的連接是： res.wx.qq.com/open/js/jwe…

可是隻支持使用 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:qyapi.weixin.qq.com/cgi-bin/get… 發送HttpGET請求。這個url是企業號的請求地址，若是你是我的，則須要請求：api.weixin.qq.com/cgi-bin/tic… 這個地址，須要帶上兩個參數，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須要用到這些數據。而後將它們用這裏須要特別注意一下，官方的注意文檔以下。

注意事項

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

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

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

這裏的官方文檔其實也沒有那麼官方，其實就是告訴咱們，實現上述簽名邏輯必須在服務器，以及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的接入就完成了。還有問題能夠直接留言或者聯繫我。

寫在後面

最後還須要注意一點的是，若是頁面的url發生了變化，在新的url下調用js-sdk必定要再調用一次簽名接口，用新的url再進行一次簽名，不然會調用不成功。

微信官方文檔地址在 這裏

歡迎光臨 我的博客