vue中使用baidushare分享到微信无法显示bug解决方案
最近vue单页面项目中有个页面分享的功能需求,按以往经验,选择了百度开源的baidushare.js
经过一天的挣扎,终于弄清楚了分享到微信后无法显示的原因。
对比分析:
以往成功使用:另写了一个专门的分享着陆页,也就是一个html文件,然后在里面发请求拿数据渲染页面。分享链接→http://www.123.com/share.html?id=123
本次失败使用: 分享着陆页没有单独写,还是利用vue单文件的一个子路由+参数。分享链接→http://www.123.com/#/share?id=123
结论:
通过查看baidushare分享到微信时所生成二维码扫描出来的链接,并对比在线工具产生的的二维码,惊奇的发现,不一样!!!
baidushare会把需要分享链接 ‘#’ 号后面的全部丢弃并加上一堆乱七八糟的东西。直白了说,就是baidushare分享到微信时生成的二维码是错的,当然,这只是在开发vue单页面应用并使用hash模式时才会产生,也只是分享到微信时才有问题。
解决办法:
1. 老老实实写一个html着陆页,避开 ‘#’。
2. 自己找个插件生成正确的二维码,然后在baidushare config配置的 onAfterClick 回调里替代baidushare的二维码。这里面需要一些基本的插件调用和dom操作,基础知识,就不详细写了。
vue中使用baidushare分享到微信无法显示bug解决方案的更多相关文章
- 记一笔vue中的中央事件总线的问题,以及解决方案
代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bu ...
- Vue中动态(import 、require)显示img图片
vue中,经常会遇到显示图片的问题, 如果是一个普通组件的话,那么这样就可以了 <img src="../assets/images/avtor.jpg" width=&qu ...
- vue中的绑定class和微信小程序中的绑定class的区别
微信小程序 小程序里面的class与style绑定,遵循HTML特性绑定,有关于HTML绑定.在进行class与style绑定时,可以直接绑定,也可以带上逻辑与,或者三元运算进行条件控制 JS dat ...
- vue中setTimeout切换浏览器页签时怎么清除解决方案
大家都知道,vue中有完整的生命周期,this.$router.push('')可以跳到相应的页面中,在beforeDestroy中可以监听到,将定时器清空,又或是通过this._isDestroye ...
- vue中给window添加滚动监听无效的解决方案
原文链接: 点我 页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作.我相信不少网友查阅过类似的资料,网友给出的解决方案, ...
- 在uniapp或者vue中单行文字或者符号无法换行的终极解决方案
在VUE开发过程中,会出现比较诡异的情况. 比如常规的英文或中文显示都是很正常的,但是当出现了一些中文符号(比如,!等等)在文末的时候,总是会超出view的显示区域. 那么在遇到上面这种问题我们记得检 ...
- vs2015类中方法前的引用链接不显示的解决方案
在工具→选项,打开如下界面,寻找“文本编辑器→所有语言”中设置显示:<img data-rawheight="761" data-rawwidth="130 ...
- ie7、ie8 下Table 中 td 列固定宽度 未按样式设定显示 曲线解决方案
<!doctype html> <html> <head> <meta charset='utf-8'> <style> .title {b ...
- 微信公众号中的支付宝支付与微信支付 && 支付宝支付问题(微信bug)
一般,在微信公众号中的商城都是需要支持微信支付和支付宝支付的,当然,较大的公司对于鹅厂和阿里的站队就不说了,所以这里简单记录一下支付宝支付和微信支付的主要流程.说是简单介绍,这是因为确实不难,因为前端 ...
随机推荐
- 一篇极好的Git 总结
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯工蜂发表于云+社区专栏 常用命令 简单的,常用的命令也就几个.但是想非常熟练使用,怕是要记住几十个. Workspace:工作区( ...
- kali linux安装中文输入法
1.先安装VMware虚拟机,再安装kali linux ------------------------------------------------------------------ 2.安装 ...
- Redis缓存使用技巧
缓存能够有效加速应用的访问速度,同时可以降低后端负载,在应用架构中起着至关重要的作用,本文主要介绍缓存使用的一些技巧. 缓存更新策略 LRU/LFU/FIFO算法剔除 场景:数据一致性要求较低 原理: ...
- SpringMVC入门学习(二)
SpringMVC入门学习(二) ssm框架 springMVC 在上一篇博客中,我简单介绍了一下SpringMVC的环境配置,和简单的使用,今天我们将进一步的学习下Springmvc的操作. mo ...
- 使用GitHub搭建个人博客
博客已经从博客园慢慢搬到GitHub 上,可能在博客园上显示不是很规整,可以移步到另外的一个上面看 Blog 两边博客同时更新. 欢迎各位star 和 follower 搭建过程 在搭建博客时候也踩 ...
- 【Java并发编程】21、线程池ThreadPoolExecutor源码解析
一.前言 JUC这部分还有线程池这一块没有分析,需要抓紧时间分析,下面开始ThreadPoolExecutor,其是线程池的基础,分析完了这个类会简化之后的分析,线程池可以解决两个不同问题:由于减少了 ...
- MEF 插件式开发之 小试牛刀
MEF 简介 Managed Extensibility Framework 即 MEF 是用于创建轻量.可扩展应用程序的库. 它让应用程序开发人员得以发现和使用扩展且无需配置. 它还让扩展开发人员得 ...
- C#多线程——优先级
在我的公司这里,因为要跟很多特殊的设备打交道,所以会用到多线程的东西,那么我们在进行多线程处理的时候,怎么去设置优先级 我这里用听歌和下载小说做了个例子,我们用电脑的时候肯定是可以边听歌边下载小说的, ...
- canvas-color的几种设置
#ffff #642 = #664422 rgb(255,128,0) rgba(100,100,100,0.8) hsl(20,62%,28%) hsla(40,82%,33%,0.6) red
- 洛谷P2572 [SCOI2010]序列操作(ODT)
题解 题意 题目链接 Sol ODT板子题..... // luogu-judger-enable-o2 #include<bits/stdc++.h> #define LL long l ...