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)
一般,在微信公众号中的商城都是需要支持微信支付和支付宝支付的,当然,较大的公司对于鹅厂和阿里的站队就不说了,所以这里简单记录一下支付宝支付和微信支付的主要流程.说是简单介绍,这是因为确实不难,因为前端 ...
随机推荐
- 了解Job和JobDeatil ,JobDataMap (三)
一:定义 Job:实现任务逻辑的接口. JobDeatil:JobDeatil为Job提供了许多设置属性,以及JobDataMap成员变量属性,他用来储存特定的Job实例状态信息,调度器需要使用Job ...
- Android开发day-01
http://note.youdao.com/noteshare?id=b7f0d55c1e5eab20bb47e5c58e683611
- Bell(hdu4767+矩阵+中国剩余定理+bell数+Stirling数+欧几里德)
Bell Time Limit:3000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status ...
- Flask 中的 CBV 与上传文件
from flask import Flask, views, render_template, request app = Flask(__name__) app.config['DEBUG'] = ...
- JS中数组去重的九方法
数组去重方法 方法一:运用set结构特点:存储的数据没有重复的,结果为对象,再用Array.from()转换成数组 var arr = [1,1,2,1,3,4,5] ...
- 【工具相关】Web-HTML特殊字符对照表
特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 Α Α Α Β Β Β Γ Γ Γ Δ Δ Δ Ε Ε Ε Ζ Ζ Ζ Η Η Η Θ Θ Θ Ι Ι ...
- TUM数据集rgbd_benchmark工具的使用方法
# 在学习视觉slam过程中,需要对数据集合进行预处理和对slam或者跟踪结果进行评价,TUM提供一组这样的工具,为了自己以后方便查找,于是把它记录下来 一.RGBD_Benchmark工具下载链接: ...
- MIPS 安全相关paper阅读笔记
前言 论文来自 https://cyber-itl.org/2018/12/07/a-look-at-home-routers-and-linux-mips.html Linux_MIPS_mis ...
- 利用webpack搭建的前端工程化环境
随着webpack3.x的发布,其功能也越来越强大,很多的项目的编译打包工具也由gulp逐渐转移到webpack.最近因为项目重构考虑使用使用vue,同时想从原来的gulp切换到webpack,所以搭 ...
- 纯CSS选项卡
html: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...