H5-调用小程序分享SDK

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({
          // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过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(`调用分享功能失败 ${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)  //输出错误信息
});