1. 概述
微信分享服務器的作用是為用戶在微信瀏覽器端對來自網站以及客戶端的頁面進行二次分享鏈接時更友好的展示提供服務。為實現二次分享功能需要使用微信JS-SDK來開發.
微信
JS-SDK是微信公眾平台 面向網頁開發者提供的基於微信內的網頁開發工具包。微信JS-SDK功能很多。
通過使用微信JS-SDK，網頁開發者可借助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優質的網頁體驗。
2. 流程圖
3. 微信二次分享功能實現的具體步驟
步驟一：綁定域名(微信公眾平台配置)
先登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。
備注：登錄后可在“開發者中心”查看對應的接口權限。
需要配置白名單
步驟二：引入JS文件（需要分享的頁面）
在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js
如需進一步提升服務穩定性，當上述資源不可訪問時，可改訪問：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）。
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
步驟三：通過config接口注入權限驗證配置(微信分享服務器主要提供下面參數生成)
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名
jsApiList: [] // 必填，需要使用的JS接口列表
});
步驟四：通過ready接口處理成功驗證（待分享的頁面配置二次分享的頁面信息如標題，縮略圖，描述等）
wx.ready(function(){
// config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
# 分享到朋友圈按鈕點擊狀態及自定義分享內容
wx.onMenuShareTimeline({
title: '', // 分享標題
link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: '', // 分享圖標
success: function () {
// 用戶點擊了分享后執行的回調函數
}
});
# 分享到QQ按鈕點擊狀態及自定義分享內容
wx.onMenuShareQQ({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享鏈接
imgUrl: '', // 分享圖標
success: function () {
// 用戶確認分享后執行的回調函數
},
cancel: function () {
// 用戶取消分享后執行的回調函數
}
});
# 分享到騰訊微博按鈕點擊狀態及自定義分享內容
wx.onMenuShareWeibo({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享鏈接
imgUrl: '', // 分享圖標
success: function () {
// 用戶確認分享后執行的回調函數
},
cancel: function () {
// 用戶取消分享后執行的回調函數
}
});
# 分享到QQ空間按鈕點擊狀態及自定義分享內容
wx.onMenuShareQZone({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享鏈接
imgUrl: '', // 分享圖標
success: function () {
// 用戶確認分享后執行的回調函數
},
cancel: function () {
// 用戶取消分享后執行的回調函數
}
});
});
4. 如何提供權限驗證配置（微信分享服務器的業務功能）
即如下參數
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名
jsApiList: [] // 必填，需要使用的JS接口列表這里我們使用微信分享相關的js接口列表["checkJsApi","onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ","onMenuShareWeibo"]
});
下面主要說明signature的生成流程
-
獲取
access_token -
使用獲取到的
access_token獲取jsapi_ticket -
將排序后的參數URL鍵值對的格式（即
key1=value1&key2=value）拼接成字符串,sha1簽名，得到signature
4.1 獲取access_token
access_token是公眾號的全局唯一接口調用憑據，公眾號調用各接口時都需使用access_token。開發者需要進行妥善保存。access_token的存儲至少要保留512個字符空間。access_token的有效期目前為2個小時，需定時刷新，重復獲取將導致上次獲取的access_token失效。
接口調用請求說明
## https請求方式: GET
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
參數說明
| 參數 | 是否必須 | 說明 |
|---|---|---|
grant_type |
是 | 獲取access_token填寫client_credential |
appid |
是 | 第三方用戶唯一憑證 |
secret |
是 | 第三方用戶唯一憑證密鑰，即appsecret |
返回說明
正常情況下，微信會返回下述JSON數據包給公眾號：
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200
}
參數說明
| 參數 | 說明 |
|---|---|
access_token |
獲取到的憑證 |
expires_in |
憑證有效時間，單位：秒 |
4.2 獲取jsapi_ticket
jsapi_ticket是公眾號用於調用微信JS接口的臨時票據。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來獲取。由於獲取jsapi_ticket的api調用次數非常有限，頻繁刷新jsapi_ticket會導致api調用受限，影響自身業務，開發者必須在自己的服務全局緩存jsapi_ticket。
- 參考以下文檔獲取
access_token（有效期7200秒，開發者必須在自己的服務全局緩存access_token）：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html - 用第一步拿到的
access_token采用httpGET方式請求獲得jsapi_ticket（有效期7200秒，開發者必須在自己的服務全局緩存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
成功返回如下JSON：
{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}
獲得jsapi_ticket之后，就可以生成JS-SDK權限驗證的簽名了。
4.3 生成簽名
簽名生成規則如下：參與簽名的字段包括noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前待分享網頁URL，不包含#及其后面部分） 。對所有待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1。這里需要注意的是所有參數名均為小寫字符。對string1作sha1加密，字段名和字段值都采用原始值，不進行URL 轉義。
即signature=sha1(string1)。 示例：
noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=當前待分享網頁URL
步驟1. 對所有待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1：
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
步驟2. 對string1進行sha1簽名，得到signature：
0f9de62fce790f9a083d5c99e95740ceb90c27ed
注意事項
- 簽名用的
noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。 - 簽名用的
url必須是調用JS接口頁面的完整URL。 - 出於安全考慮，開發者必須在服務器端實現簽名的邏輯。
最終效果如下
