影响手机
- 小米
- vivo
Iphone, 华为等手机都正常。
问题复现
在小米手机 和 VIVO 上，当首页地图展示一半，再切换到其他页面，再回来，会发现底部 tabbar 消失，上下滑动会出现部分区域黑屏的情况。
点击地图，在调整，就能看到 tabbar。
问题排查
怀疑是，计算地图高度或者宽度有 bug。
测试排查点
- 设置高度不会引起黑屏的问题，只有设置宽度 100% 时会出现问题
- 宽度为 100vw, 问题依旧
- 宽度为 100px，问题消失
- 使用 wx.getSystemInfo 获取的屏幕宽度，setData 赋值给地图，问题依旧
- 设置宽度为 800px，明显超出屏幕宽度，问题依旧
所以，我怀疑是地图组件作为系统原生组件，他的宽度计算上有 BUG，如何能规避实时计算宽度呢？
问题解决
我在外层的 view 上加了个 padding: 1px，然后地图的 width: 100%, height: 400rpx.
问题就解决了。。。
加上 1px 的目的是，限制地图组件的宽度，理论上，初始化之后，这个宽度就固定了，不需要再实时计算地图宽度。
诡异的地方
Padding: 0.1px, 问题依旧。。。设置成 1px 就没有问题。
经验
第一次知道微信小程序的地图组件是原生组件，而原生组件很多问题是在小程序开发工具上体现不出来的。因为开发工具是用 web 组件做的模拟。
所以，测试地图一定要在真机上进行。特别是国产山寨机。
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式