[转]Vue项目全局配置微信分享思路详解
这篇文章给大家介绍了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.jsimport Vue from 'vue'// 在组件外使用vux集成的微信jssdkimport { 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.jsimport 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
最新文章
- DOM的小练习，两个表格之间数据的移动
- Bootstrap之选项卡
- splay最终模板
- JQuery动画效果
- 高性能JS笔记4——算法和流程控制
- 【PHP用户的错误日志】
- Oracle临时表GLOBAL TEMPORARY TABLE
- erl0010 - erlang查看ets 当前系统使用情况和当前配置上限
- vagrant拷贝后vagrant file需要加的配置
- Java单态模式
- python成长之路【第十八篇】：python模块介绍、模块导入和重载
- Chapter 1 Securing Your Server and Network(12):保护链接服务器
- Web安全工具大汇聚
- in_flight_pqueue.go
- <网络编程>IO复用
- ps -aux返回超时的可能原因
- 机器学习（二）--------单变量线性回归(Linear Regression with One Variable)
- 倒水问题（Fill, UVa 10603）
- pytest.3.Assert
- WinForm自定义控件–TextBox扩展