vue 微信自定义分享连接拼接参数实现分享功能

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`

 

如上，咱们能够在进入连接以后判断有没有分享的参数，若是有分享的参数，那就在这里手动拼接分享的页面并将分享连接中的参数拼接在后面。