这篇文章给大家介绍了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~~~' , imgUrl: '' } }, ] } ] // 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