前端調用微信分享函數封裝(適用於原生頁面和其他框架項目)


之前做微信分享總會出問題,這次封裝個函數減少以后在這方面浪費更多的時間。適用於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 }

 

 

以上

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM