摘要：進(jìn)過(guò)下面的步驟，一步一步的配置，就可以讓你正確的在項(xiàng)目中引入微信的。在進(jìn)行了正確的微信文件引入后看上面在頁(yè)面中調(diào)用如下代碼就可以注入權(quán)限驗(yàn)證配置?？梢酝ㄟ^(guò)微信提供的兩個(gè)接口來(lái)進(jìn)行事件回調(diào)。到這為止，微信的接入就完成了。

如果你點(diǎn)進(jìn)來(lái)，那么我相信你應(yīng)該知道微信的JS-SDK可以用來(lái)做什么了。微信的官方文檔描述如下。

微信JS-SDK是微信公眾平臺(tái)面向網(wǎng)頁(yè)開(kāi)發(fā)者提供的基于微信內(nèi)的網(wǎng)頁(yè)開(kāi)發(fā)工具包。
通過(guò)使用微信JS-SDK，網(wǎng)頁(yè)開(kāi)發(fā)者可借助微信高效地使用拍照、選圖、語(yǔ)音、位置等手機(jī)系統(tǒng)的能力，同時(shí)可以直接使用微信分享、掃一掃等微信特有的能力，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁(yè)體驗(yàn)。

通過(guò)使用微信的JS-SDK，你可以讓你網(wǎng)頁(yè)在微信內(nèi)調(diào)用拍照、語(yǔ)音、支付、位置、掃一掃這些只能在微信內(nèi)使用的功能。進(jìn)過(guò)下面的步驟，一步一步的配置，就可以讓你正確的在項(xiàng)目中引入微信的JS-SDK。

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

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

npm install weixin-js-sdk

安裝好后可以使用一下兩種方式進(jìn)行引入。

/* 使用CommonJs規(guī)范引入 */
const wx = require("weixin-js-sdk");

/* 使用ES6模塊引入 */
import wx from "weixin-js-sdk";

如果你按照大部分的教程來(lái)，他們會(huì)讓你使用wx.config注入，獲取權(quán)限。但是使用wx.config的前提是你必須要先實(shí)現(xiàn)權(quán)限簽名算法。而權(quán)限簽名算法的關(guān)鍵就是jsapi_ticket。關(guān)于jsapi_ticketm，官方的描述如下。

生成簽名之前必須先了解一下jsapi_ticket，jsapi_ticket是企業(yè)號(hào)號(hào)用于調(diào)用微信JS接口的臨時(shí)票據(jù)。正常情況下，jsapi_ticket的有效期為7200秒，通過(guò)access_token來(lái)獲取。由于獲取jsapi_ticket的api調(diào)用次數(shù)非常有限，頻繁刷新jsapi_ticket會(huì)導(dǎo)致api調(diào)用受限，影響自身業(yè)務(wù)，開(kāi)發(fā)者必須在自己的服務(wù)全局緩存jsapi_ticket。

大概什么意思呢，看官方文檔可能有點(diǎn)懵。大概意思就是：你想用我的sdk？可以，我給你個(gè)2個(gè)小時(shí)有效期的調(diào)用憑證。這個(gè)憑證我每天發(fā)給你的次數(shù)有限，所以你要保存好，不然到時(shí)候再想要憑證，沒(méi)門(mén)。

這是通（很）俗（皮）的解釋。下面來(lái)點(diǎn)正常的解釋。想要獲取jsapi_ticket，你就需要向下面這個(gè)url:https://qyapi.weixin.qq.com/c... GET請(qǐng)求，需要帶上兩個(gè)參數(shù)。access_token和type，如果你是獲取jsapi_ticket，那么type就是固定的，值為jsapi。就可以在返回里面拿到ticket。并且你需要在服務(wù)器端緩存返回拿到的ticket。這個(gè)ticket就是上面通俗解釋里的憑證，有效期兩個(gè)小時(shí)，此后前端所有需要用到ticket的地方，后端需要去判斷，如果ticket仍然沒(méi)有過(guò)期，就從緩存中取出返回給前端，如果失效，就再發(fā)一個(gè)GET接口，獲取后再存入緩存并且返回給前端。如果請(qǐng)求正常的話，會(huì)返回下列數(shù)據(jù)。

{
    "errcode": 0,
    "errmsg": "ok",
    "ticket": "bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
    "expires_in": 7200,
}

拿到了jsapi_ticket之后，我們就可以開(kāi)始進(jìn)行權(quán)限簽名算法了。算法的流程如下。

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

注意事項(xiàng)

簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。
簽名用的url必須是調(diào)用JS接口頁(yè)面的完整URL。
出于安全考慮，開(kāi)發(fā)者必須在服務(wù)器端實(shí)現(xiàn)簽名的邏輯。

這里的官方文檔其實(shí)也沒(méi)有那么官方，其實(shí)就是告訴我們，實(shí)現(xiàn)上述簽名邏輯必須在服務(wù)器，以及noncestr和timestamp必須要和在服務(wù)器端簽名所使用的一致，還有就是調(diào)用微信js-sdk的頁(yè)面的url必須要跟服務(wù)端簽名所使用的url一致。所有在服務(wù)端可以直接從請(qǐng)求的header里面的referer獲取。

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

官方的描述如下。

所有需要使用JS-SDK的頁(yè)面必須先注入配置信息，否則將無(wú)法調(diào)用（同一個(gè)url僅需調(diào)用一次，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來(lái)實(shí)現(xiàn)web app的頁(yè)面會(huì)導(dǎo)致簽名失敗，此問(wèn)題會(huì)在Android6.2中修復(fù)）。

在進(jìn)行了正確的微信javascript文件引入后（看上面）在頁(yè)面中調(diào)用如下代碼就可以注入權(quán)限驗(yàn)證配置。下面是官方給的樣例代碼。

wx.config({
    debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
    appId: "", // 必填，企業(yè)號(hào)的唯一標(biāo)識(shí)，此處填寫(xiě)企業(yè)號(hào)corpid
    timestamp: , // 必填，生成簽名的時(shí)間戳
    nonceStr: "", // 必填，生成簽名的隨機(jī)串
    signature: "",// 必填，簽名，見(jiàn)附錄1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2
});

下面我給一個(gè)樣例數(shù)據(jù)。

// data就是上一步說(shuō)的后端返回的那些數(shù)據(jù)，包含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空間
    ]
});

在調(diào)用config后會(huì)有兩個(gè)結(jié)果，成（這）功（是）和（廢）失（話）敗?？梢酝ㄟ^(guò)微信提供的兩個(gè)接口來(lái)進(jìn)行事件回調(diào)。

wx.ready(function(){
    // config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來(lái)確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
});

wx.error(function(res){
    // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。
});

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

wx.ready(function(){
  /* 分享到朋友圈 */
  wx.onMenuShareTimeline({
    title: "", // 分享標(biāo)題
    link: "", // 分享鏈接，該鏈接域名必須與當(dāng)前企業(yè)的可信域名一致
    imgUrl: "", // 分享圖標(biāo)
    success: function () {
      // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
    },
    cancel: function () {
      // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
    },
    trigger: function () {
      // 監(jiān)聽(tīng)Menu中的按鈕點(diǎn)擊時(shí)觸發(fā)的方法
    },
    complete: function () {
      // 接口調(diào)用完成時(shí)執(zhí)行的回調(diào)函數(shù)，無(wú)論成功或失敗都會(huì)執(zhí)行
    },
    fail: function () {
      // 接口調(diào)用失敗時(shí)執(zhí)行的回調(diào)函數(shù)
    },
  });
});

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

注意：不要嘗試在trigger中使用ajax異步請(qǐng)求修改本次分享的內(nèi)容，因?yàn)榭蛻舳朔窒聿僮魇且粋€(gè)同步操作，這時(shí)候使用ajax的回包會(huì)還沒(méi)有返回。

大概意思就是，不要嘗試在鉤子函數(shù)中動(dòng)態(tài)的修改title啊link啊的值，因?yàn)榉窒硎峭降牟僮?，ajax的值返回回來(lái)的時(shí)候分享的操作已經(jīng)結(jié)束了。比起這個(gè)，要注意的是link字段，它的域名必須要跟微信后臺(tái)配置的JS安全域域名一致，否則分享會(huì)失敗。到這為止，微信js-sdk的接入就完成了。還有問(wèn)題可以直接留言或者聯(lián)系我。

最后還需要注意一點(diǎn)的是，如果頁(yè)面的url發(fā)生了變化，在新的url下調(diào)用js-sdk一定要再調(diào)用一次簽名接口，用新的url再進(jìn)行一次簽名，否則會(huì)調(diào)用不成功。

微信官方文檔地址在 這里

歡迎光臨 個(gè)人博客