前端之家收集整理的这篇文章主要介绍了
Vue项目全局配置微信分享思路详解，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
这个项目为移动端项目，主要用于接入公众号服务。项目采用两种登录方式，微信授权登录以及账号密码登录。对于移动端项目而言，为了便于项目扩展以及提供开发热更新速度，项目分为不同的模块，每个模块是一个单页面应用。页面分为两种，一种是需要用户登录之后才能浏览，另一种是用户无需登录即可浏览。无论哪一种，均配置微信分享。
使用的技术
1.使用vue作为框架
2.使用vux作为UI组件库
全局配置微信分享思路
1.区分一般和特殊，一般情况，全局配置默认分享文案；特殊情况分两种，一种是分享内容不需要异步获取，则在路由跳转时配置，另一种是分享内容需要异步获取，则需要待异步内容获取后更新分享内容。
2.不需要异步获取的内容我们采用定义在路由元信息的方式，直接在每次路由跳转之后调用公共函数更新分享内容。
具体可以查看微信JSSDK的使用说明
{
Vue.wechat.onMenuShareAppMessage({
title: title,//
分享标题
desc: desc || '默认
分享文案',//
分享描述
link: link || window.location.href,//
分享链接
imgUrl: imgUrl || '图标地址（必须是有效的Link）' //
分享图标
})
Vue.wechat.onMenuShareTimeline({
title: timelineTitle || desc || '默认
分享文案',//
分享标题，由于
分享到朋友圈没有desc，所以这里采用的策略是，指定的朋友圈
分享标题优先，其次采用发送给朋友的描述，最后采用默认文案。
link: link || window.location.href,//
分享链接
imgUrl: imgUrl || '图标地址（必须是有效的Link）' //
分享图标
})
})
Vue.wechat.error((res) => {
})
}
// 为Vue的原型对象
添加该
方法，则所有vue实例都能继承该
方法
Vue.prototype.$wxShare = wxShare
// router/index.js 每个模块都有自己内部的路由配置
// codes...
const routes = [
{
path: '/index',name: 'index',redirect: '/index/homepage',children: [
{
path: '/index/homepage',name: 'homepage',component: homepage
Meta: {
title: '这是主页',shareDesc: '这是本站的主页',desc: 'homepage,click and see!',timelineTitle: '这是
首页，欢迎点击关注，blablablablabla~~~',imgUrl: 'http://frankzhang.me/wp-content/uploads/2017/08/cropped-favicon-01.png'
}
},]
}
]
// routerRule，公共路由配置，所有模块共用一个路由控制策略
import wxShare from '@/utils/wxShare'
export default function routerRule (router) {
// other codes...
router.afterEach(( to,from ) => {
wxShare({ title: to.
Meta.title,desc: to.
Meta.shareDesc,link: to.
Meta.shareLink,
logo: to.
Meta.share
logo})
})
}
// main.js
import routerRule from ...
routerRule(router)
经过上面的配置，router.afterEach都会调用一次wxShare，重新读取router中的Meta的信息重新定义微信分享内容，达到全局配置和特殊配置结合的目的。
这种情况，我们采取在vue实例的created钩子中，在获取数据的成功回调中调用一次wxShare即可
export default {
data() {
return {
}
},created() {
getHomepageInfo()
.then( res => {
this.$wxShare({
title: res.title,desc: res.desc,imgUrl: res.
logo
})
} )
}
}
需要注意的坑点
1.如果项目采用非history模式，则需要去掉url上#后的部分传给后端换取微信签名。
2.根据微信官方说明：
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用...
由于SPA应用，url变化之后，需要重新config一次，重新注入@R_301_340@的配置信息，因此这个步骤必须在router.afterEach中调用！因为根据vue-router的说明，在导航被确认之后，再调用全局的afterEach钩子，这个时候导航已经确认了，url已经改变，可以针对更新后的url重新获取微信签名了。
总结
以上所述是小编给大家介绍的Vue项目全局配置微信分享思路详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/32508.html
