小米 VIVO 上,微信小程序地图导致底部菜单消失并局部黑屏

更新日期: 2018-09-13 阅读次数: 6492 分类: 微信小程序

影响手机

  • 小米
  • vivo

Iphone, 华为等手机都正常。

问题复现

在小米手机 和 VIVO 上,当首页地图展示一半,再切换到其他页面,再回来,会发现底部 tabbar 消失,上下滑动会出现部分区域黑屏的情况。

小米 VIVO 上,微信小程序地图导致底部菜单消失并局部黑屏

小米 VIVO 上,微信小程序地图导致底部菜单消失并局部黑屏

点击地图,在调整,就能看到 tabbar。

小米 VIVO 上,微信小程序地图导致底部菜单消失并局部黑屏

问题排查

怀疑是,计算地图高度或者宽度有 bug。

测试排查点

  • 设置高度不会引起黑屏的问题,只有设置宽度 100% 时会出现问题
  • 宽度为 100vw, 问题依旧
  • 宽度为 100px,问题消失
  • 使用 wx.getSystemInfo 获取的屏幕宽度,setData 赋值给地图,问题依旧
  • 设置宽度为 800px,明显超出屏幕宽度,问题依旧

所以,我怀疑是地图组件作为系统原生组件,他的宽度计算上有 BUG,如何能规避实时计算宽度呢?

问题解决

我在外层的 view 上加了个 padding: 1px,然后地图的 width: 100%, height: 400rpx.

问题就解决了。。。

加上 1px 的目的是,限制地图组件的宽度,理论上,初始化之后,这个宽度就固定了,不需要再实时计算地图宽度。

诡异的地方

Padding: 0.1px, 问题依旧。。。设置成 1px 就没有问题。

经验

第一次知道微信小程序的地图组件是原生组件,而原生组件很多问题是在小程序开发工具上体现不出来的。因为开发工具是用 web 组件做的模拟。

所以,测试地图一定要在真机上进行。特别是国产山寨机。

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式