微信分享到朋友圈介面用法
阿新 • • 發佈：2019-01-29
下面是微信分享的關鍵程式碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
wx.ready(function(){
wx.onMenuShareTimeline({
title: '嘻嘻',//
分享標題
link: 'https://www.xttblog.com'+ '?id='+
res.data.id,// 分享連結
imgUrl: 'http://xx.com/test.jpg',// 分享圖示
success: function() {},//
使用者確認分享後執行的回撥函式 cancel: function() {},//
使用者取消分享後執行的回撥函式
fail: function(res) {
alert("分享失敗，請重新嘗試");
}
});
wx.onMenuShareAppMessage({
title: '哈哈哈',//
分享標題
desc: 'CODE大全',//
分享描述
link: 'https://www.xttblog.com'+ '?id='+
res.data.id ,// 分享連結
imgUrl: 'http://xx.com/test.jpg',
type: 'link',
success: function() {},//
使用者確認分享後執行的回撥函式cancel: function() {}//
使用者取消分享後執行的回撥函式
});
$.ajax({
url: (HOST+'/config'),
type: 'GET',
dataType: 'json',
data: {
url : location.href
},
success: function(res){
if(res.code === 1){
res.data.jsApiList = ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'closeWindow'];
wx.config(res.data);}
}
});
}
|
- 雖然微信提供了JSSDK，但是這不意味著你可以用自定義的按鈕來直接開啟微信的分享介面，這套JSSDK只是把微信分享介面的內容定義好了，實際還是需要使用者點選右上角的選單按鈕進行主動的分享，使用者點開分享介面之後，出現的內容就會是你定義的分享標題、圖片和連結。
- wx.config()注入配置成功之後，會觸發wx.ready()函式（同樣失敗的時候會觸發wx.error()函式），所以之後的有必要的介面呼叫，比如定義分享到朋友圈、分享給好友的內容，還是放在wx.ready()中進行呼叫以保證正確性。
- wx.checkJsApi無需wx.config即可呼叫，用來判斷當前客戶端是否能支援微信JSSDK的介面。
- 分享出去的連結，會被微信在連結後面追加引數。這個問題十分重要，本人在開發過程中，第一次分享出去，成功沒有任何問題，但是再次開啟連結，會提示invalid signature，也就是簽名錯誤，這個問題出現的原因，就是因為原來連結的被追加了引數，傳遞到自己伺服器後臺的頁面原地址和提交給微信的頁面原地址不匹配，解決方法如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
varpageUrl = window.location.href.split('#')[0];
pageUrl = pageUrl.replace(/\&/g, '%26');</span>
initJsApiTicket(pageUrl, function(data) {
if(data.errcode == '0')
{
wx.config({
debug: false,
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
});
}
});
|
注意如果你是用這種方式將頁面原地址作為引數傳遞到後臺的話，需要將引數中的&全部替換為%26，否則後臺接收到的地址會丟失引數，導致最後簽名不一致。另外，在你分享出去的URL中，必須將微信附加的引數去掉，否則會導致第二次分享成功，但是第三次、第四次以及後續的分享都失敗。