H5頁面在微信端的分享（分享到朋友圈，好友）

一、獲取基本信息

找到已有公眾號的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、基本配置

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無效。