微信分享有兩種機制,一種是微信自帶的分享機制,一種是公眾號自定義的分享機制。
1、 微信自帶分享:微信的自帶分享是自己根據網頁的信息來抓取分享出去的信息。
標題:自動抓取html中head里面的title;
圖片:網頁中第一張長和寬都大於300px的圖片
描述:網頁本身的url
2、公眾號自定義分享:微信自定分享是需要調取微信的jssdk的接口的,步驟:
一、先通過config接口注入權限驗證配置
圖中所指的四個參數,其中appId是固定的,其他三個參數有公眾號即時生成,不過為了安全起見一般有后台返回,jsApiList中注入分享接口
jsApiList: [
“onMenuShareTimeline”,//分享到朋友圈
“onMenuShareAppMessage”,//分享給朋友
“onMenuShareQQ”,//分享到QQ
“onMenuShareWeibo”,//分享到騰訊微博
“onMenuShareQZone”,//分享到QQ空間
]
注意事項:由於在wx.config沒有配置好之前,微信接口是調用不了的,所以為了避免調取接口失敗,建議后台返回的配置參數放在一個單獨的接口中無需登錄也能請求,以達到快速注入權限。
二、注入權限后再調取微信的分享接口,示例:
wx.onMenuShareAppMessage({ title: '', // 分享標題 desc: '', // 分享描述 link: '', // 分享鏈接 imgUrl: '', // 分享圖標 type: '', // 分享類型,music、video或link,不填默認為link dataUrl: '', // 如果type是music或video,則要提供數據鏈接,默認為空 success: function () { // 用戶確認分享后執行的回調函數 }, cancel: function () { // 用戶取消分享后執行的回調函數 } });
所有的參數由自己定義
注意事項:就算配置了自定義分享,分享的時候還是會有調取分享接口失敗的情況,這個時候分享的信息就會和微信自帶的分享一樣,為了避免分享出去的圖片是空白的或者不是產品想要的,我們可以在body的下面創建一個img標簽隱藏一張寬度和高度都大於300的圖片,這種情況下描述是desc參數是不可控的。