微信分享，咋一看好像很復雜，實則非常簡單。只需要調用微信官方出的微信jssdk，加上些許配置，就可以實現h5頁面在微信上的分享，官方文檔地址為：
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
一、獲取基本信息
找到已有公眾號的appid，根據這個appid和url向后端發起請求，拿到配置所需要的參數：timestamp、noncestr和signature。
二、實現
1、頁面引入JS-SDK文件
通過script標簽，引入微信官網的JS-SDK文件
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
2、基本配置
1 wx.config({ 2 debug: false, // 是否開啟調試模式 3 appId: appid, //appid 4 timestamp: timestamp, // 時間戳 5 nonceStr: noncestr, // 隨機字符串 6 signature: signature, // 簽名 7 jsApiList: [ 8 'onMenuShareTimeline', 9 'onMenuShareAppMessage', 10 'onMenuShareQQ', 11 'onMenuShareWeibo', 12 'onMenuShareQZone' 13 ] // 需要使用的JS接口列表 14 })
3、使用
1 wx.ready(function(){ 2 // 分享給好友 3 wx.onMenuShareAppMessage({ 4 title: title, // 分享標題 5 desc: desc, // 分享描述 6 link: link, // 分享鏈接 7 imgUrl: imgUrl, // 分享圖標 8 success: function () { 9 doShareDone() 10 }, 11 cancel: function () { 12 doShareCancel() 13 } 14 }) 15 16 // 分享到朋友圈 17 wx.onMenuShareTimeline({ 18 title: title, // 分享標題 19 link: link, // 分享鏈接 20 imgUrl: imgUrl, // 分享圖標 21 success: function () { 22 doShareDone() 23 }, 24 cancel: function () { 25 doShareCancel() 26 } 27 }) 28 })
三、調試
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成功的配置，就可以再繼續配置其它分享，哪怕這個分享配置的signature無效。