微信分享自定義圖片標題摘要

咱們平時在使用微信內置瀏覽器打開網頁想要分享給好友或者發到朋友圈的時候常常會遇到這樣的問題，

別人的網頁分享的時候是這樣的：

而咱們本身的網頁分享後這這樣的：

看到有人說不作任何設置，微信分享時會自動抓取網頁中的Title做爲標題，IP地址做爲概述，網頁的第一個大小小於300*300的圖片會做爲分享中的圖片，可是除了標題和概述能夠，圖片怎麼設置分享後圖片都是上圖灰色的曲別針圖案，因此今天來講一下若是自定義圖片，標題和概述。

要實現上述功能須要使用微信官方的SDK，具體步驟以下：

第一步：微信公衆號中設置js綁定域名，只有綁定的域名下的網頁才能夠調用微信官方的js，目前域名能夠綁定3個（綁定步驟以下）

①進入公衆號，點擊左邊主菜單欄「設置」→「公衆號設置」

而後點擊上方的「功能設置」

設置好後，進入下一步。

第二步：在本身的網頁中引入微信官方js，http://res.wx.qq.com/open/js/jweixin-1.0.0.js，這步最簡單

第三步：在頁面添加配置信息和js代碼

wx.config({
            debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
            appId: 'wxb5f2540cff5*****', // 必填，公衆號的惟一標識
            timestamp:'1414587457' , // 必填，生成簽名的時間戳
            nonceStr: 'Wm3WZYTPz0wzccnW', // 必填，生成簽名的隨機串
            signature: '0f9de62fce790f9a083d5c99e95740ceb90c27ed',// 必填，簽名
            jsApiList: ['onMenuShareAppMessage'] // 必填，須要使用的JS接口列表
        });
        wx.ready(function(){
            wx.onMenuShareAppMessage({
                title: '測試標題', // 分享標題
                desc: '測試描述', // 分享描述
                link: 'http://zicp.zicp.net/ycdh_real/mobile/productInfo?id=1e72e158-f3f5-46df-8385-7fe1059e142f', // 分享連接
                imgUrl: 'http://zicp.zicp.net/ycdh_real/res/images/website/h.jpg', // 分享圖標
                type: 'link', // 分享類型,music、video或link，不填默認爲link
                dataUrl: '', // 若是type是music或video，則要提供數據連接，默認爲空
                success: function () { 
                    alert("分享成功！");
                },
                cancel: function () { 
                    // 用戶取消分享後執行的回調函數
                }
            });
            wx.error(function(res){

                // config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗

            });
        });

這裏主要來講明一下配置參數中的signature，簽名，

獲取簽名的步驟:

①首先經過公衆號的AppID(應用ID)和AppSecret(應用密鑰)獲得access_token，具體方法 獲取access_token方法

②經過上一步獲得的access_token獲得api_ticket，具體方法：

調用接口https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

返回值json格式：

{
"errcode":0,
"errmsg":"ok",
"ticket":"sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg",
"expires_in":7200
}

③經過前兩步的到的jsapi_ticket獲取簽名signature

　　示例：

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

　　❶ 對全部待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1：

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

　　❷對string1進行sha1簽名，獲得signature：

　　signature=sha1(string1);
　　通過上述算法得出 signature=0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事項

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

微信官方推出了 JS 接口簽名校驗工具 地址

到這爲止微信分享就完成了，上述只是分享給好友，分享到朋友圈和這個相似，結合SDK官方文檔照着寫就能夠了，分享效果出來了，看下圖

OK