公众号wx.openLocation通过三方页面返回后不能点击/无响应/无提示/不执行的一个坑

很长时间以来,为了图省事,我都是直接抄的微信公众号开发的demo代码,下载页面如下:

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#附录6-DEMO页面和示例代码

或者直接看官方在线的示例:

https://www.weixinsxy.com/jssdk/#menu-location

通过开发者工具打开上方的链接,点击openLocation

公众号wx.openLocation通过三方页面返回后不能点击/无响应/无提示/不执行的一个坑

从控制台可以看到,点击后,页面进行了回应,返回了坐标、名称、地址以及缩放等级。

查看demo.js,可以看到官方给的操作方法是:

公众号wx.openLocation通过三方页面返回后不能点击/无响应/无提示/不执行的一个坑

于是乎,我很长一段时间,都在抄官方的这个示例代码,形式如下:

出现了问题

通过jQuery点击事件,调用wx.openLocation,看起来是没有问题的,但是在实际使用过程中,我发现有时候,点击是无响应的。

  • 如果要复现这个情况的话可以这样操作:
  • 从调用wx.openLocation地图的页面离开
  • 再返回wx.openLocation地图页面
  • 点击wx.openLocation按键
  • 无响应

起初我把这个当一个偶然事件,我甚至以为这是Vue渲染页面造成的副作用……

直到最近做了多级页面批量调用之后,这个现象普遍到无法时候之后,我发现我错了。

问题根源

同样是微信SDK,从其他页面返回的时候,为什么微信分享这些不受影响,偏偏wx.openLocation会出现这样的问题呢?

仔细看了一下代码,分享代码是这样写的:

仔细一看,再结合wx.openLocation返回后不能点击的情况,果然,代码有问题。

分享的代码,我是用了wx.ready,而wx.openLocation没有,直接就是一个点击事件。

恍然,疏忽了,补上之后wx.openLocation这样写:

页面加载完毕后再执行点击事件,就没有问题。

开启debug后刷新页面,搞定。

公众号wx.openLocation通过三方页面返回后不能点击/无响应/无提示/不执行的一个坑

原创文章,作者:蓝洛水深,如若转载,请注明出处:https://blog.lanluo.cn/9923

发表评论

登录后才能评论