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

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

影响手机

  • 小米
  • 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 组件做的模拟。

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

爱评论不评论

近期节日

2018年09月22日 世界无车日
2018年09月23日 秋分
2018年09月23日 国际聋人节
2018年09月24日 中秋节
2018年09月27日 世界旅游日
2018年10月01日 国庆节
2018年10月04日 世界动物日
2018年10月08日 寒露
2018年10月09日 世界邮政日
2018年10月10日 辛亥革命纪念日
2018年10月13日 中国少年先锋队诞辰日
2018年10月14日 世界标准日
查看更多节日