New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

关于html5-History模式在微信浏览器内的问题 #481

Closed
lmnsg opened this Issue Apr 27, 2016 · 72 comments

Comments

Projects
None yet
@lmnsg

lmnsg commented Apr 27, 2016

在开发微信中使用的页面的时候,使用微信的jssdk功能,发现一点问题

在hash模式下,wx.config()可以正常工作,但在history模式下,安卓手机中无法正常config,会提示invalid signature的错误,IOS下则是正常的,非常困扰。查了微信的文档说安卓手机可能是pushState引起的。

@everyone give me some help...

@yangzonglong

This comment has been minimized.

yangzonglong commented Apr 29, 2016

同样遇到,坑

@yangzonglong

This comment has been minimized.

yangzonglong commented Apr 29, 2016

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

@lmnsg

This comment has been minimized.

lmnsg commented May 2, 2016

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

@airwin

This comment has been minimized.

airwin commented May 11, 2016

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

@yangzonglong

This comment has been minimized.

yangzonglong commented May 12, 2016

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

@airwin

This comment has been minimized.

airwin commented May 12, 2016

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

@yangzonglong

This comment has been minimized.

yangzonglong commented May 12, 2016

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

@airwin

This comment has been minimized.

airwin commented May 12, 2016

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

@lmnsg

This comment has been minimized.

lmnsg commented May 13, 2016

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

@commyfriend

This comment has been minimized.

commyfriend commented May 20, 2016

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

@zeybar

This comment has been minimized.

zeybar commented Jun 1, 2016

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

@yyx990803 yyx990803 closed this Jul 5, 2016

@miniai

This comment has been minimized.

miniai commented Oct 11, 2016

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

@dancinglone

This comment has been minimized.

dancinglone commented Oct 13, 2016

@yangzonglong 确定是可以?为什么我看是不行的?我用微信的调试工作看,签名失败的啊
_20161013214654
另外,我看到页面跳转的确是url不变的。但用微信右上角那个复制链接的菜单复制出来是变了的。。。
_20161013214710

@HopeLyn

This comment has been minimized.

HopeLyn commented Dec 2, 2016

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

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

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

@stoneChen

This comment has been minimized.

stoneChen commented Jan 16, 2017

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

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

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

@proYang

This comment has been minimized.

proYang commented Mar 1, 2017

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

@zhanyouwei

This comment has been minimized.

zhanyouwei commented Mar 17, 2017

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

@zhangwei900808

This comment has been minimized.

zhangwei900808 commented Mar 21, 2017

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

@HopeLyn

This comment has been minimized.

HopeLyn commented Mar 22, 2017

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

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

@neilgao000

This comment has been minimized.

neilgao000 commented Mar 30, 2017

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

@hiyali

This comment has been minimized.

hiyali commented Apr 25, 2017

针对微信 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。
@sqrtqiezi

This comment has been minimized.

sqrtqiezi commented Apr 27, 2017

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

@hiyali

This comment has been minimized.

hiyali commented Apr 29, 2017

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

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

This comment has been minimized.

webkonglong commented May 9, 2017

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

@russellmars

This comment has been minimized.

russellmars commented May 15, 2017

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

@benbenye

This comment has been minimized.

benbenye commented Jun 20, 2017

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

@benbenye

This comment has been minimized.

benbenye commented Jun 21, 2017

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

@hiyali

This comment has been minimized.

hiyali commented Jun 21, 2017

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

@nigelvon

This comment has been minimized.

nigelvon commented Feb 27, 2018

@yongheng2016 666,我的签名是在beforeEach里做的,试了下wx.config用setTimeout加了大概半秒的延迟,解决了。

@falost

This comment has been minimized.

falost commented Feb 28, 2018

vue spa项目,history模式, 我是在根组件中检测router变化的时候,就重新去获取信息然后config,config提示是OK的,但是分享的地方,还是只有收藏等几个按钮,求助前辈们

@yongheng2016

This comment has been minimized.

yongheng2016 commented Mar 1, 2018

@falost 你和 @nigelvon 的情况应该差不多,试试微信配置函数延迟执行

@muyi0728

This comment has been minimized.

muyi0728 commented Mar 2, 2018

@ yongheng2016 66666 我的问题也是按照你的方法解决 感谢老铁

@MorePainMoreGain

This comment has been minimized.

MorePainMoreGain commented Mar 29, 2018

@yongheng2016 setTimeout果然是可以的👍👍👍👍。本来以为是vue-router调用pushState接口的先后问题,所以设置延迟为0 ,但无效,必须要延迟500ms以上。这是啥原因呢?

@microyulive

This comment has been minimized.

microyulive commented Apr 24, 2018

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

@MorePainMoreGain

This comment has been minimized.

MorePainMoreGain commented Apr 24, 2018

@microyulive

This comment has been minimized.

microyulive commented Apr 24, 2018

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

@yongheng2016

This comment has been minimized.

yongheng2016 commented Apr 26, 2018

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

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

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

@microyulive

This comment has been minimized.

microyulive commented Apr 26, 2018

@yongheng2016 好滴 谢谢 我再排查下

@fbsstar

This comment has been minimized.

fbsstar commented May 5, 2018

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

@yongheng2016

This comment has been minimized.

yongheng2016 commented May 6, 2018

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

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

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

@CavinHuang

This comment has been minimized.

CavinHuang commented May 15, 2018

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

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

@qutz

This comment has been minimized.

qutz commented May 28, 2018

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

@xmskying

This comment has been minimized.

xmskying commented Jun 8, 2018

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

@inmWang

This comment has been minimized.

inmWang commented Jun 8, 2018

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

@Hao-Wu

This comment has been minimized.

Hao-Wu commented Jun 10, 2018

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

@nigelvon

This comment has been minimized.

nigelvon commented Jun 11, 2018

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

@inmWang

This comment has been minimized.

inmWang commented Jun 11, 2018

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

@nigelvon

This comment has been minimized.

nigelvon commented Jun 11, 2018

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

@xmskying

This comment has been minimized.

xmskying commented Jun 11, 2018

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

@Hao-Wu

This comment has been minimized.

Hao-Wu commented Jun 11, 2018

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

nai6514531 pushed a commit to nai6514531/web that referenced this issue Jul 25, 2018

@Brightchild

This comment has been minimized.

Brightchild commented Aug 17, 2018

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

@inmWang

This comment has been minimized.

inmWang commented Aug 30, 2018

@Brightchild 在beforemount时 location.replace

@inmWang

This comment has been minimized.

inmWang commented Aug 31, 2018

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

@loyalforyou

This comment has been minimized.

loyalforyou commented Sep 6, 2018

@wangbei8855 请问兄台,最后如何解决的啊?

@zhoubhin

This comment has been minimized.

zhoubhin commented Nov 1, 2018

遇到个问题,如下:
微信内置浏览器进入首页之后,点击底部导航栏任意按钮后,跳转到指向的页面,然后又回到了首页,代码中指向跳转页面的路径是正确的,
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 }, ...
不知道是否因为路径设置的关系,导致出现点击导航栏按钮跳回首页的问题?

@BoomBooA

This comment has been minimized.

BoomBooA commented Nov 18, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment