Vue 项目全局配置微信分享

2021-06-09

前言

这里总结一下微信分享怎么全局配置，这里只写代码，至于微信 JSSDK 的使用，可以参考我之前的文章微信公众号开发（四）微信分享
1.分享文案全局默认配置
2.分享文案，不需要异步获取，但是每个页面的分享文案不一样
3.分享文案需要异步获取

写一个全局的js（wxShare.js）文件，如下

// 获取微信配置信息的接口
import login from '../api/login-api'

function wxShareMethod (title, desc, link, imgUrl) {
  const url = window.location.href.split('#')[0]
  console.log(url)
  var data = {
    url: url
  }
  // 获取微信配置信息的接口
  login.getConfig(data).then(res => {
    console.log('config配置', res)
    if (res.data.code === 200) {
      // eslint-disable-next-line no-undef
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
        appId: process.env.appid, // 必填，公众号的唯一标识，这里是根据环境区分不同的addid，所以appId配置到了分环境打包那里
        timestamp: res.data.item.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.item.nonceStr, // 必填，生成签名的随机串
        signature: res.data.item.signature, // 必填，签名
        jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表
      })
      // eslint-disable-next-line no-undef
      wx.ready(function () {
        // 分享给朋友
        // eslint-disable-next-line no-undef
        wx.onMenuShareAppMessage({
          title: title | '倾听师入驻平台', // 分享标题
          desc: desc | '你想说， 我想听          你需要陪伴,刚好我在', // 分享描述
          link: process.env.url + link | process.env.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致，这里也是根据打包环境去区分的
          imgUrl: imgUrl | 'https://vip-flow.luboedu.com/listener/%E5%88%86%E4%BA%AB%E9%93%BE%E6%8E%A502.png', // 分享图标
          type: '', // 分享类型,music、video或link，不填默认为link
          success: function (res) {
            // 用户点击了分享后执行的回调函数
          }
        })
        // 分享到朋友圈
        // eslint-disable-next-line no-undef
        wx.onMenuShareTimeline({
          title: title | '倾听师入驻平台', // 分享标题
          desc: desc | '你想说， 我想听          你需要陪伴,刚好我在', // 分享描述
          link: process.env.url + link | process.env.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致，这里也是根据打包环境去区分的
          imgUrl: imgUrl | 'https://vip-flow.luboedu.com/listener/%E5%88%86%E4%BA%AB%E9%93%BE%E6%8E%A502.png', // 分享图标
          type: '', // 分享类型,music、video或link，不填默认为link
          dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
          success: function (res) {
            // 用户点击了分享后执行的回调函数
          }
        })
      })
    }
  })
}
// 挂载到vue原型，所有vue实例都能继承该方法
export default {
  install (Vue) {
    Vue.prototype.wxShareMethod = wxShareMethod
  }
}

1.情况1的话，可以直接在全局文件，如main.js中调用该方法，不需要传任何参数

1
2
3

setTimeout(() => {
  this.wxShareMethod()
}, 1000)

2.情况2的话，则需要配置一下路由的meta，如下：

{
  path: '/home',
  name: 'Home',
  component: () => import('../views/jobs/home.vue'),
  meta: {
    title: '分享标题',
    desc: '分享描述',
    link: '分享链接，一般都会有多个环境，所以这里建议写成"/home"这种的，然后在wxShare.js文件中的分享链接那里，去把域名拼接一下',
    imgUrl: '分享图标'
  }
}

然后利用路由的全局后置钩子，调用分享的方法，把meta里配置的信息，传入wxShareMethod()方法中

1
2
3

router.afterEach((to, from) => {
  this.wxShareMethod(to.meta.title, to.meta.desc, to.meta.link, to.meta.imgUrl)
})

3.情况3的话，在需要异步获取分享文案的vue文件中，在获取文案成功之后，调用该方法就可以了

created () {
  // 这里是模拟接口调用，各位换成自己的接口就可以了
  getShare().then(res => {
    this.wxShareMethod(res.data.title, res.data.desc, res.data.link, res.data.imgUrl)
  })
}

展开全文 >>