作者：陳惠，叩丁狼教育高階講師。原創文章，轉載請註明出處。

微信JS-SDK是微信公眾平臺 面向網頁開發者提供的基於微信內的網頁開發工具包。

通過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信使用者提供更優質的網頁體驗。

我們先來看一個生活中常見的例子：

如圖所示的一個抽獎活動，抽獎次數有限，若次數使用完便不能再次參與抽獎，但是使用者分享到朋友圈之後，可增加一次抽獎機會，這樣便達到了宣傳的效果。

那我們應該怎麼去實現呢？
實際上思路比較簡單，就是監聽分享到朋友圈的事件，在分享成功之後給他增加1次抽獎機會，但是，分享到朋友圈是微信裡的功能，所以得使用微信提供的JSSDK才能完成。

實現步驟

一：繫結域名
在公眾號管理頁面，設定JS介面安全域名，表示該域名下的所有頁面，都擁有使用JSSDK的許可權。

二：頁面中引入JS檔案

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

三：通過config介面注入許可權驗證配置
所有需要使用JS-SDK的頁面必須先注入配置資訊，否則將無法呼叫JSSDK的相關API。

在頁面中新增這段js程式碼

 wx.config({
            debug: true
            appId: 'wx59687be81dd3d388', 
            timestamp: 1234567890, 
            nonceStr: 'wolfcode', 
            signature: '5c138e08a9d173c40c4e6280b02d008535bd17d8',
            jsApiList: ['onMenuShareTimeline'] 
});
 

引數介紹
debug：true為開啟除錯模式，呼叫的所有api的返回值會在客戶端alert出來，若是生產環境則設定為false
appId：必填，公眾號的唯一標識
timestamp：必填，時間戳
nonceStr：必填，隨機生成的字串
signature：必填，根據timestamp與nonceStr與jsapi_ticket按照某種演算法生成的簽名
jsApiList：必填，需要使用的JS介面許可權，如：使用分享朋友圈介面，則填入onMenuShareTimeline，其他介面的名稱可以在開發文件中找到。

jsapi_ticket：
生成簽名signature還需要一個叫jsapi_ticket的引數，jsapi_ticket是公眾號用於呼叫微信JS介面的臨時票據，可以通過基礎介面的access_token來獲取，有效期為7200秒，呼叫次數有限，所以在後臺也需要全域性快取jsapi_ticket。

程式碼：

     //獲取JSSDK的介面地址
    public static final String GET_TICKET_URL = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";

    /**
     * 獲取JSSDK的jsapi_ticket
     */
    public static void getJsapi_ticket(){
        //發起請求到指定的介面
        String result = HttpUtil.get(GET_TICKET_URL.replace("ACCESS_TOKEN",getAccessToken()));
        System.out.println(result);
    }

成功即返回如下JSON：

{
    "errcode":0,
    "errmsg":"ok",
    "ticket":"bxLdikRXVbTPdHFKA",
    "expires_in":7200
}

獲得jsapi_ticket之後，就可以生成JS-SDK許可權驗證的簽名了。

簽名演算法：
規則如下：參與簽名的欄位包括noncestr（隨機字串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其後面部分） 。對所有待簽名引數按照欄位名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字串string1。這裡需要注意的是所有引數名均為小寫字元。最後對string1作sha1加密，欄位名和欄位值都採用原始值，不進行URL 轉義。

注意事項：
1.簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。
2.簽名用的url必須是呼叫JS介面頁面的完整URL。
3.出於安全考慮，開發者必須在伺服器端實現簽名的邏輯。

利用該工具，可以馬上獲取到簽名的結果，接下來我們把簽名拷貝到config中。

使用web開發者工具，開啟我們的抽獎頁面，可以看到ok的提示，代表權限注入成功。

此時檢視許可權列表，該頁面已經擁有onMenuShareTimeline分享朋友圈的介面操作許可權。

四：通過ready介面處理成功驗證
config許可權驗證成功後會執行ready方法，相反失敗會執行error方法，所有介面呼叫都必須在config介面獲得結果之後，因為config是一個非同步操作，所以如果需要在頁面載入時就呼叫相關介面，則須把相關介面放在ready函式中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。

在ready中設定分享朋友圈相關功能

 wx.ready(function(){
            //分享到朋友圈介面
            wx.onMenuShareTimeline({
                title: '抽獎活動', // 分享時的標題
                link: 'http://huihui.mynatapp.cc/gift.html', // 分享時的連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                imgUrl: 'http://www.wolfcode.cn/img/wolfcode/logo.png', // 分享時顯示的圖示
                //使用者確認分享後執行的回撥函式
                success: function () {
                    //給使用者新增1次抽獎機會
                    playnum = 1;
                    $('.playnum').html(playnum);
                },
                //使用者取消分享後執行的回撥函式
                cancel: function () {
                    alert("取消分享");
                }
            });
        });

效果：

注意：
我們應該在伺服器端來實現簽名的邏輯，再把相關的引數值響應給頁面，前面主要是為了便於理解暫時直接用簽名工具生成好拷貝進去的。

在後臺計算簽名時演算法參考：

    /**
     * 計算jssdk-config的簽名
     * @param jsapi_ticket
     * @param timestamp
     * @param noncestr
     * @param url
     * @return
     */
    public static String getSignature(String jsapi_ticket,Long timestamp,String noncestr,String url ){
        //對所有待簽名引數按照欄位名的ASCII 碼從小到大排序（字典序）
        Map<String,Object> map = new TreeMap<>();
        map.put("jsapi_ticket",jsapi_ticket);
        map.put("timestamp",timestamp);
        map.put("noncestr",noncestr);
        map.put("url",url);
        //使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字串string1
        StringBuilder sb = new StringBuilder();
        Set<String> set = map.keySet();
        for (String key : set) {
            sb.append(key+"="+map.get(key)).append("&");
        }
        //去掉最後一個&符號
        String temp = sb.substring(0,sb.length()-1);
        //使用sha1加密
        String signature = SecurityUtil.SHA1(temp);
        return signature;
    }