小程序踩坑小记（三）

上面一篇主要讲述了一些技术细节，这一篇主要来讲讲踩的坑以及单纯吐槽

踩过的坑

1. ScrollView 中的 fixed 样式无效 / 出错。这个问题是在使用官方的拓展组件 mp-sticky 时发现的。mp-sticky 的原理是包裹组件滚动出视口时，将样式变为 fixed 实现的，但如果在 ScrollView 中会失效 / 表现异常等，如 https://developers.weixin.qq.com/community/develop/doc/0004aeafeccb789ac219e474756000

2. fixed 可能会遇到层级错乱

3. wx.getMenuButtonBoundingClientRect() 偶现返回值为 0 的问题，一般是 ios 在重新进入小程序时会重现，见 https://developers.weixin.qq.com/community/develop/doc/0006a49ba7cf4090feea00db350000?_at=1627380707469 ，目前的做法是在监听路由 appLaunch 的时候，如果获取到的值为 0 则重新获取

4. 提示运行环境加载失败，这个问题可能是开了代理或者内存不足导致的

5. ScrollView 组件中要定位到某个元素是通过 scrollIntoView 这个属性来实现的，这里就有个问题，不清楚原生小程序是否存在，即定位过一次之后，如果还想定位到相同的元素，由于 scrollIntoView 属性没有变化，则不会产生滚动。。想吐槽一下为什么这个不设计成类似 pageScrollTo 这样的 api ，而是用属性形式

6. 开发者工具与真机调试的请求超时/ 无网络时 的errMsg不一致

7. getNetworkType 获取到的网络状态可能会有延迟

8. tabbar borderStytle 在 ios 13 上格外粗，只能自己去实现一个 tabbar

9. Taro 的 PageMeta 无法使用 https://github.com/NervJS/taro/issues/6092

10. taro 中 dataset 的相关讨论 https://github.com/NervJS/taro/issues/7313

11. intersectionObserver 是一个用于监控元素与视口（或者指定元素）相交情况的一个 api，在 web 上是非常好用的，然而到了小程序有如下限制，导致我一度想放弃该 api

    1. createIntersectionObserver 创建出来的 observer 只能 observe 一次，即使 observer disconnect 之后也是如此

    2. observe 不能监听新增的元素（未测试 web 上是否如此），比如无限加载的列表，新增加进来的元素是无法被监听的，除非再次 observe ，然而小程序不允许同一个 observer 重复 observe

    3. observe 接收的参数是选择器，例如 ‘.classname’ 这样的，这个我觉得既然是小程序里为什么不支持 ref？

    4. 注意 observe 的时机，需要在组件挂载之后，那么这个时间在 Taro 对应的是 useEffect 中的 nextTick 里

       useEffect(() => {
         nextTick(() => {
           observer.observe('.item', () => {
             // ...
           })
         })
       }, []) 

    5. 通过 obsever 第二个参数是个回调，代表相交状态变化时要执行的回调，然而从这里获取到的信息比较少

       interface ObserveCallbackResult {
         /** 目标边界 */
         boundingClientRect: BoundingClientRectResult
         /** 相交比例 */
         intersectionRatio: number
         /** 相交区域的边界 */
         intersectionRect: IntersectionRectResult
         /** 参照区域的边界 */
         relativeRect: RelativeRectResult
         /** 相交检测时的时间戳 */
         time: number
       }

       额外信息只能带在 dataSet 中，如下

       import { document } from '@tarojs/runtime';
       
       observer.observe(
       '.item',
         (res: IntersectionObserver.ObserveCallbackResult & { id: string }) => {
             const el = document.getElementById(res.id);
         		console.log(el.dataset)
           }
        });

    总之这个 api 在小程序上我觉得没有很符合预期。。

总结

这个项目历时一个多月，和小伙伴们将 rn 应用搬到小程序上，中间遇到种种问题。整体开发下来的体验就是小程序有一些比较方便的 api 同时也存在一些将原先 web 好用的地方魔改而产生的问题。

后续计划是将小程序中的公用组件抽出来到公共库中，同时提供小程序脚手架以便别的业务线使用。