这篇文章给大家介绍了vue项目全局配置微信分享思路讲解,使用vue作为框架,使用vux作为ui组件库,具体内容详情大家跟随脚本之家小编一起学习吧
使用的技术
1.使用vue作为框架
2.使用vux作为UI组件库
全局配置微信分享思路
1.区分一般和特殊,一般情况,全局配置默认分享文案;特殊情况分两种,一种是分享内容不需要异步获取,则在路由跳转时配置,另一种是分享内容需要异步获取,则需要待异步内容获取后更新分享内容。
2.不需要异步获取的内容我们采用定义在路由元信息的方式,直接在每次路由跳转之后调用公共函数更新分享内容。
具体可以查看微信JSSDK的使用说明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
// wxShare.js
import Vue from
'vue'
// 在组件外使用vux集成的微信jssdk
import { WechatPlugin, AjaxPlugin } from
'vux'
Vue.use(WechatPlugin)
Vue.use(AjaxPlugin)
export
default
function
wxShare ({title, desc, timelineTitle, link, imgUrl} = {}) {
Vue.wechat.config({
debug:
false
,
appId: appId,
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
jsApiList: [
'onMenuShareAppMessage'
,
'onMenuShareTimeline'
]
})
Vue.wechat.ready(() => {
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~~~'
,
}
},
]
}
]
// 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.shareLogo})
})
}
// main.js
import routerRule from ...
routerRule(router)
|
经过上面的配置,router.afterEach都会调用一次wxShare,重新读取router中的meta的信息重新定义微信分享内容,达到全局配置和特殊配置结合的目的。
需要异步获取的分享内容
这种情况,我们采取在vue实例的created钩子中,在获取数据的成功回调中调用一次wxShare即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// homepage.vue
<script>
export
default
{
data() {
return
{
}
},
created() {
getHomepageInfo()
.then( res => {
this
.$wxShare({
title: res.title,
desc: res.desc,
imgUrl: res.logo
})
} )
}
}
</script>
|
需要注意的坑点
1.如果项目采用非history模式,则需要去掉url上#后的部分传给后端换取微信签名。
2.根据微信官方说明:
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用...
由于SPA应用,url变化之后,需要重新config一次,重新注入当前页面的配置信息,因此这个步骤必须在router.afterEach中调用!因为根据vue-router的说明,在导航被确认之后,再调用全局的afterEach钩子,这个时候导航已经确认了,url已经改变,可以针对更新后的url重新获取微信签名了。
总结
以上所述是小编给大家介绍的Vue项目全局配置微信分享思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
【备注】转载作者 :FrankCheung