vue微信H5自定义分享兼容ios、PC、安卓

1.安装微信sdk

yarn add weixin-js-sdk // 安装依赖
// 或者在index.html引入<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 
// 用依赖包在main.js引入
import wx from 'weixin-js-sdk'
Vue.prototype.$wx = wx

2.配置

 （1）首先获取签名等信息（appId, nonceStr, signature, timestamp）

向后端传当前路由：

location.href.split('#')[0]

（2）使用后端传回信息配置

const { appId, nonceStr, signature, timestamp } = res.data
this.$wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId, // 必填，公众号的唯一标识
            timestamp, // 必填，生成签名的时间戳
            nonceStr, // 必填，生成签名的随机串
            signature,// 必填，签名
            jsApiList:[
                      'updateAppMessageShareData',
                      'updateTimelineShareData',
                      'onMenuShareAppMessage',
                      'onMenuShareTimeline'] // 必填，需要使用的JS接口列表
          })
          this.$wx.ready(() => {
            this.shareConfig(timestamp) // 自定义分享，为了兼容ios用到timestamp
          })
          this.$wx.error(function(res) {
            console.log('config error', res.errMsg)
          })

（3）自定义分享信息

shareConfig (timestamp) { // 自定义分享内容
      let iosUrl = this.$isIOS() ? `#/?t=${timestamp}` : '' // ios需要添加时间戳
      const shareData = {
        title: '标题', // 分享标题
        desc: '描述', // 分享描述
        link:'link'+ iosUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: 'https://logo.png' // 分享图标，不能太大（小于30KB吧）不能是透明背景否则ios会有和默认图片重叠
      }
      const shareFriend = { // 分享好友
        ...shareData,
        success: function() {
          // 设置成功
          console.log('设置分享好友成功')
        },
        fail: function(res) {
          console.log('设置分享好友失败', res.errMsg)
        }
      }
      const shareTimeline = { // 分享朋友圈
        ...shareData,
        success: function() {
          // 设置成功
          console.log('设置分享朋友圈成功')
        },
        fail: function(res) {
          console.log('设置分享朋友圈失败', res.errMsg)
        }
      }
      if (this.$isPC()) { // 兼容PC端用旧接口
        this.$wx.onMenuShareAppMessage(shareFriend)
        this.$wx.onMenuShareTimeline(shareTimeline)
      } else {
        this.$wx.updateAppMessageShareData(shareFriend)
        this.$wx.updateTimelineShareData(shareTimeline)
      }
 
    }
$isIOS () {
    const u = navigator.userAgent
    return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) || u.indexOf('iPhone') > -1 || u.indexOf('iPad') > -1
}
$isPC() {
    const userAgentInfo = navigator.userAgent
    const Agents = ['Android', 'iPhone',
    'SymbianOS', 'Windows Phone',
    'iPad', 'iPod'
     ]
     let flag = true
     for (let i = 0; i < Agents.length; i++) {
      if (userAgentInfo.indexOf(Agents[i]) != -1) {
        flag = false
        break
      }
     }
     return flag
}

注意：标准字体大小前提下：

自定义分享的标题最多每行15字（PC14字），2行；

描述最多每行13字（PC11字），3行。