H5 頁面在微信端的分享

微信分享，咋一看好像很複雜，實則很是簡單。只須要調用微信官方出的微信jssdk，加上些許配置，就能夠實現h5頁面在微信上的分享，官方文檔地址爲：

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

1、獲取基本信息

找到已有公衆號的appid，根據這個appid和url向後端發起請求，拿到配置所須要的參數：timestamp、noncestr和signature。

2、實現

一、頁面引入JS-SDK文件

經過script標籤，引入微信官網的JS-SDK文件

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>

二、基本配置

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

三、使用

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

 

3、調試

wx.config裏的debug字段設置爲true時，就能夠進行調試。

調試要用到微信開發者工具，選擇公衆號網頁項目，輸入頁面地址就能夠了。

4、遇到的問題及解決方案

微信JS-SDK說明文檔的附錄5裏有大部分問題的解決方案，在這裏我列出我遇到的幾個上面沒有給出解決方案的。

一、Uncaught TypeError: Cannot read property 'config' of undefined

解決：html頁面單獨引入了sdk，而且組件統一也引入了一遍sdk，致使問題，刪除其中之一。

二、Uncaught (in promise) TypeError: Cannot read property 'ready' of undefined

解決：同問題1。

三、invalid signature

解決：若是文檔裏的方法都沒有解決這個問題，還有一種方法，頁面只要有一個config成功的配置，就能夠再繼續配置其它分享，哪怕這個分享配置的signature無效。