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

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

影响手机

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

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

爱评论不评论

近期节日

2019年04月26日 知识产权日
2019年04月30日 全国交通安全反思日
2019年05月01日 国际劳动节
2019年05月04日 五四青年节
2019年05月06日 立夏
2019年05月08日 世界红十字日
2019年05月08日 世界微笑日
2019年05月12日 国际护士节
2019年05月12日 母亲节
2019年05月12日 佛诞
2019年05月15日 国际家庭日
2019年05月17日 世界电信日
查看更多节日