微信JSSdk實現分享功能

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接口列表
    });

簽名算法見文末的附錄1，全部JS接口列表見文末的附錄2

步驟四：經過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的生成流程

1. 獲取access_token

2. 使用獲取到的access_token獲取jsapi_ticket

3. 將排序後的參數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 。

1. 參考如下文檔獲取access_token（有效期7200秒，開發者必須在本身的服務全局緩存access_token）：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
2. 用第一步拿到的access_token採用http GET方式請求得到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&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

步驟2. 對string1進行sha1簽名，獲得signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事項

1. 簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。
2. 簽名用的url必須是調用JS接口頁面的完整URL。
3. 出於安全考慮，開發者必須在服務器端實現簽名的邏輯。

最終效果以下