同样遇到，坑

问题解决了。分享下解决办法：vue-router切换的时候 都是操作的浏览器历史记录，真实URL为第一次刚进入时的URL。每次路由变化时都重新请求下签名，签名的URL 用第一次进入时的URL。

@yangzonglong 感谢，试了试发现确实是这样。

安卓微信，history模式下，签名使用刚进入页面时的url，config成功了，但是此时只要路由跳转过一次，微信右上角的按钮就都没有了，只剩下收藏，你的项目遇到这个问题了吗？ps：hash模式正常

出现过一次这个问题，几分钟后自己就好了，具体原因我也不清楚，后来就再也没出现

@yangzonglong 感谢回复，那么现在线上的项目就是使用history模式的？可以分享一下访问地址吗

订阅号 葡萄纬度Lat 葡萄+ 》葡萄商城

感谢分享，不过我发现葡萄商城点到某个产品详情页一样没有分享按钮了，也许是我使用的安卓版微信的缘故，最终决定还是用hash模式了

安卓下面确实好烦，我看微信的开发者文档是说了支持 pushstate 方式的 url 的，但是还是辣么多问题。

碰到过hash模式下微信支付不支持，而history模式jssdk功能有问题，最后改成用abstract模式了。

用的history模式，微信浏览器复制链接功能会出现复制出来的链接是上一次的链接....这个问题怎么解决啊

微信授权重定向url上面带的/#!/会导致重定向失败····

@yangzonglong 确定是可以？为什么我看是不行的？我用微信的调试工作看，签名失败的啊

另外，我看到页面跳转的确是url不变的。但用微信右上角那个复制链接的菜单复制出来是变了的。。。

@yangzonglong 微信文档里有那么一句:

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

PS: 会在 Android6.2 中修...修复...

@yangzonglong 你的方法在当时以及接下来的几个月内都是OK的(其实还是蛮hack的，谁叫安卓微信对history支持不友好- -)
可是不知何时起(可能就是最近吧)，已经失效了，估计微信又偷偷干了什么。
经过一番折腾总算搞定，对于微信安卓版，每次切换路由，发起签名请求的url参数必须是当前页面的url(不是最初进入页面时的),而且必须『异步』获取(否则拿到的还是老页面的url)，比如这样：

router.afterEach(() => {
  Promise.resolve()
    .then(() => {
      getSign({
        url: global.location.href
      })
    })
})

对于微信 iOS版无影响，原来的逻辑继续可用

@stoneChen 我是通过你这个方法解决，Android用这个逻辑，IOS用前面的逻辑

@commyfriend 你的这个问题，应该是 微信支付要求至少二级目录 引起的

@yangzonglong 具体代码怎么写阿，能不能发出来参考一下

@zhangwei900808 我会在微信进入的第一个页面记录下来(比如: entryUrl)，然后在使用 wx.config() 进行权限验证之前，用 entryUrl 生成签名。

不过微信说 Android 6.2 以后会修复该问题，而且 iOS 下也不需要这样做，所以你可能还需要判断一下系统进行适配。

mark，通过上面的方法解决了大部分的问题，等待能有更完善的办法！

针对微信 6.5.3 及以后的版本（WebkitWebview）History 模式下的解决方案

1. iOS：用第一次进入页面后的 window.location.href.split('#')[0] 请求一次 js_ticket，config 一次，并在每一页设置分享信息。
2. Android: 每次用新的 URL 请求 js_ticket，config 并 设置分享信息。

提醒

1. iOS ： 如果在 beforeEnter 等钩子里面做了等待登录后才能进入等 逻辑，需要使用 进入页面前的初始 URL 作为请求 js_ticket 的 URL。
2. Android || iOS ： 如果是在 router 的 afterEach 里做的设置分享信息的逻辑，必须要用一个异步操作来做，因为这时候你的 URL 还没有变成当前页面的 URL。

@hiyali iOS下支付的config 是不是无解？当首次进入的页面不是支付授权目录，即使在实际支付页面设置
config ，页面还是弹出没有注册的错误提示。

@sqrtqiezi 有解，就是按照以下规则做就可以。
微信支付接口可以设置 3 个地址：

1. 第一个地址，你可以设置路径为真实的支付地址，比如： xxx.com/reserve/reserve-confirm/，这个保证 android 可以正常在这个 URL 下正常使用支付。
2. 这里需要注意，第二个地址要设置为统一入口的地址，比如：xxx.com/app/redirect/，这里需要说明这个地址的功能，它是用来统一入口的一个地址，在打开它是你可以用其他 query params 来指定，它跳转到你业务的哪个具体页面，这样可以方便很多事，比如：分享、统计，并且支付路径在 iOS 下的问题也就迎刃而解。（以后就可以用这个 路径作为进入app的路径，如果业务没有这种必须要统一入口才能很好解决的需求，那你可以在微信里进入需要支付页面的时候，可以按这个 /app/redirect/ 地址进入，并且跳转到具体的支付页。）

有没有遇到过 微信分享配置，在vue的router下，就首页配置不成功，分享出去还是默认的首页，页面上自己抓起的缩略图， 别的路由下分享出去都是正常的。有遇到过这种情况的吗？

history模式里，我按照上面的做法，android上是可以了，在ios上分享还是各种问题啊（跳路由以后基本不行了）

let url = isIOS() ? simpleLocalDb.getItem('firsEnterUrl') : window.location.href.split('#')[0]
return getJsSdkSign({
  data: { url }
}).then(result => {
  if (result.responseCode === 0) {
    wx.ready(...)
    wx.error(...)
    wx.config(...)
  }
}

上面的这段代码我也是在afterEach的钩子函数里执行的

router.afterEach(route => {
  Promise.resolve().then(() => {
    wxShare({
      title: 'xxxx',
      desc: 'xxxx',
      link: window.location.href,
      imgUrl: window.location.origin + '/wash/static/image/logo.png'
    })
  })

 // other code
})

wxShare这个函数里会有第一段代码，求大神指导 @hiyali

@hiyali 我目前IOS是按照第一次进入页面url给每个页面做wxconfig的，手机上测试是校验通过的，但是分享出来的数据不是wxshare里面配置的，还是微信默认的，而且默认的是首页。
我的问题比较诡异：如果在A页面中添加这个vue的入口，进入到vue之后的只有第一个页面的分享是按照自己配置实现的，其他页面都是微信默认的，并且取得是第一个页面的数据。
如果直接在微信中打开vue页面的话，各个页面的微信分享就是按照我的配置执行的。
安卓一直都是正常的。（以上都是history模式）

经验验证，有两种解决办法：1.改用hash模式。2.router-link改为a标签（也就是每个页面都是向服务器重新请求index）。
其实两个方法的原理是一样的，就是在ios下微信只能识别到第一次进入的url，所以就保证每个页面都是第一次进入的就可以了。

@benbenye 这就不是 history 模式讨论的问题了。

@webkonglong 我遇到你这个问题了。。请问有没有解决？

@microyulive https://segmentfault.com/a/1190000013894295 或许有你要的答案

@MorePainMoreGain 谢谢 不过我遇到的是iOS在进入之后 分享的参数不正确 跳转到别的页面则正常 再回到首页也正常了。。。

@microyulive ios下的单页应用只需要配置一次就够了，看你的描述像是每页都进行了分享配置（或者我理解错了）
看你填坑到这里基本都配置的差不多了，极大可能是url拿错了，仔细检查一下落地页（就是你的首页）ulr是否正常（跟正常情况下的url对比一下）

@MorePainMoreGain 其实我也不太特别明白，看了你写的博客，感觉解释的有点牵强，我也尝试去解释其中的道理，奈何能力有限；之前微信开发文档说6.0.2之后会修复Android端单页应用配置问题，猜想是这里的问题？自己尝试了看android端源码，还是奈何能力有限...

大家集思广益吧，我也是收益此贴才少爬了很多坑 我简单写了微信分享的注意事项,有需要的看一下，说不定那句话就解决了你的问题，当初我也是这么爬过来的（泪奔。。。。）

@yongheng2016 好滴 谢谢 我再排查下

现在我这里遇到一个很诡异的问题的就是我们一个SPA进入应用的时候立马进行了微信授权后再返回应用。整个授权就是客户端的操作，不牵扯后端。但分享的自定义就是会失败，但config会成功，自定义按钮会有效。如果把授权去掉，就一切正常。请问有什么思路吗

@fbsstar
ios?
在微信授权成功后，会重定向到你的项目地址，但微信在后面加了一些参数(code和state)，如下：

m.test.com/home?code=xxxxx&state=xxx

如果你确定在落地页传给了后端完整的url（如上m.test.com/home?code=xxxxx&state=xxx），基本就是后端的锅了，可以让后端检查是否完整接收了你传过去的url（特别是&符号的处理）,最好打印出来，眼见为实。

@fbsstar 老哥我也遇到了一个一模一样的需求，也出现了一模一样的问题，请你是怎么解决的？

@yongheng2016 确实是拿这个链接去后端请求签名，返回的签名也没有问题，用校验工具校验过了。

经过爬坑后总结了一下 history模式下微信授权和分享

有人遇到在IOS微信里，复制链接 出来的一直是首次进入的地址吗？
这个问题貌似没办法通过微信的js sdk设置吧？

@xmskying 进入需要复制的链接页面时reload刷新微信浏览器缓存

@inmWang 可否详细说下？ 似乎iOS上单页面应用都会遇到这个问题：进入次级页面后，微信右上角菜单里，复制链接，得到的是首次进入页面的URL。

@Hao-Wu 单页面和复制链接暂时不能兼得，等微信那边修复吧。

@Hao-Wu @nigelvon 复制链接得到首页的链接原因是：单页应用路由并不能刷新掉微信那边的缓存。解决办法：在需要复制链接的页面，进入后刷新一次，带个时间戳之类的。相当于页面load两次。切记！只在会涉及到复制链接的页面处理。不然所有页面刷新两次体验感并不好。暂时只有这个解决办法。

@inmWang 用window.location.href跳转就可以，也还是说单页面和复制链接不能同时满足。

@inmWang @nigelvon 打算使用微信 sdk，隐藏掉【复制链接】 按钮。

@inmWang @nigelvon 那么暂时只能牺牲复制链接的功能了，虽然会给部分用户带来困扰。

@inmWang 是 location.reload()吗，请问需要放到哪里
而且reload后刷新成首页了，并不是详情页

@Brightchild 在beforemount时 location.replace

复制链接地址还是落地页解决办法 可以参考这个文章中的reload方法，在需要的地方刷新页面

@wangbei8855 请问兄台，最后如何解决的啊？

遇到个问题，如下：
微信内置浏览器进入首页之后，点击底部导航栏任意按钮后，跳转到指向的页面，然后又回到了首页，代码中指向跳转页面的路径是正确的，
router/index.js代码如下：
mode: 'history', scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition; } else { if (to.meta.keepAlive) { to.meta.savedPosition = savedPosition } return { x: 0, y: to.meta.savedPosition || 0 } } },
为了实现从详情页返回首页，页面滚动位置保持在原先点击的位置，页面路径修改了下：
routes: [ { path: '/', name: 'Customer_Home', component: Customer_Home, meta: { keepAlive: true, isBack: false } }, { path: '/customer', name: 'Customer_Home', component: Customer_Home, meta: { keepAlive: true, isBack: false } }, { path: '/customer/home', name: 'Customer_Home', component: Customer_Home, meta: { keepAlive: true, isBack: false } }, ...
如下则是最初的页面路径：
{ path: '', component: Customer_Base, children: [ { path: '/customer', name: 'Customer_Home', component: Customer_Home }, { path: '/customer/home', name: 'Customer_Home', component: Customer_Home }, ...
不知道是否因为路径设置的关系，导致出现点击导航栏按钮跳回首页的问题？

iOS 使用落地页（第一次打开的页面链接）
Android 使用 window.location.href
目前是可以正常分享了- -

@fbsstar 老哥我也遇到了一个一模一样的需求，也出现了一模一样的问题，请你是怎么解决的？

@yongheng2016 确实是拿这个链接去后端请求签名，返回的签名也没有问题，用校验工具校验过了。

老哥这个问题解决了吗 ，我特么也遇到这个问题了，不授权一切正常，授权（暂时试的是静默授权）之后，就变得很诡异，分享有时可用有时不可用，很诡异

放弃 @inmWang 的方法了。第一次点有效，返回去再点什么都不能点了。改用URL参数法强行解决。

你们确定使用History没有支付目录问题？支付目录只能5个。每次只记录了第一次进入的页面，这就导致了所有页面都会产生支付的可能，而支付目录只有5个。按这种方式只有一种解决方案：就是把所有页面都放在同一个目录下！！！这TM是个巨坑。。。。。。垃圾微信两年了还不修复这个问题

你们确定使用History没有支付目录问题？支付目录只能5个。每次只记录了第一次进入的页面，这就导致了所有页面都会产生支付的可能，而支付目录只有5个。按这种方式只有一种解决方案：就是把所有页面都放在同一个目录下！！！这TM是个巨坑。。。。。。垃圾微信两年了还不修复这个问题

支付页面同一个就行，跳转到支付页面用window.location.href