微信分享自定義圖片標題摘要-微信官方API

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

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

而我們自己的網頁分享后這這樣的：

看到有人說不做任何設置，微信分享時會自動抓取網頁中的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×tamp=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

參考資料：

http://www.bitscn.com/weixin/583327.html

http://chitanda.me/2015/06/19/wechat-share-diy/