之前做微信分享總會出問題,這次封裝個函數減少以后在這方面浪費更多的時間。適用於6.7.2之前版本和更高版本的微信
代碼中沒有請求微信 jsTicket 部分,這部分前端只要傳對url 就行,常出現的是簽名問題,不過前端傳的url正確的話還報簽
名錯誤的話就可以把鍋讓后端的小哥哥們背着了。
請求jsTicket 時 url 獲取方式
var url = encodeURIComponent(location.href.split('#')[0])
然后上封裝之后的微信分享代碼
1 /** 2 * 作者: blackbentel 3 * 時間: 2018-11-15 4 * 更新時間: 2019-04-26 5 * 更新內容: 去掉微信高低版本判斷,經嘗試高版本分享方法用不了 6 微信分享使用方式 7 1. 引入微信js-sdk 文件 http://res2.wx.qq.com/open/js/jweixin-1.4.0.js 8 2. 引入這個文件 9 3. 在有自定義分享功能的頁面開始的時候或者加載后就該調用 setwxShareConfigInfo(wxConfig, shareData) 10 入參 11 wxConfig = { // 請求來的jsTicket (必須) 12 appId: '' // 必填,公眾號的唯一標識 13 timestamp: '', // 必填,生成簽名的時間戳 14 noncestr: '', // 必填,生成簽名的隨機串 15 signature: '', // 必填,簽名 16 } 17 shareData = { // 分享信息和回調 (非必須) 18 title: '', // 分享標題 (非必填) 19 desc: '', // 分享描述 (非必填) 20 link: '', // 分享鏈接 (非必填) 21 imgUrl: '', // 分享縮略圖 (非必填) 22 success: function, // 分享成功回調(非必填) 23 fail: function, // 分享失敗回調(非必填) 24 cancel: function, // 取消分享回調(非必填) 25 } 26 */ 27 28 // 微信分享功能 29 function setwxShareConfigInfo (wxConfig, shareData) { 30 31 // 判斷是否是6.7.2及更高版本的微信 32 // var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i) 33 // var isWechatHighVersion = wechatInfo[1] >= '6.7.2' 34 35 var shareInfo = { 36 title: (shareData && shareData.title) || document.title, 37 desc: (shareData && shareData.desc) || location.href, 38 link: (shareData && shareData.link) || location.href, 39 } 40 shareData && shareData.imgUrl ? (shareInfo['imgUrl'] = shareData.imgUrl) : null 41 shareData && shareData.success ? (shareInfo['success'] = shareData.success) : null 42 shareData && shareData.fail ? (shareInfo['fail'] = shareData.fail) : null 43 shareData && shareData.cancel ? (shareInfo['cancel'] = shareData.cancel) : null 44 wx.config({ 45 debug: false, // 改為true會alert一些調試信息 46 appId: wxConfig.appId, // 必填,公眾號的唯一標識 47 timestamp: wxConfig.timestamp, // 必填,生成簽名的時間戳 48 nonceStr: wxConfig.noncestr, // 必填,生成簽名的隨機串 49 signature: wxConfig.signature, // 必填,簽名 50 jsApiList: ['checkJSApi', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone', 'updateAppMessageShareData', 'updateTimelineShareData'] // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2 51 }) 52 wx.checkJsApi({ 53 jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone', 'updateAppMessageShareData', 'updateTimelineShareData'], 54 success: function (res) { 55 // 以鍵值對的形式返回,可用的api值true,不可用為false 56 // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} 57 } 58 }) 59 // 通過ready 60 wx.ready(function () { 61 lowVersionshare(shareInfo) 62 highVersionshare(shareInfo) 63 /* if (isWechatHighVersion) { 64 highVersionshare(shareInfo) 65 } else { 66 lowVersionshare(shareInfo) 67 } */ 68 }) 69 } 70 71 // 6.7.2及更高版本微信分享 72 function highVersionshare(data) { 73 wx.updateTimelineShareData(data) 74 wx.updateAppMessageShareData(data) 75 } 76 77 // 6.7.2以下版本微信分享 78 function lowVersionshare(data) { 79 // 分享給朋友 80 wx.onMenuShareAppMessage(data) 81 // 分享到朋友圈 82 wx.onMenuShareTimeline(data) 83 // 分享到qq 84 wx.onMenuShareQQ(data) 85 86 // 分享到qq空間 87 wx.onMenuShareQZone(data) 88 }
以上