Vue项目全局配置微信分享思路详解
这个项目为移动端项目,主要用于接入公众号服务。项目采用两种登录方式,微信授权登录以及账号密码登录。对于移动端项目而言,为了便于项目扩展以及提供开发热更新速度,项目分为不同的模块,每个模块是一个单页面应用。页面分为两种,一种是需要用户登录之后才能浏览,另一种是用户无需登录即可浏览。无论哪一种,均配置微信分享。
使用的技术
1.使用vue作为框架
2.使用vux作为UI组件库
全局配置微信分享思路
1.区分一般和特殊,一般情况,全局配置默认分享文案;特殊情况分两种,一种是分享内容不需要异步获取,则在路由跳转时配置,另一种是分享内容需要异步获取,则需要待异步内容获取后更新分享内容。
2.不需要异步获取的内容我们采用定义在路由元信息的方式,直接在每次路由跳转之后调用公共函数更新分享内容。
具体可以查看微信JSSDK的使用说明
// 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: '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.shareLogo}) }) } // main.js import routerRule from ... routerRule(router)
经过上面的配置,router.afterEach都会调用一次wxShare,重新读取router中的meta的信息重新定义微信分享内容,达到全局配置和特殊配置结合的目的。
需要异步获取的分享内容
这种情况,我们采取在vue实例的created钩子中,在获取数据的成功回调中调用一次wxShare即可
// 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项目全局配置微信分享思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- PHP页面跳转代码
- 分布式事务 TCC-Transaction 源码解析 —— 调试环境搭建
- 机器学习入门——使用python进行监督学习
- 推荐算法的介绍,第一部分——协同过滤与奇异值分解
- 在ASP中实现UNIX时间戳
- 【学术】厉害了我的哥,国外技术大咖仿造了谷歌的Arts &Culture,找到古代的“你”
- 【技巧】应赛技巧,教你如何在Kaggle比赛中排在前1%
- 熔断器 Hystrix 源码解析 —— 命令执行(一)之正常执行逻辑
- 智能主题检测与无监督机器学习:识别颜色教程
- 如何下载安装Weka机器学习工作平台
- Dubbo 源码解析 —— LoadBalance
- 如何处理机器学习中类的不平衡问题
- 【死磕Java并发】—– Java内存模型之重排序
- Mask R-CNN源代码终于来了,还有它背后的物体检测平台
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Launcher 启动 activity 流程
- 【每日一题】29. Divide Two Integers
- Ubuntu19.1 中 GitLab 的安装配置与卸载
- Linux 中的存储结构与磁盘划分
- Linux 中用户与权限管理
- Netty入门教程——认识Netty
- 14.VBA处理xml文件
- 一文带你理解Spring Cloud高并发微服务架构核心理念的五脏六腑
- Ubuntu设置定时任务——每10秒钟执行一次命令(修改文件权限)
- 多线程爬虫入门及问题解决(爬取表情包)
- 10.带人机对战的五子棋程序
- Spring Boot、 Spring Cloud 、OAuth2 的RBAC 权限管理系统分享
- 完美解决个人微信音频amr文件与mp3格式互转
- 【学不动了系列】之 Deno 入门 什么是Deno安装DenoDeno运行时(Runtime)Deno标准库第三方模块
- SAUI-瀑布流改版(grid)