Html5頁面在微信端的分享的實作方法

微信分享，咋一看好像很複雜，其實非常簡單。只需要呼叫微信官方出的微信jssdk，加上些許配置，就可以實現h5頁面在微信上的分享，官方文件地址為：https://mp.weixin.qq.com/wiki?t=resource/res_main&id =mp1421141115

找到已有公眾號碼的appid，根據這個appid和url向後端發起請求，拿到設定所需的參數：timestamp、noncestr和signature。

透過script標籤，引入微信官網的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, // 是否開啟偵錯模式appId: appid, //appid timestamp: timestamp, // 時間戳nonceStr: noncestr, // 隨機字串signature: signature, // 簽章jsApiList: [ ' onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] // 需要使用的JS介面清單})

3、使用

 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() } })}) 

 // 分享成功回呼function doShareDone () { console.log('分享成功')} 

 // 取消分享回呼function doShareCancel () { 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無效。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。