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

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

影响手机

  • 小米
  • 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年11月17日 国际大学生节
2018年11月20日 国际儿童日
2018年11月21日 世界问候日
2018年11月22日 小雪
2018年11月22日 感恩节
2018年12月01日 世界艾滋病日
2018年12月03日 国际残疾人日
2018年12月07日 大雪
2018年12月09日 "一二九"运动纪念日
2018年12月09日 世界足球日
2018年12月10日 世界人权日
2018年12月12日 西安事变纪念日
查看更多节日