微信服務號內容分享和自定義分享

之前的文章后台通過useragent判斷用戶是否從手機端訪問頁面，公司申請了微信服務號，基礎功能完成之后，發現一個問題就是服務號中所有右上角中點擊之后可以分享到朋友圈，發送給朋友，分享到QQ，最開始想的辦法是隱藏。不過后來發現大多數的公共賬號並沒有隱藏，只是在分享的時候修改跳轉鏈接。如果沒有做過微信開發估計需要思考一下，不用很久你就知道有一個插件叫微信JS-SDK。

開發步驟

微信JS-SDK使用起來很方便，不過大多數的時候我們耗費的時候是在config上面，服務端的Access_Token和JS_Ticket保存當然也是必要的步驟，以下步驟是個人根據實際開發總結的步驟，可根據個人習慣自行安排。

①在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js，請注意，如果你的頁面啟用了https，務必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否則將無法在iOS9.0以上系統中成功使用JSSDK；（官方）

②獲取Access_Token，https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET，其中APPID和APPSECRET是微信公共號的ID和密鑰，有效期為7200s.

③通過獲取的Access_Token然后獲取生成簽名之前需要先獲取jsapi_ticket，jsapi_ticket是公眾號用於調用微信JS接口的臨時票據https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi；

④由於Access_Token和JSjsapi_ticket有效期都是兩個小時，每天都有一定的次數限制，因為請自行在獲取Access_Token和Ticket之后保存在自己的數據庫中，方便測試也方便上線，同時需要定時刷新Access_Token和Ticket；

⑤根據配置文件中的參數信息配置參數，appId不需要解釋，就是簽名比較難搞定，對所有待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1，然后對string1進行sha1簽名，可以獲取簽名:

wx.config({
    debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
    appId: '', // 必填，公眾號的唯一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});

 簽名參數順序如下所示:

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

 ⑥登錄公共號平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。

⑦將所有的操作都放在wx.ready中執行:

wx.ready(function(){

    // config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
});

 開發歷程

①如果單純只是開發步驟稍微都湊點字數和圖片也能搞成一篇文章，不過程序猿還是務實點比較好，對於上面的步驟你有可能有迷惑的地方，有不理解的地方，比較重點的問題是關於config的參數的形式，代碼參考如下:

var jsSHA = require('jssha');

var createNonceStr = function() {
    return Math.random().toString(36).substr(2, 15);
};

var createTimestamp = function() {
    return parseInt(new Date().getTime() / 1000) + '';
};

var raw = function(args) {
    var keys = Object.keys(args);
    keys = keys.sort();
    var newArgs = {};
    keys.forEach(function(key) {
        newArgs[key.toLowerCase()] = args[key];
    });

    var string = '';
    for (var k in newArgs) {
        string += '&' + k + '=' + newArgs[k];
    }
    string = string.substr(1);
    return string;
};

/**
 * 傳入Ticket和Url，Url應該是在配置的域名之下
 * 
 * @returns
 */
var sign = function(jsapi_ticket, url) {
    var ret = {
        jsapi_ticket: jsapi_ticket,
        nonceStr: createNonceStr(),
        timestamp: createTimestamp(),
        url: url
    };

    var string = raw(ret);
    shaObj = new jsSHA("SHA-1", "TEXT");
    shaObj.update(string);
    ret.signature = shaObj.getHash("HEX");
    return ret;
};

exports.sign = sign;

 需要jssha進行sha-1簽名，如果不了解可以參考一下官網，最新版本是2.0.2；

②關於定時刷新本人使用的node-schedule，當然也可以使用later，代碼參考如下:

exports.tokenSchedule = function() {
    var rule = new schedule.RecurrenceRule();
    rule.minute=0;
    var job = schedule.scheduleJob(rule, function() {　　
        // 刷新
    });
};

 ③自定義分享代碼參考如下:

  wx.config({
        debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
        appId: '<%=appId%>', // 必填，公眾號的唯一標識
        timestamp: '<%=timestamp%>', // 必填，生成簽名的時間戳
        nonceStr: '<%=nonceStr%>', // 必填，生成簽名的隨機串
        signature: '<%=signature%>', // 必填，簽名，見附錄1
        jsApiList: ['hideOptionMenu', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
    });
    wx.ready(function() {
        // wx.hideOptionMenu(); 隱藏分享
        wx.onMenuShareTimeline({
            title: '博客園-FlyElephant', // 分享標題
            link: 'http://www.cnblogs.com/xiaofeixiang/', // 分享鏈接
            imgUrl: '', // 分享圖標
            success: function() {
                // 用戶確認分享后執行的回調函數
            },
            cancel: function() {
                // 用戶取消分享后執行的回調函數
            }
        });
    });

這樣一看微信開發就很簡單了~