vue中使用baidushare分享到微信无法显示bug解决方案

Posted 2020-11-20 亲爱的混蛋

最近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操作，基础知识，就不详细写了。