1. 準(zhǔn)備工作
1.1 查看公眾號分享接口權(quán)限
要使用微信SDK必須要有經(jīng)過微信認(rèn)證的非個人服務(wù)號
登陸服務(wù)號后，在開發(fā)-》接口權(quán)限 查詢有沒有**分享**接口的權(quán)限
[image:45AC64AB-5536-4FDF-8382-DA42B464D5FD-21376-00003687F3F4D657/35B783F4-9CDA-47F4-9590-2A4285D5A723.png]
1.2 分享頁面的域名需ICP備案，服務(wù)端口號為80或43
1.3 用于分享顯示的圖片大小大于300*300
2. 公眾號管理員設(shè)置
2.1? 設(shè)置js安全域名
登陸公眾號后，在設(shè)置-》公眾號設(shè)置-》功能設(shè)置-》js接口安全域名
2.1.1 管理員添加頁面的域名
2.1.2 管理員下載驗證文件，開發(fā)人員上傳文件到域名指向的服務(wù)器根目錄
2.2 設(shè)置ip白名單
登陸公眾號后，在開發(fā)-》基本配置
2.2.1 提供appId, appSecret給開發(fā)人員，用于獲取access_token
2.2.2 將服務(wù)器ip地址添加到ip白名單中
正式公眾號每個自然月只能修改3次域名，并且每個接口的調(diào)用次數(shù)有限，所以測試環(huán)境下，可以注冊一個測試號用于測試
[image:93836452-7373-4808-A914-81CE1960220A-22465-000026824B30DE10/BF8111AA-87D5-442A-90A3-A2B92933318B.png]
點擊微信公眾平臺測試賬號，即生成測試號，測試號的調(diào)用接口次數(shù)可以無上限。
在js安全域名設(shè)置測試頁面的域名
[image:8A9DDF2B-0F0D-434D-82C7-7B8DB7EBE1CE-22465-00002A96DAAB3B99/695FA033-C02B-4A14-8F6F-6FD7180C15B9.png]
記錄測試號的appId和appSecret
測試號的接口調(diào)用需要先關(guān)注測試賬號，才能使用
3. 前端頁面配置
3.1. 引入js文件
在需要調(diào)用js接口的頁面引入如下文件
http://res.wx.qq.com/open/js/jweixin-1.2.0.js
生產(chǎn)環(huán)境如果是https, 必須用https
3.2. 通過config接口注入權(quán)限驗證配置
所有需要使用js-sdk的頁面需先注入配置信息，否則將無法使用，同一個url僅需調(diào)用一次
```
wx.config({
? ? debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
? ? appId: '', // 必填，公眾號的唯一標(biāo)識
? ? timestamp: , // 必填，生成簽名的時間戳
? ? nonceStr: '', // 必填，生成簽名的隨機串
? ? signature: '',// 必填，簽名
? ? jsApiList: [‘onMenuShareTimeline’,’onMenuShareAppMessage’] // 必填，需要使用的JS接口列表
});
```
分享相關(guān)js api
> onMenuShareTimeline 分享到朋友圈
> onMenuShareAppMessage 分享給朋友
> onMenuShareQQ 分享到qq
> onMenuShareWeibo 分享到微博
> onMenuShareQZone 分享打qq空間
我的代碼
```
wx.config({
debug: true,
appId: signInfo.appId,
timestamp: signInfo.timestamp,
nonceStr: signInfo.nonceStr,
signature: signInfo.signature,
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone']
});
```
appId, timestamp, nonceStr, signature前后端都要保持一致，所以都從后臺接口返回比較好
3.3. 通過ready接口處理成功驗證
wx.ready(function(){})
config是異步操作，頁面加載時就需要調(diào)用的接口需要在ready函數(shù)中來執(zhí)行，用戶觸發(fā)的接口可以直接調(diào)用，不需放在ready中
3.4. 通過error接口處理失敗驗證
wx.error(function(res){})
config信息驗證失敗回執(zhí)行error方法，spa可以在這里更新簽名
我的代碼
```
wx.error(function (res) {
console.log('微信認(rèn)證失敗: ',res.errMsg);
});
```
3.5. 獲取“分享到朋友圈”按鈕點擊狀態(tài)及自定義分享內(nèi)容接口
wx.onMenuShareTimeline({
? ? title: '', // 分享標(biāo)題
? ? link: '', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
? ? imgUrl: '', // 分享圖標(biāo)
? ? success: function () {
? ? // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
},
cancel: function () {
? ? // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
? ? }
});
我的代碼
```
wx.ready(function () {
wx.onMenuShareTimeline({
title: '辦人事，就上HR-X',
link: url,
imgUrl: 'https://bpic.588ku.com/back_pic/05/49/38/775ac8cbfa1e6e4.jpg',
});
wx.onMenuShareAppMessage({
title: '辦人事，就上HR-X',
desc: '最牛的人事App',
link: url,
imgUrl: 'https://bpic.588ku.com/back_pic/05/49/38/775ac8cbfa1e6e4.jpg',
})
});
```
4. 服務(wù)器簽名算法
出于安全和全局可用性考慮，簽名接口需在服務(wù)端實現(xiàn)，并且提供全局緩存。
微信官方給出了簽名算法各語言的版本
[微信簽名算法各語言版本](https://link.jianshu.com/?t=http://demo.open.weixin.qq.com/jssdk/sample.zip)
4.1 獲取access_token
獲取access_token需要公眾號的appId和appSecret
access_token是公眾號的全局唯一接口調(diào)用憑據(jù)，公眾號調(diào)用各接口都需要使用access_token, 有效期expire_in為2個小時，需在有效期內(nèi)定期刷新。每日限額2000次
https請求方式: GET
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
正常情況下，微信會返回下述JSON數(shù)據(jù)包給公眾號：
{"access_token":"ACCESS_TOKEN","expires_in":7200}
4.2 獲取jsapi_ticket
jsapi_ticket是公眾號用于調(diào)用微信JS接口的臨時票據(jù)，有效期為7200s，頻繁調(diào)用會導(dǎo)致api調(diào)用受限，獲取jsapi_ticket之后，需在自己的服務(wù)器全局緩存
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
4.3 生成簽名
參與簽名的字段包括有效的jsapi_ticket, noncestr（隨機字符串）, timestamp（時間戳）, url（當(dāng)前網(wǎng)頁的URL，不包含#及其后面部分）
對所有待簽名參數(shù)按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1
對string1作sha1加密，字段名和字段值都采用原始值，不進行URL 轉(zhuǎn)義
例如
```
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
noncestr=Wm3WZYTPz0wzccnW
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value
string1=jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW& timestamp =1414587457&url=http://mp.weixin.qq.com?params=value
signature = 0f9de62fce790f9a083d5c99e95740ceb90c27ed
```
注意事項
1.簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。
2.簽名用的url必須是調(diào)用JS接口頁面的完整URL不包括 ‘#’號部分，前端頁面調(diào)用接口時傳遞給后臺
3.出于安全考慮，開發(fā)者必須在服務(wù)器端實現(xiàn)簽名的邏輯。
5. 測試效果
測試以上配置是否生效，我們需要搭建測試環(huán)境
a. 測試公眾號
b. 可連接外網(wǎng)的后臺接口
c. 有外網(wǎng)可訪問域名的前端頁面
d. 微信web開發(fā)者工具
5.1 測試公眾號
同2.2中方法申請測試公眾號
5.2 可連接外網(wǎng)的后臺接口
后臺接口需要請求微信的token和ticket接口，所以需要訪問外網(wǎng)
接口部署在外網(wǎng)可訪問的服務(wù)器上
5.3 有外網(wǎng)可訪問域名的前端頁面
微信jssdk接口需要在公眾號設(shè)置js安全域名，如果是本機聯(lián)調(diào)，該域名就需要配置成本地服務(wù)的域名，但局域網(wǎng)內(nèi)的計算機，外網(wǎng)無法訪問，那就需要通過ngrok，實現(xiàn)內(nèi)網(wǎng)穿透
[ngrok - download](https://ngrok.com/download)
ngrok的安裝使用如下
[image:B724618A-2091-4AF7-956D-4B0B9AEE4C24-22465-00002C90AFB5B803/3981CEAE-C53B-4B0C-BB90-0C47540880C2.png]
不需要注冊直接跳過第3步就可以使用
使用步驟
在本地啟動web服務(wù)，如端口是3000(一般用戶不允許使用80端口，如果要使用80端口需要超級用戶)
運行./ngrok http 3000
待狀態(tài)是online 看看到映射后的域名
[image:1BE9FBF7-BA2F-4BD3-BFEE-A4776AEDA1E8-22465-00002D32F626B6D4/EB0C575A-A27D-4917-A641-C181BD3A43D7.png]
將該域名填到公眾號的js安全域名里
5.4 微信web開發(fā)者工具
pc瀏覽器無法模擬微信瀏覽器測試微信接口
可以通過手機瀏覽器掃碼打開上述地址測試，但不能查看日志和調(diào)試
另一種方式是使用微信開發(fā)者工具，模擬微信瀏覽器，又集成了chromedev調(diào)試工具，可以在電腦上直接打開網(wǎng)頁調(diào)試微信接口
微信開發(fā)者工具有兩個版本，一個版本只有web網(wǎng)頁調(diào)試功能，另一個版本集成了小程序調(diào)試和網(wǎng)頁調(diào)試的功能，推薦下載集成了小程序功能版本
[全新微信開發(fā)者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
[image:41214C28-4227-472A-BD2C-2A34BD5873A4-22465-00002E96DEE30993/25902EC9-CCE0-4C98-89DF-4E8B6ED5A755.png]
打開之后，選擇公眾號網(wǎng)頁項目，就可以打開帶有chromedev調(diào)試工具的微信瀏覽器了。
當(dāng)然這個瀏覽器相比chrome瀏覽器會慢很多
6. 彩蛋
最后，如果你能看到最后，送給大家一個彩蛋，一套前后端都已實現(xiàn)的源碼，下載代碼后，配置node,npm環(huán)境，替換代碼中的網(wǎng)頁域名，appId, appSecret, 在自己公眾號配置網(wǎng)頁域名，最后運行npm run start就可以啟動服務(wù)了，手機微信或微信開發(fā)者工具打開就可以查看效果。
[源碼地址](https://github.com/scarlettxu/wechat-signature)
7. 其他
實際項目中，按照文檔配置了，可能還會出問題，需要注意一下注意事項
7.1 注意事項
* url： 需要根據(jù)不同的頁面動態(tài)獲取，url不能進行encodeURIComponent，否則驗簽會失敗 url不能包括微信添加的’#‘后邊的部分，所以應(yīng)該處理為：window.location.href.split(‘‘)[0] 簽名用的url必須是調(diào)用JS接口頁面的完整URL。
* nonceStr、timestamp：應(yīng)該動態(tài)生成，而不能hardcode 簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同
* accesstoken：同調(diào)用微信其他接口的accesstoken，必須全局緩存，以免影響其他業(yè)務(wù)，即是說：微信所有業(yè)務(wù)應(yīng)該用同一個accesstoken去調(diào)用微信接口，而不能自己刷新accesstoken。
* ticket：同accesstoken一樣，必須全局緩存，方式很多，可以放到數(shù)據(jù)庫，或者放到緩存。目前ticket的有效時間為2小時，所以2小時內(nèi)ticket未過期時，不能重復(fù)獲取，否則可能導(dǎo)致ticket獲取次數(shù)超過限額，導(dǎo)致sign失敗
7.2 官方常見問題及處理辦法
1、invalid url domain
當(dāng)前頁面所在域名與使用的appid沒有綁定，請確認(rèn)正確填寫綁定的域名，如果使用了端口號，則配置的綁定域名也要加上端口號（一個appid可以綁定三個有效域名，見 目錄1.1.1）。
2、invalid signature簽名錯誤。
建議按如下順序檢查：
確認(rèn)簽名算法正確，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁面工具進行校驗。
確認(rèn)config中nonceStr（js中駝峰標(biāo)準(zhǔn)大寫S）, timestamp與用以簽名中的對應(yīng)noncestr, timestamp一致。
確認(rèn)url是頁面完整的url(請在當(dāng)前頁面alert(location.href.split(‘#’)[0])確認(rèn))，包括’http(s)://’部分，以及’？’后面的GET參數(shù)部分,但不包括 hash后面的部分。
確認(rèn) config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。
確保一定緩存access_token和jsapi_ticket。
確保你獲取用來簽名的url是動態(tài)獲取的，動態(tài)頁面可參見實例代碼中php的實現(xiàn)方式。 如果是html的靜態(tài)頁面在前端通過ajax將url傳到后臺簽名，前端需要用js獲取當(dāng)前頁面除去’#’hash部分的鏈接，獲取,而且需要encodeURIComponent），因為頁面一旦分享，微信客戶端會在你的鏈接末尾加入其它參數(shù)，如果不是動態(tài)獲取當(dāng)前鏈接，將導(dǎo)致分享后的頁面簽名失敗。
3、the permission value is offline verifying
這個錯誤是因為config沒有正確執(zhí)行，或者是調(diào)用的JSAPI沒有傳入config的jsApiList參數(shù)中。建議按如下順序檢查：
確認(rèn)config正確通過。
如果是在頁面加載好時就調(diào)用了JSAPI，則必須寫在wx.ready的回調(diào)中。
確認(rèn)config的jsApiList參數(shù)包含了這個JSAPI。
4、permission denied
該公眾號沒有權(quán)限使用這個JSAPI，或者是調(diào)用的JSAPI沒有傳入config的jsApiList參數(shù)中（部分接口需要認(rèn)證之后才能使用）。
5、function not exist
當(dāng)前客戶端版本不支持該接口，請升級到新版體驗。
6、為什么6.0.1版本config:ok，但是6.0.2版本之后不ok
因為6.0.2版本之前沒有做權(quán)限驗證，所以config都是ok，但這并不意味著你config中的簽名是OK的，請在6.0.2檢驗是否生成正確的簽名以保證config在高版本中也ok。
7、在iOS和Android都無法分享
請確認(rèn)公眾號已經(jīng)認(rèn)證，只有認(rèn)證的公眾號才具有分享相關(guān)接口權(quán)限，如果確實已經(jīng)認(rèn)證，則要檢查監(jiān)聽接口是否在wx.ready回調(diào)函數(shù)中觸發(fā)
8、服務(wù)上線之后無法獲取jsapi_ticket，自己測試時沒問題。
因為access_token和jsapi_ticket必須要在自己的服務(wù)器緩存，否則上線后會觸發(fā)頻率限制。請確保一定對token和ticket做緩存以減少2次服務(wù)器請求，不僅可以避免觸發(fā)頻率限制，還加快你們自己的服務(wù)速度。目前為了方便測試提供了1w的獲取量，超過閥值后，服務(wù)將不再可用，請確保在服務(wù)上線前一定全局緩存access_token和jsapi_ticket，兩者有效期均為7200秒，否則一旦上線觸發(fā)頻率限制，服務(wù)將不再可用。
9、uploadImage怎么傳多圖
目前只支持一次上傳一張，多張圖片需等前一張圖片上傳之后再調(diào)用該接口
10、沒法對本地選擇的圖片進行預(yù)覽
chooseImage接口本身就支持預(yù)覽，不需要額外支持
11、通過a鏈接(例如先通過微信授權(quán)登錄)跳轉(zhuǎn)到b鏈接，invalid signature簽名失敗
后臺生成簽名的鏈接為使用jssdk的當(dāng)前鏈接，也就是跳轉(zhuǎn)后的b鏈接，請不要用微信登錄的授權(quán)鏈接進行簽名計算，后臺簽名的url一定是使用jssdk的當(dāng)前頁面的完整url除去’#’部分
12、出現(xiàn)config:fail錯誤
這是由于傳入的config參數(shù)不全導(dǎo)致，請確保傳入正確的appId、timestamp、nonceStr、signature和需要使用的jsApiList
13、如何把jsapi上傳到微信的多媒體資源下載到自己的服務(wù)器
請參見文檔中uploadVoice和uploadImage接口的備注說明
14、Android通過jssdk上傳到微信服務(wù)器，第三方再從微信下載到自己的服務(wù)器，會出現(xiàn)雜音
微信團隊已經(jīng)修復(fù)此問題，目前后臺已優(yōu)化上線
15、綁定父級域名，是否其子域名也是可用的
是的，合法的子域名在綁定父域名之后是完全支持的
16、在iOS微信6.1版本中，分享的圖片外鏈不顯示，只能顯示公眾號頁面內(nèi)鏈的圖片或者微信服務(wù)器的圖片，已在6.2中修復(fù)
17、是否需要對低版本自己做兼容
jssdk都是兼容低版本的，不需要第三方自己額外做更多工作，但有的接口是6.0.2新引入的，只有新版才可調(diào)用
18、該公眾號支付簽名無效，無法發(fā)起該筆交易
請確保你使用的jweixin.js是官方線上版本，不僅可以減少用戶流量，還有可能對某些bug進行修復(fù)，拷貝到第三方服務(wù)器中使用，官方將不對其出現(xiàn)的任何問題提供保障，具體支付簽名算法可參考 JSSDK微信支付一欄
19、目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現(xiàn)web app的頁面會導(dǎo)致簽名失敗，此問題已在Android6.2中修復(fù)
20、uploadImage在chooseImage的回調(diào)中有時候Android會不執(zhí)行
Android6.2會解決此問題，若需支持低版本可以把調(diào)用uploadImage放在setTimeout中延遲100ms解決
21、require subscribe錯誤說明你沒有訂閱該測試號，該錯誤僅測試號會出現(xiàn)
22、getLocation返回的坐標(biāo)在openLocation有偏差
因為getLocation返回的是gps坐標(biāo)，openLocation打開的騰訊地圖為火星坐標(biāo)，需要第三方自己做轉(zhuǎn)換，6.2版本開始已經(jīng)支持直接獲取火星坐標(biāo)
23、查看公眾號（未添加）: “menuItem:addContact”不顯示
目前僅有從公眾號傳播出去的鏈接才能顯示，來源必須是公眾號
24、ICP備案數(shù)據(jù)同步有一天延遲，所以請在第二日綁定
8. 測試號和公眾號的差別
域名
公眾號域名必須備案，測試號域名不需備案
公眾號域名僅支持80端口，測試號域名支持端口號
公眾號域名所在服務(wù)器需要配置驗證文件，測試號不需要配置驗證文件
公眾號需要配置ip白名單才能調(diào)用token幾口，測試號不需要配置ip白明白
有端口號的域名一定要帶上端口號
