这篇文章可能把问题想复杂了，设置微信分享推荐阅读这篇文章 >>  前端调用微信分享函数封装(适用于原生页面和其他框架项目)

前两天在做微信公众号里的项目的时候有一个需求是在 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` // 正常的重定向链接

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`

9 window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=*****&redirect_uri=${url}?response_type=code&scope=snsapi_base&state=123`

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

$callback Url ='www.baidu.com/?dd=2'; https://open.weixin.qq.com/connect/oauth2/authorize?appid={$wechatAppid}&redirect_uri={$callback Url }&response_type=code&scope=snsapi_userinfo&st 现在每天都可以看到很多 微信 分享 的链 接 上面有网站或者商家的自 定义 的 分享 标题，和 分享 链 接 的描述及 分享 出去的图像，例如下面的 分享 出去的链 接 ：上面这个是 微信 的js-SDK页面 分享 给 微信 好友在聊天列表中显示的视觉效果。 微信 JS-SDK Demo :这个是 微信 网页 分享 出去的标题。 微信 JS-SDK,帮助第三方为用户提供更优质的移动web服务：这个是被 分享 的这个页面的 分享 描述。 微信 图标：这个就是自己网站或者自己自... 微信 官方开发者文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 微信 官方 接 口DEMO：https://www.weixinsxy.com/jssdk/ 或... 在 微信 网页授权过程中，需要 获取 code 参数 ，但用手机访问时总是报错说code 参数 已经被使用了，其原因很大可能是服务器域名问题，因为我用的是公众平台测试账号，使用的服务器是ip地址，所有用手机访问时总是会弹出 涂鸦的地方是我的服务器ip地址，问题就在这，如果用ip当链 接 ，就不能点“继续访问”按钮（否则就会出现说code已经被使用的问题，继续访问会重排你的原网页），而是点击下面的“访问原网页”... 微信 授权 获取 临时code的 URL https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=012#wechat_redirect 授权逻辑代码 通过window.history.pushState({}, 0, jump URL )解决问题=，其中jumpU. 前提：使用 vue 开发 微信 公众号，需求需要在链 接 中添加一个 参数 用来判断该 分享 链 接 来自朋友圈还是好友 常规操作：在wx.onMenuShareTimeline和wx.onMenuShareAppMessage这两个方法中的link后分别 拼接 参数 &fromShare=toCircleFriends和&fromShare=toFriends 出现问题： 获取 不到 拼接 的 参数 问题分析： 微信 将没有转义的 参数 视为无效的 参数 ，重定向时将 参数 给截取掉了 解决方案： 拼接 链 接 改为%26fromShare%3 引用的 微信 js： <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <script src="${ctx}/static/useloo... private $appSecret; public function __construct($appId, $appSecret) { $this->appId = $appId; $this->appSecret = $appSecret;