溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、背景介紹
在微信中打開自己網站的鏈接，經常會變成下面這樣
不太好看有木有，如果你想在分享出來的東西帶上你的logo，帶上你想要的描述，怎么辦，像下面這樣
這就需要用到微信的分享SDK，文檔鏈接：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
二、微信SDK使用說明第一步
第一步
先要在微信公眾平臺上注冊一個微信公眾號，還必須要是認證的企業或組織，流程走下來大概要個兩三天的時間吧，只有認證了的公眾號才有分享SDK的權限，個人的不行，這個比較麻煩。賬號申請成功后會有AppID和AppSecret，這個相當于你公眾號的秘鑰，第二步需要用到。然后在JS接口安全域名中加入你調微信SDK時的頁面的地址，不支持IP地址、端口號及短鏈域名，只能寫域名，不用加http啥的，在設置了安全域名的路徑下才能夠成功調SDK。
第二步
需要一個獲取簽名的接口，這個可以找RD幫忙操作，請求接口的時候帶上URL（必須和你當前的URL一致），然后讓RD好好研讀下如何通過公眾號的AppID和AppSecret獲取到token及簽名等信息，接下來就可以愉快的調用微信的分享SDK了。
第三步
獲取到簽名之后在HTML中引入
<script typet="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
引入后在代碼中調用分享SDK
window.wx.config({
appId: res.data.appId, //res.data為請求簽名接口返回數據
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
jsApiList: [
'checkJsApi',
'updateAppMessageShareData',
'updateTimelineShareData'
]
});
const shareConfig = {
'imgUrl': '你想展現的圖標',
'desc': '你想展現的描述',
'title': '你想展現的title',
'link': window.location.href,
'success': function () {
console.log('成功了！');
},
'cancel': function () {
console.log('取消');
}
};
window.wx.ready(function () {
window.wx.updateAppMessageShareData(shareConfig);
window.wx.updateTimelineShareData(shareConfig);
});
OK！大功告成，現在就可以按你的想法分享內容了，但是如何在本地測試是否成功呢？我們剛才也說了只能在安全域名下才能調用成功，所以Charles就派上大用場了。。。把安全域名代理到本地，然后可以在微信開發者工具上面自測一下，沒問題了上真機，iOS和安裝都要試一下，會有驚喜。
三、坑及總結
在自測了沒問題之后上線了。。。結果發現iOS的手機獲取簽名失敗，報invalid signature,后來排查發現在iOS的微信里面如果從其他頁面跳轉到你要分享的頁面window.location.href是不會變的。。。也就是說你發請求去獲取簽名時候傳給后端的URL和你當前的URL是不一致的，所以導致簽名獲取失敗。這個解決辦法很多，可以把前一個頁面的URL拿去獲取簽名，只要保持一致就是OK的。
好了 先寫這么多。。。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
