前两天在做微信公众号里的项目的时候有一个需求是在 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`