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