任務(wù)背景:
用戶在微信中打開第三方網(wǎng)頁嚎卫,然后使用微信分享功能勃救,分享出去的內(nèi)容包含主標(biāo)題和副標(biāo)題,如下圖所示:
上面的圖片是我們想要達(dá)到的效果甲脏,而下面的圖片眶熬,副標(biāo)題是一個(gè)鏈接在裸奔妹笆,不是我們想要的效果;
實(shí)現(xiàn)步驟:
(1)將第三方網(wǎng)站域名綁定到微信公眾號(hào)上娜氏;因此晾浴,你必須要有一個(gè)微信公眾號(hào);
(2)在微信公眾號(hào)中綁定第三方服務(wù)的域名牍白;
(3)第三方網(wǎng)頁在網(wǎng)頁中集成微信的Js-Sdk;
(4)調(diào)用微信登錄接口獲取AccessToken脊凰;(這一步要要注意,這個(gè)AccessToken有每天2000次的獲取限制茂腥,需要在自己的服務(wù)器端進(jìn)行全局緩存)
可參見微信的官方文檔:
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183&token=&lang=zh_CN
(5)調(diào)用微信分享接口狸涌,傳入AccessToken,獲取jsTicket.(jsticket也需要全局緩存)
(因?yàn)閍ccess_token和jsapi_ticket必須要在自己的服務(wù)器緩存,否則上線后會(huì)觸發(fā)頻率限制最岗。請(qǐng)確保一定對(duì)token和ticket做緩存以減少2次服務(wù)器請(qǐng)求帕胆,不僅可以避免觸發(fā)頻率限制,還加快你們自己的服務(wù)速度般渡。目前為了方便測(cè)試提供了1w的獲取量懒豹,超過閥值后,服務(wù)將不再可用驯用,請(qǐng)確保在服務(wù)上線前一定全局緩存access_token和jsapi_ticket脸秽,兩者有效期均為7200秒,否則一旦上線觸發(fā)頻率限制蝴乔,服務(wù)將不再可用)记餐。
(6)使用jsTicket拼裝JSSDK中需要用到的參數(shù);
例如:
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來薇正,若要查看傳入的參數(shù)片酝,可以在pc端打開,參數(shù)信息會(huì)通過log打出挖腰,僅在pc端時(shí)才會(huì)打印雕沿。
appId: '', // 必填,公眾號(hào)的唯一標(biāo)識(shí)
timestamp: , // 必填猴仑,生成簽名的時(shí)間戳
nonceStr: '', // 必填审轮,生成簽名的隨機(jī)串
signature: '',// 必填,簽名宁脊,見附錄1
jsApiList: [] // 必填断国,需要使用的JS接口列表贤姆,所有JS接口列表見附錄2
});
(7)向用戶展現(xiàn)最終的頁面榆苞;
注意事項(xiàng):
在進(jìn)行簽名時(shí),需要使用url參數(shù)霞捡,這個(gè)URL 參數(shù)不要寫死坐漏,應(yīng)該在打開頁面時(shí),實(shí)時(shí)獲取當(dāng)前頁面的URL地址;因?yàn)樯蘖眨?dāng)網(wǎng)頁被分享出去后街夭,微信會(huì)在頁面的后面附加一些參數(shù),這些參數(shù)會(huì)導(dǎo)致在為第二次分享進(jìn)行簽名時(shí)躏筏,簽名錯(cuò)誤板丽;
以下引用微信開發(fā)文檔的原文:
確保你獲取用來簽名的url是動(dòng)態(tài)獲取的,動(dòng)態(tài)頁面可參見實(shí)例代碼中php的實(shí)現(xiàn)方式趁尼。如果是html的靜態(tài)頁面在前端通過ajax將url傳到后臺(tái)簽名埃碱,前端需要用js獲取當(dāng)前頁面除去'#'hash部分的鏈接(可用location.href.split('#')[0]獲取,而且需要encodeURIComponent),因?yàn)轫撁嬉坏┓窒硭峙ⅲ⑿趴蛻舳藭?huì)在你的鏈接末尾加入其它參數(shù)砚殿,如果不是動(dòng)態(tài)獲取當(dāng)前鏈接,將導(dǎo)致分享后的頁面簽名失敗芝囤。