使用Vue.js开发微信公众号网页,需要进行微信分享,遇到两个问题,在此记录。
1.解决微信分享“#”后面内容分享后丢失的问题。
由于我使用的路由模式为hash模式,每一个页面的路径为
http://www.abc.com/#/good?goodsId=1
这样的模式,分享的链接也是这个,当分享给微信好友后,分享的链接变成
http://www.abc.com/?from=singlemessage/#/
这样的形式,hash部分丢失,打开后到首页。所以就先想办法吧hash给补上吧。经过测试后,发现这样可以(亲测)
解决方案:
假设当前的地址路径为 http://www.abc.com/#/good?goodsId=1
那么修改分享的链接为 http://www.abc.com/?/#/good?goodsId=1,
这样修改后,分享出去的链接变为 http://www.abc.com/?/&from=singlemessage/#/good?goodsId=1,
hash部分就有了。
2.解决微信二次分享问题。
上一步解决了微信分享后hash部分丢失的问题,当第一次分享出去的链接,被好友再次分享时,会出现问题,比如图片不显示、描述不显示等等,在此要对分享后的链接做出修正。我们在vue的路由里面,对跳转链接进行拦截,判断链接里面有没有"?/&from"之类的字符,如果有,说明是分享的链接,把携带的from之类的字符串去掉。
解决方案:
以 http://www.abc.com/?/&from=singlemessage/#/good?goodsId=1 这个链接为例
截取 "?/&"这个字符串之前的部分,得到 http://www.abc.com/
截取 "#" 这个字符串以及之后的部分,得到 #/good?goodsId=1
将两个字符串进行拼接,得到 http://www.abc.com/#/good?goodsId=1
然后使用H5 相关API ,history.replaceState(),对当前 http://www.abc.com/?/&from=singlemessage/#/good?goodsId=1 地址做出修改。
history.replaceState(null,"",http://www.abc.com/#/good?goodsId=1)即可
这个问题的处理都在路由拦截器里面操作。
原文地址 https://blog.csdn.net/SKYYYF/article/details/104117064