微信分享功能

最近在做手機端頁面，需要一個分享功能，其實自身分享是可以的，但是爲了分享出的內容豐富，比如縮略圖了，描述了等等，如下圖所示：

步驟一：綁定域名
先登錄微信公衆平臺進入“公衆號設置”的“功能設置”裏填寫“JS接口安全域名”。
備註：登錄後可在“開發者中心”查看對應的接口權限。

步驟二：引入JS文件
在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
首先查看下官方文檔，通過查看微信公衆平臺文檔，找到需要的說明文檔，明確開發步驟，說明文檔截圖如下

在微信JS-SDK說明文檔中找到 分享接口

獲得Access Token 和 jsapi_ticket這些需要後臺去做

1. 獲得Access Token
   首先，登錄公衆號平臺->基本配置：
   
   然後，獲取access_tonken:
   獲取方式說明：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183
   access_tonken有效期7200秒，開發者必須在自己的服務全局緩存access_token我們只需要瞭解一下就可以，不需要我們緩存它；

{"access_token":"ACCESS_TOKEN","expires_in":7200}

成功返回如下JSON:
2. 獲取jsapi_ticket
https請求方式: GET
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

這裏只有access_token是我們上一步獲取的，type=jsapi按原樣拼接；這時我們會拿到jsapi_ticket

有效期7200秒，開發者必須在自己的服務全局緩存jsapi_ticket我們只需要瞭解一下就可以，不需要我們緩存它；

成功返回如下JSON:

{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTP5u5sUoXNKd8-41ZO3MhKoyN5OfkWITA",
"expires_in":7200
}

獲得jsapi_ticket之後，就可以生成JS-SDK權限驗證的簽名了。
3. 第三個signature:
出於安全考慮，開發者必須在服務器端實現簽名的邏輯。

後臺會返回 timestamp，noncestr，signature，appid，url
根據後臺返回的這些數據進行
微信 JS 接口簽名校驗工具https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

前端代碼 js

// 微信分享默認調用接口
var $appid,$timestamp,$noncestr,$signature,$description,$title1;
//獲取當前頁面的url
var linkUrl = window.location.href;
//encodeURIComponent(),請求後臺接口需要用encodeURIComponent()
var encodeUrl = encodeURIComponent(linkUrl); 
$.ajax({
    type : "GET",
    url : "這裏寫你調用的後臺接口"+"?url=" + encodeUrl,
    cache : false,
    async : false,
    success : function(msg) {
        var data = JSON.parse(msg);
        console.log(data);
        if(data.code == 200){
            $appid = data.data.appid;  // appid
            $timestamp = data.data.timestamp;   // timestamp
            $noncestr = data.data.noncestr; // noncestr
            $signature = data.data.signature;  // signature

            var description = $("meta[name='description']").attr("content");
            if ($.trim(description) != "") {
                $description = $.trim(description); // share_desc
            }
            var title1 = document.title;
            if ($.trim(title1) != "") {
                $title1 = title1;// share_title
            }

            //**配置微信信息**
            wx.config ({
                debug : false,
                appId : $appid,
                timestamp : $timestamp,
                nonceStr : $noncestr,
                signature : $signature,
                jsApiList : [
                    // 所有要調用的 API 都要加到這個列表中
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'onMenuShareQZone'
                ]
            });
            wx.ready (function () {
                // 微信分享的數據
                var shareData = {
                    "imgUrl" : "",
                    "link" : linkUrl,
                    "desc" : $description,
                    "title" : $title1,
                    success : function () {
                        // 分享成功可以做相應的數據處理
                    }
                };
                //分享微信朋友圈
                wx.onMenuShareTimeline (shareData);
                //分享給朋友
                wx.onMenuShareAppMessage({
                    title: $title1, // 分享標題
                    desc: $description, // 分享描述
                    link: linkUrl, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                    imgUrl: "", // 分享圖標
                    type: '', // 分享類型,music、video或link，不填默認爲link
                    dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認爲空
                    success: function () {
                        // 用戶點擊了分享後執行的回調函數
                    }
                });
                //分享到qq
                wx.onMenuShareQQ (shareData);
                //分享到微博
                wx.onMenuShareWeibo (shareData);
                //分享到qq空間
                wx.onMenuShareQZone(shareData);
            });



        }

    },
    error : function(msg){

    }
});

這裏需要注意的是：
1.簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。
2.簽名用的url必須是調用JS接口頁面的完整URL。
3.出於安全考慮，開發者必須在服務器端實現簽名的邏輯。
如出現invalid signature 等錯誤詳見附錄5常見錯誤及解決辦法。