vue中微信分享好友，朋友圈功能

第一步：安装weixin-js-sdk

npm i weixin-js-sdk -S

第二步：配置信息

对于vue来说，推荐在App.vue中进行信息配置，这里提供了一个功能方法进行配置

export function handleWxConfig() {
  const wx = require('weixin-js-sdk')
  // url 是你存储微信配置信息的接口
  axios.get(url)
    .then(res => {
      if (res.errorcode === 'ok') {
        let { signature, timestamp, noncestr } = res.result
        wx.config({
          // debug: this.$store.state.isDebugger ? true : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: APPID, // 必填，公众号的唯一标识
          timestamp: timestamp, // 必填，生成签名的时间戳
          nonceStr: noncestr, // 必填，生成签名的随机串
          signature: signature, // 必填，签名
          jsApiList: ['chooseImage', 'updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
        })
      } else {
        alert('获取微信签名失败')
      }
    })
    .catch(err => {
      console.error(err)
    })
}

第三步：分享好友和分享朋友圈自定义配置

wx.ready(() => {
        let imgUrl = ''
        let desc = ''
        let link = ''
        wx.updateAppMessageShareData({
          title: name, // 分享标题
          desc: desc, // 分享描述
          link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: imgUrl, // 分享图标
          success: () => {
            Toast('发送好友分享模板设置成功')
          },
          fail: (err) => {
            // 设置失败
            Toast('发送好友分享模板设置失败')
          }
        })
        wx.updateTimelineShareData({
          title: name, // 分享标题
          link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: imgUrl, // 分享图标
          success: () => {
            Toast('朋友圈分享模板设置成功')
          },
          fail: (err) => {
            // 设置失败
            Toast('朋友圈分享模板设置失败')
          }
        })
      })

以上三步就可以配置好分享功能

注意

1、直接在微信中通过链接打开的话，分享出去的也是一个链接，可以将链接转化为一个二维码，通过微信扫码打开界面，这是分享出去就是自定义的卡片了。
2、微信没有暴露出获取用户列表接口，就是不能做成直接选择用户分享，必须引导用户，点击右上角三个点，进行分享。
3、提供几个判断平台的方法

// 判断是否是IOS
export function isIOS() {
  return /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)
}

// 判断是否是安卓
export function isAndroid() {
  return /Android/i.test(navigator.userAgent)
}

// 判断微信环境
export function isWXEnv() {
  const ua = window.navigator.userAgent.toLowerCase()
  if (ua.match(/MicroMessenger/i) && ua.match(/MicroMessenger/i)[0] === 'micromessenger') {
    return true
  } else {
    return false
  }
}