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

Posted Black Bentel

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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`

如上,因为分享出去的链接不是当前页面的链接,所以需要拼接一下

当用户从分享进来的链接进来的时候是需要先重定向获取code 再进入这个链接,所以先判断链接中是否有code并且code是否正常,分享出去的链接code肯定是不正常的,所以就有了如下代码

1 let url
2 if (location.href.includes(‘/sharepage)) { // 说明是分享的页面
3     let id = location.href.split(‘?‘)[1].split(‘=‘)[1] // 这里简单获取下参数id
4     url = `${location.origin}/***/index.html#/sharepage?id=${id}`       
5 } else {
6     url = `${location.origin}/***/index.html` // 正常的重定向链接  
7 }
8 
9 window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=******&redirect_uri=${url}?response_type=code&scope=snsapi_base&state=123`  // 重定向

 

如上代码,分享链接经常跳到首页,而且几率很大

寻找问题,在 App.vue 中  created 周期函数中  alert(location.href) 查看当前进入的链接地址是否正确,是否是自己安排好的地址,这里  console.log(location.href)   然后用 vconsole 查看日志是没有用的,因为重定向了,alert会在它重定向前截停并弹框从分享的链接进入的路径,测试后发现,当跳转到首页的时候 alert 出来的也是首页,然后判断到不是分享的页面也就直接重定向到首页了,但也有几率是alert 出分享页面的链接并能跳转到正常的链接,google之后,网友有一些说法,说自定义的分享链接#后的部分会被截取掉,可以使用 手动拼接的方式来定义分享的链接,如下

1 link: location.href.split(‘#‘)[0] + ‘#‘ + location.href.split(‘#‘)[1]

 

当然如果分享出去的链接不是当前页面的话,后面的部分可以自定义,这个方法主要在于手动拼接#,而且有很多网友回复成功,看了这个方法之后笔者

并没有直接套用,因为这样的做法分享出去的链接还是有 # 号的,而且笔者遇到的情况是个概率事件,也就是时灵时不灵,所以笔者放弃了这个方法,有兴趣的可以试试这个方法,但是上面的方法是让笔者想到了另一种思路,代码如下:

1 let noSharp = location.href.split(‘#‘)[0]
2 let url = noSharp.includes(‘?‘) : `${noSharp}&shareId=1234` : `${noSharp}?shareId=1234`
3 link: url

可以看出,分享出去的链接并不是分享页面的链接,而是首页链接携带了一个参数  shareId ,而且链接中不会有 # 号,不用考虑 # 后面的内容被微信截取掉,能这样做是因为有一个前提:重定向的链接并不会对 # 有偏见,看下面代码

1 let url
2 if (location.href.includes(‘shareId‘)) { // 用是否有shareId 来判断是不是分享出去的链接
3     let searchData = getUrlSearch()// 这里需要一个获取url中search 参数的方法,不详述
4     let shareId = searchData.shareId
5     url = `${location.origin}/***/index.html#/sharepage?id=${shareId}`  
6 } else {
7     url = `${location.origin}/***/index.html`      
8 }
9 window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=*****&redirect_uri=${url}?response_type=code&scope=snsapi_base&state=123`

 

如上,我们可以在进入链接之后判断有没有分享的参数,如果有分享的参数,那就在这里手动拼接分享的页面并将分享链接中的参数拼接在后面。

然后重定向到它该去的地方,经笔者测试,可行。

如果各位看官有更好的想法的话请多多指教,互相学习。

 

以上

 

以上是关于Vue 项目实现微信分享的自定义分享链接问题解决的主要内容,如果未能解决你的问题,请参考以下文章

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

微信小程序代码片段

vue实现将自己网站(h5链接)分享到微信中形成小卡片(超详细)

uniapp h5+webapi 实现微信浏览器的自定义分享(微信JSSDK)

uniapp h5+webapi 实现微信浏览器的自定义分享(微信JSSDK)

uniapp h5+webapi 实现微信浏览器的自定义分享(微信JSSDK)