任務背景:
用戶在微信中打開第三方網頁,然后使用微信分享功能,分享出去的內容包含主標題和副標題,如下圖所示:
上面的圖片是我們想要達到的效果,而下面的圖片,副標題是一個鏈接在裸奔,不是我們想要的效果;
實現步驟:
(1)將第三方網站域名綁定到微信公眾號上;因此,你必須要有一個微信公眾號;
(2)在微信公眾號中綁定第三方服務的域名;
(3)第三方網頁在網頁中集成微信的Js-Sdk;
(4)調用微信登錄接口獲取AccessToken;(這一步要要注意,這個AccessToken有每天2000次的獲取限制,需要在自己的服務器端進行全局緩存)
可參見微信的官方文檔:
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183&token=&lang=zh_CN
(5)調用微信分享接口,傳入AccessToken,獲取jsTicket.(jsticket也需要全局緩存)
(因為access_token和jsapi_ticket必須要在自己的服務器緩存,否則上線后會觸發頻率限制。請確保一定對token和ticket做緩存以減少2次服務器請求,不僅可以避免觸發頻率限制,還加快你們自己的服務速度。目前為了方便測試提供了1w的獲取量,超過閥值后,服務將不再可用,請確保在服務上線前一定全局緩存access_token和jsapi_ticket,兩者有效期均為7200秒,否則一旦上線觸發頻率限制,服務將不再可用)。
(6)使用jsTicket拼裝JSSDK中需要用到的參數;
例如:
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。
appId: '', // 必填,公眾號的唯一標識
timestamp: , // 必填,生成簽名的時間戳
nonceStr: '', // 必填,生成簽名的隨機串
signature: '',// 必填,簽名,見附錄1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2
});
(7)向用戶展現最終的頁面;
注意事項:
在進行簽名時,需要使用url參數,這個URL 參數不要寫死,應該在打開頁面時,實時獲取當前頁面的URL地址;因為,當網頁被分享出去后,微信會在頁面的后面附加一些參數,這些參數會導致在為第二次分享進行簽名時,簽名錯誤;
以下引用微信開發文檔的原文:
確保你獲取用來簽名的url是動態獲取的,動態頁面可參見實例代碼中php的實現方式。如果是html的靜態頁面在前端通過ajax將url傳到后臺簽名,前端需要用js獲取當前頁面除去'#'hash部分的鏈接(可用location.href.split('#')[0]獲取,而且需要encodeURIComponent),因為頁面一旦分享,微信客戶端會在你的鏈接末尾加入其它參數,如果不是動態獲取當前鏈接,將導致分享后的頁面簽名失敗。