【小程序】小程序项目经验总结

前言

• 该项目从0写完，使用taro+react+taro-ui+redux，特此总结下一些坑和解决方法。

一、1像素问题

• 本来以为这玩意只能面试题遇到，结果实际真遇到了，UE用的类似IPHONEXR的手机，导致1px边框有部分看不见。
• 于是搜索发现需要定宽什么的，后来研究的最简单方法是使用transform:rotatez(360deg)

二、自定义tabbar的坑

• 不建议使用这玩意，这个坑踩了太多，最后还是放弃自定义tabbar，因为在某些机子上，自定义tabbar在刚载入时会从上面飞到最底部。这个体验感很差。
• 另外，自定义tabbar需要手动对iphone的底部进行适配，比如iphoneXR那种需要提高一点，所以非常不方便。但是使用原生的就没这问题。
• 自定义tabbar还在切换时容易闪烁。由于只能使用CoverImage，而CoverImage不支持BASE64图片，所以只能直接加载，即使使用预渲染也不能很好解决这问题。
• 无法在自定义tabbar使用状态，最多使用redux的状态。
• 综上所述，以后建议让ui重新设计提示，避免使用自定义tabbar。

三、选择器获得scrollTop

• 微信有个方法是createSelectorQuery类似于H5的querySelector，之后可以通过boundingClientRect获取元素距离顶部的高度。
• 这个方法有个坑，就是如果页面一渲染就获取，很容易就是null或者高度不准确。一般使用settimeout等待个300左右可以获得比较正常的值。

四、滚动吸顶的制作

• 微信做滚动吸顶确实有点困难，我试了在scrollview组件中，无法使用onscroll与scroll双向绑定，这样使得滚动相当不流畅。所以最终使用的方案是scrollIntoView的锚点加上createSelectorQuery获取分界配合使用。

五、高度获取

• 如果不用自定义tabbar，那么如果是一个整个scrollview，那么高度应该取systeminfosync的windowheight而不是screenheight，否则在锚点时会有偏差。