Html5頁面在微信端的分享的實現(xiàn)方法

微信分享,咋一看好像很復(fù)雜,實則非常簡單。只需要調(diào)用微信官方出的微信jssdk,加上些許配置,就可以實現(xiàn)h5頁面在微信上的分享,官方文檔地址為:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
一、獲取基本信息
找到已有公眾號的appid,根據(jù)這個appid和url向后端發(fā)起請求,拿到配置所需要的參數(shù):timestamp、noncestr和signature。
二、實現(xiàn)
1、頁面引入JS-SDK文件
通過script標(biāo)簽,引入微信官網(wǎng)的JS-SDK文件
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
2、基本配置
wx.config({ debug: false, // 是否開啟調(diào)試模式 appId: appid, //appid timestamp: timestamp, // 時間戳 nonceStr: noncestr, // 隨機(jī)字符串 signature: signature, // 簽名 jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] // 需要使用的JS接口列表 })
3、使用
wx.ready(function(){ // 分享給好友 wx.onMenuShareAppMessage({ title: title, // 分享標(biāo)題 desc: desc, // 分享描述 link: link, // 分享鏈接 imgUrl: imgUrl, // 分享圖標(biāo) success: function () { doShareDone() }, cancel: function () { doShareCancel() } }) // 分享到朋友圈 wx.onMenuShareTimeline({ title: title, // 分享標(biāo)題 link: link, // 分享鏈接 imgUrl: imgUrl, // 分享圖標(biāo) success: function () { doShareDone() }, cancel: function () { doShareCancel() } }) })
// 分享成功回調(diào) function doShareDone () { console.log('分享成功') }
// 取消分享回調(diào) function doShareCancel () { console.log('取消了分享') }
三、調(diào)試
wx.config里的debug字段設(shè)置為true時,就可以進(jìn)行調(diào)試。
調(diào)試要用到微信開發(fā)者工具,選擇公眾號網(wǎng)頁項目,輸入頁面地址就可以了。
四、遇到的問題及解決方案
微信JS-SDK說明文檔的附錄5里有大部分問題的解決方案,在這里我列出我遇到的幾個上面沒有給出解決方案的。
1、Uncaught TypeError: Cannot read property 'config' of undefined
解決:html頁面單獨引入了sdk,并且組件統(tǒng)一也引入了一遍sdk,導(dǎo)致問題,刪除其中之一。
2、Uncaught (in promise) TypeError: Cannot read property 'ready' of undefined
解決:同問題1。
3、invalid signature
解決:如果文檔里的方法都沒有解決這個問題,還有一種方法,先設(shè)置一種最基礎(chǔ)的配置,使其config ok,然后再設(shè)置一遍自己需要的有各種參數(shù)的分享文案,這樣能繞過配置,成功分享。說的可能有點拗口,簡單點理解就是,頁面只要有一個config成功的配置,就可以再繼續(xù)配置其它分享,哪怕這個分享配置的signature無效。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Html5 實現(xiàn)微信分享及自定義內(nèi)容的流程
這篇文章主要介紹了Html5 實現(xiàn)微信分享及自定義內(nèi)容的流程,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-20- 這篇文章主要介紹了微信端html5頁面調(diào)用分享接口示例的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-14
- 這篇文章主要介紹了詳解html5 canvas 微信海報分享(個人爬坑)的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-12
HTML5實現(xiàn)分享到微信好友朋友圈QQ好友QQ空間微博二維碼功能
這篇文章主要介紹了HTML5實現(xiàn)分享到微信好友朋友圈QQ好友QQ空間微博二維碼功能的實例代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-01-03- 這篇文章主要介紹了HTML5中外部瀏覽器喚起微信分享功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-15