最近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解决方案的更多相关文章

  1. 记一笔vue中的中央事件总线的问题,以及解决方案

    代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bu ...

  2. Vue中动态(import 、require)显示img图片

    vue中,经常会遇到显示图片的问题, 如果是一个普通组件的话,那么这样就可以了 <img src="../assets/images/avtor.jpg" width=&qu ...

  3. vue中的绑定class和微信小程序中的绑定class的区别

    微信小程序 小程序里面的class与style绑定,遵循HTML特性绑定,有关于HTML绑定.在进行class与style绑定时,可以直接绑定,也可以带上逻辑与,或者三元运算进行条件控制 JS dat ...

  4. vue中setTimeout切换浏览器页签时怎么清除解决方案

    大家都知道,vue中有完整的生命周期,this.$router.push('')可以跳到相应的页面中,在beforeDestroy中可以监听到,将定时器清空,又或是通过this._isDestroye ...

  5. vue中给window添加滚动监听无效的解决方案

    原文链接: 点我 页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作.我相信不少网友查阅过类似的资料,网友给出的解决方案, ...

  6. 在uniapp或者vue中单行文字或者符号无法换行的终极解决方案

    在VUE开发过程中,会出现比较诡异的情况. 比如常规的英文或中文显示都是很正常的,但是当出现了一些中文符号(比如,!等等)在文末的时候,总是会超出view的显示区域. 那么在遇到上面这种问题我们记得检 ...

  7. vs2015类中方法前的引用链接不显示的解决方案

    在工具→选项,打开如下界面,寻找“文本编辑器→所有语言”中设置显示:&lt;img data-rawheight="761" data-rawwidth="130 ...

  8. ie7、ie8 下Table 中 td 列固定宽度 未按样式设定显示 曲线解决方案

    <!doctype html> <html> <head> <meta charset='utf-8'> <style> .title {b ...

  9. 微信公众号中的支付宝支付与微信支付 && 支付宝支付问题(微信bug)

    一般,在微信公众号中的商城都是需要支持微信支付和支付宝支付的,当然,较大的公司对于鹅厂和阿里的站队就不说了,所以这里简单记录一下支付宝支付和微信支付的主要流程.说是简单介绍,这是因为确实不难,因为前端 ...

随机推荐

  1. Spark2.1.0——内置Web框架详解

    Spark2.1.0——内置Web框架详解 任何系统都需要提供监控功能,否则在运行期间发生一些异常时,我们将会束手无策.也许有人说,可以增加日志来解决这个问题.日志只能解决你的程序逻辑在运行期的监控, ...

  2. python集合操作和内置方法

    一 集合基本介绍 集合:在{}内用逗号隔开每个值,集合的特点: 每个值必须是不可变类型 集合是无序的 集合的值不能重复 集合的应用场景较少,最重要的应用场景为进行关系运算以及去重. 二 集合的操作 1 ...

  3. Apollo 3 定时/长轮询拉取配置的设计

    前言 如上图所示,Apollo portal 更新配置后,进行轮询的客户端获取更新通知,然后再调用接口获取最新配置.不仅仅只有轮询,还有定时更新(默认 5 分钟一次).目的就是让客户端能够稳定的获取到 ...

  4. 基本css说明

    /*-moz代表firefox浏览器私有属性 2.-ms代表ie浏览器私有属性 3.-webkit代表safari.chrome私有属性*/ body, dl, dd, ul, ol, h1, h2, ...

  5. Java并发编程:ThreadLocal的使用以及实现原理解析

    前言 前面的文章里,我们学习了有关锁的使用,锁的机制是保证同一时刻只能有一个线程访问临界区的资源,也就是通过控制资源的手段来保证线程安全,这固然是一种有效的手段,但程序的运行效率也因此大大降低.那么, ...

  6. Java框架之Struts2(一)

    在学习Struts2之前,我们要知道Java为什么要有反射机制呢?反射机制可以说是填补Java不能动态访问某一个类的空白.利用反射机制,动态的创建一个对象.动态的访问类的某个属性,而且访问哪一个属性自 ...

  7. 性能监控(5)–JAVA下的jstat命令

    jstat的基本语法为 Usage: jstat -help|-options jstat -<option> [-t] [-h<lines>] <vmid> [& ...

  8. C#中构造函数的定义

    C#构造函数是在创建给定类型的对象时执行的类方法.构造函数具有与类相同的名称,它通常初始化新对象的数据成员.不带参数的构造函数称为"默认构造函数". 无论何时,只要使用 new 运 ...

  9. canvas动画效果新年祝福话语

    html代码 <ul id="ul"></ul> css代码 * { margin:; padding:; } ul { list-style: none; ...

  10. 【读书笔记】iOS-设计简单的Frenzic式益智游戏

    如果你决定用UIView动画或Core Animation,一定要编写一些测试用例,模拟游戏可能遇到的要求最高的动画,另外不要忘记播放声音.不要等到最后才增加声音,因为在iPhone上播放音乐和音效确 ...