流程

關於流程，在上一篇中已經有圖介紹:

微信文件

JSSDK使用步驟

首先確保已經獲取了相關許可權

步驟一：繫結域名

先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。
備註：登入後可在“開發者中心”檢視對應的介面許可權。

這裡的安全域名沒設定，會報簽名許可權的問題。

步驟二：引入JS檔案

步驟三：通過config介面注入許可權驗證配置

所有需要使用JS-SDK的頁面必須先注入配置資訊，否則將無法呼叫，同一個url僅需呼叫一次。

步驟四：通過ready介面處理成功驗證

wx.ready(function(){
// config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，則須把相關介面放在ready函式中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。
});

步驟五：通過error介面處理失敗驗證

wx.error(function(res){
// config資訊驗證失敗會執行error函式，如簽名過期導致驗證失敗，具體錯誤資訊可以開啟config的debug模式檢視，也可以在返回的res引數中檢視，對於SPA可以在這裡更新簽名。
});

介面呼叫說明

所有介面通過wx物件(也可使用jWeixin物件)來呼叫，引數是一個物件，除了每個介面本身需要傳的引數之外，還有以下通用引數：
1.success：介面呼叫成功時執行的回撥函式。
2.fail：介面呼叫失敗時執行的回撥函式。
3.complete：介面呼叫完成時執行的回撥函式，無論成功或失敗都會執行。
4.cancel：使用者點選取消時的回撥函式，僅部分有使用者取消操作的api才會用到。
5.trigger: 監聽Menu中的按鈕點選時觸發的方法，該方法僅支援Menu中的相關介面。
備註：不要嘗試在trigger中使用ajax非同步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回。

後臺開發流程

1. 開啟sample/node/package.json 找到dependencies欄位，裡面引入的是 “jssha”: “^1.5.0” 模組
2. 在我們自己的node後臺專案裡面的package.json的dependencies欄位 新增 “jssha”: “^1.5.0” 然後執行npm install 引入此模組
3. 複製sample/node目錄下面的sign.js檔案到自己的node後臺專案裡面
   後臺程式碼：

/*
 * 客戶端獲取簽名  
 * 引數： 當前網頁的URL，不包含#及其後面部分
 */
router.get('/mp/signature', function
 
(req, res, next) {
    var param = req.query || req.params; 
    var urlstr = param.urlstr;
    var url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + wxConfig.AppID + '&secret=' + wxConfig.Secret;
    request(url, function (error, response, token_body) {
        if (!error && response.statusCode == 200) {
            var token_data = JSON.parse(token_body); 
            var ticketurl = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + token_data.access_token + '&type=jsapi';
            request(ticketurl, function (error, response, ticket_body) {
                if (!error && response.statusCode == 200) {
                    var ticket_data = JSON.parse(ticket_body); 
                    var ret = sign(ticket_data.ticket,ticketurl);
                    ret.appID = wxConfig.AppID; // 把AppID也一起返回給前臺
                    res.end(JSON.stringify(ret));
                }
            })
        }
    })
});

這裡前臺在呼叫signature這個介面後，在ajax的成功回撥裡面配置微信JS-SDK就好了。
前臺程式碼

function getSignature(locUrl){
    $.ajax({
        url: 'https://www.hgdqdev.cn/mp/signature',
        data:{
            urlstr: locUrl.split('#')[0]
        },
        dataType: 'json', //伺服器返回json格式資料
        type: 'get', //HTTP請求型別
        timeout: 10000, //超時時間設定為10秒；
        success: function(res) {
            wxConfig(res);
        },
        error: function(xhr, type, errorThrown) {
            alert('網路連線失敗，請檢查網路。');
        }
    });
}
// 微信配置
function wxConfig(res){
    wx.config({
        debug: false, 
        appId: res.appID, 
        timestamp: res.timestamp, 
        nonceStr:  res.nonceStr, 
        signature:  res.signature,
        jsApiList: ['onMenuShareTimeline',   // 分享朋友圈
                    'onMenuShareAppMessage'] // 分享好友
    });
    wx.ready(function(){
        // config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，則須把相關介面放在ready函式中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。
        // 分享到朋友圈
        wx.onMenuShareTimeline({
            title: '', // 分享標題
            link: '', // 分享連結
            imgUrl: '', // 分享圖示
            success: function () { 
                // 使用者確認分享後執行的回撥函式
            },
            cancel: function () { 
                // 使用者取消分享後執行的回撥函式
            }
        });
        // 分享給朋友
        wx.onMenuShareAppMessage({
            title: '', // 分享標題
            desc: '', // 分享描述
            link: '', // 分享連結
            imgUrl: '', // 分享圖示
            type: '', // 分享型別,music、video或link，不填預設為link
            dataUrl: '', // 如果type是music或video，則要提供資料鏈接，預設為空
            success: function () { 
                // 使用者確認分享後執行的回撥函式
            },
            cancel: function () { 
                // 使用者取消分享後執行的回撥函式
            }
        });
    });
    wx.error(function(res){
            // config資訊驗證失敗會執行error函式，如簽名過期導致驗證失敗，具體錯誤資訊可以開啟config的debug模式檢視，也可以在返回的res引數中檢視，對於SPA可以在這裡更新簽名。
    });
}

如果我們需要修改動態的修改微信分享的內容時：請注意介面呼叫說明–備註裡面的說明。
我的解決辦法是什麼時候需要修改分享內容就再呼叫一次getSignature()一次方法，在呼叫這個方法之前就設定好分享內容。
但是這樣就有一個問題，如果使用者分享了，但是網路請求還沒請求成功就尷尬了。O(∩_∩)O~。
所以我覺的我們可以儲存方法getSignature()獲取的簽名資料，在需要修改分享內容時，再次呼叫wxConfig(),傳入儲存的資料即可。

最後

微信網頁開發–分享介面，的介紹就完了，其實開發起來不算難。關於最後動態設定分享內容的部分，也是踩坑之後才知道的，這個問題也解決了。微信JS-SDK有很多內容，但是基本的操作流程是大致一樣的。