前言
这里总结一下微信分享怎么全局配置，这里只写代码，至于微信 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中调用该方法，不需要传任何参数
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()方法中
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)
})
}
