1、需求背景：

我們要做H5的活動頁面，但是運營想要把這個活動分享到微信中去违霞，所以需要我們在微信打開這個活動連接時嘴办，可以用微信的分享功能

2、綁定域名：

先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”

3买鸽、代碼封裝：

1涧郊、引入小程序SDK
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
2、通過config去注入權限驗證配置

 * @Description:
 * @Author: @[lina]
 * @Date: 2020-06-05 14:51:47
 * @LastEditors: @[lina]
 * @LastEditTime: 2020-06-23 14:22:02
 */
const setWechatConfig = () => {
  const _this = this
  if (window.navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
    // 判斷是微信的話再做
    axios.post('wechat/getUrlConfig', {
      url: window.location.href.split('#')[0]
    }).then(res => {
    // 通過接口返回公眾號的appID,等需要的信息
      if (res.code === 200) {
        wx.config({
          // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來眼五，若要查看傳入的參數(shù)妆艘，可以在pc端打開，參數(shù)信息會通過log打出看幼，僅在pc端時才會打印批旺。
          debug: false,
          // 必填，公眾號的唯一標識
          appId: res.result.appId,
          // 必填诵姜，生成簽名的時間戳
          timestamp: res.result.timestamp,
          // 必填汽煮，生成簽名的隨機串
          nonceStr: res.result.nonceStr,
          // 必填，簽名
          signature: res.result.signature,
          // 必填棚唆，需要使用的JS接口列表
          jsApiList: ['hideOptionMenu', 'hideMenuItems', 'showMenuItems', 'updateAppMessageShareData', 'updateTimelineShareData']
          // ['hideOptionMenu', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems', 'showMenuItems']
        })
        wx.error(function (res) {
          _this.$refs.Errormes.ErrormesFun(`調(diào)用分享功能失敗 ${res}`)
        })
        // wx.ready(function () {
        //   // 隱藏分享功能
        //   wx.hideMenuItems({
        //     menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline', 'menuItem:share:QZone', 'menuItem:share:qq']
        //   })
        // })
      }
    })
  }
}
export default setWechatConfig

3暇赤、通過ready接口處理成功驗證

      if (shareData.isShare) {
        wx.showMenuItems({
          menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline']
        })
        wx.updateAppMessageShareData({
          title: shareData.shareTitle, // 分享標題
          desc: '點擊了解活動詳情', // 分享描述
          link: url + '?userId=' + userId + '&from=wechat', // 分享鏈接，該鏈接域名或路徑與當前頁面對應的公眾號JS安全域名一致
          imgUrl: shareData.shareImgUrl, // 分享圖標
          success: function () {
            // 設置成功
            console.log('成功')
          }
        })
        wx.updateTimelineShareData({
          title: shareData.shareTitle, // 分享標題this.activityInfo.shareTitle
          link: url + '?userId=' + userId + '&from=wechat', // 分享鏈接宵凌，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
          imgUrl: shareData.shareImgUrl, // 分享圖標
          success: function () {
            // 設置成功
            console.log('成功1')
          }
        })
      }
    })

4鞋囊、通過error接口處理失敗驗證

wx.error(function(res){
  console.log(res)  //輸出錯誤信息
});