H5頁面在微信端的分享
阿新 • • 發佈:2018-12-11
微信分享,咋一看好像很複雜,實則非常簡單。只需要呼叫微信官方出的微信jssdk,加上些許配置,就可以實現h5頁面在微信上的分享,官方文件地址為:https://mp.weixin.qq.com/wiki…
一、獲取基本資訊
找到已有公眾號的appid,根據這個appid和url向後端發起請求,拿到配置所需要的引數:timestamp、noncestr和signature。
二、實現
1、頁面引入JS-SDK檔案
通過script標籤,引入微信官網的JS-SDK檔案
1 | <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"type="text/javascript"></script> |
2、基本配置
JavaScript1234567891011121314 | wx.config({debug:false,// 是否開啟除錯模式appId:appid,//appidtimestamp:timestamp,// 時間戳nonceStr:noncestr,// 隨機字串signature:signature,// 簽名jsApiList:['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone']// 需要使用的JS介面列表 |
3、使用
JavaScript12345678910111213141516171819202122232425262728 | wx.ready(function(){// 分享給好友wx.onMenuShareAppMessage({title:title,// 分享標題desc:desc,// 分享描述link:link,// 分享連結imgUrl:imgUrl,// 分享圖示success:function(){doShareDone()},cancel:function(){doShareCancel()}})// 分享到朋友圈wx.onMenuShareTimeline({title:title,// 分享標題link:link,// 分享連結imgUrl:imgUrl,// 分享圖示success:function(){doShareDone()},cancel:function(){doShareCancel()}})}) |
1234 | // 分享成功回撥functiondoShareDone(){console.log('分享成功')} |
1234 | // 取消分享回撥functiondoShareCancel(){console.log('取消了分享')} |
三、除錯
wx.config裡的debug欄位設定為true時,就可以進行除錯。
除錯要用到微信開發者工具,選擇公眾號網頁專案,輸入頁面地址就可以了。
四、遇到的問題及解決方案
微信JS-SDK說明文件的附錄5裡有大部分問題的解決方案,在這裡我列出我遇到的幾個上面沒有給出解決方案的。
1、Uncaught TypeError: Cannot read property ‘config’ of undefined
解決:html頁面單獨引入了sdk,並且元件統一也引入了一遍sdk,導致問題,刪除其中之一。
2、Uncaught (in promise) TypeError: Cannot read property ‘ready’ of undefined
解決:同問題1。
3、invalid signature
解決:如果文件裡的方法都沒有解決這個問題,還有一種方法,先設定一種最基礎的配置,使其config ok,然後再設定一遍自己需要的有各種引數的分享文案,這樣能繞過配置,成功分享。說的可能有點拗口,簡單點理解就是,頁面只要有一個config成功的配置,就可以再繼續配置其它分享,哪怕這個分享配置的signature無效。