Vue 项目实现微信分享的自定义分享链接问题解决

  前两天在做微信公众号里的项目的时候有一个需求是在 vue 项目中实现微信分享,然后在自定义分享链接的时候出了一些问题,

分享出去的自定义链接(链接中携带参数)总是会直接跳到项目首页,而且是玄学跳转,时而自定义链接正常,时而直接跳到首页,

答案在文章最后面。

 

正文:

  1. 这里不说微信分享中的配置微信 js-sdk ,请自行查阅微信公众号开发文档

  2. 阐述下 解决此问题的一些思路

解决这个问题需要知道这样的信息,微信公众号中的项目在请求签名和自定义分享链接的时候对于Vue 的#路由不太友好

1. 请求签名时如果使用Vue的全路径(包括#部分路由)请求时会报签名失败或者无效的签名,因此我们需要使用以下方法来避免此问题

  - 使用  location.href.split('#')[0] 获取到url中#之前的部分,将获取的url 传给后台请求签名

  - 请求使用post, 保证传给后台的url是不经过任何加工的

  以上两步确认无误,如果签名失败就可以将锅甩给后台了

2. 自定义分享链接失败,分享出去后总是跳到首页,这个问题确实是困扰了我好一段时间,因为这个自定义链接是时而正常跳转,时而跳到首页的

附上我的自定义链接错误示例

link: `${location.origin}/***/inde.html#/sharepage?id=123456`

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpzswj.html