【报错总结】Taro （希望成为）最详细的报错集合

最近遇到一个工作需求，从将h5项目利用taro迁移至百度小程序，将遇到的踩坑点一一记录在下面

【前言】本文章会持续更新，工作中会经常涉及到这类型需求（百度小程序、h5居多），如有问题也可以一起交流学习，本人taro工作经验很少，目前也在不断学习中，若下面的内容有错误，请各位大佬指正，理性讨论，谢谢☃️

【备注】本文的实现均用 React 实现，各位小伙伴可以采用其他的实现，vue或者纯html都可以，只是方便使用就好，根据自己所需要的业务场景进行更换即可。本文会一直更新更新更新，在提出问题后，当有解决方案的时候会及时更新至此文档，没有找到解决方案的小伙伴可以耐心等待一段时间，或者有大佬找到解决方案欢迎私信或者评论留言。

【导读】

1. 百度小程序不支持svg
2. 百度小程序的dom元素
3. 百度小程序定位pageScrollTo不准确的问题
4. h5环境下navigateTo switchTab在百度App ios环境下出现跳转一次任何页面后无法跳转的问题
5. h5环境下加载了百度小程序环境下的sdk问题

百度小程序不支持svg

问题描述

h5项目中有部分动效是采用svg格式的图实现的，想直接进行迁移，发现折腾了半天，taro不支持svg，本项目需要在百度小程序环境运行，其实采用Taro中的组件Image解析svg就可以实现。结果发现坑爹的是，百度小程序并不支持Image的svg属性。

官方文档介绍如上

百度小程序并不支持此属性

taro也不支持使用svg标签

解决方案

无奈，只能将svg动效采用其他方式进行处理（转换成静态图、手写动画等）

百度小程序的dom元素

问题描述

还是动画问题引发的，在h5项目中有部分动画是通过animejs这个库进行实现的，使用animejs很重要的一点就是需要先选中dom元素，将h5项目迁移至百度小程序后，引入该引入的包，最后实现时，却发现打死选不上dom元素，对document进行研究后，根据官方文档解释，发现Taro中的返回的都是TaroElement，原来是Taro对document做了重写？的操作吗，所以我就想着将TaroElement传入animejs中实现，结果发现还是不可行！！之后还研究了好一会，发现社区也没有人提出这个问题，Taro的issue里面也并未有人提及，所以自己没办法从根本上解决这个问题

Taro中的document.getElementById

解决方案

采用重新修改动画逻辑，采用js+css的方式实现原本的动画效果，耗费了我一段时间去实现。

百度小程序定位pageScrollTo不准确的问题

问题描述

为实现书签定位功能（h5锚点功能），点击标题跳转至文章对应的位置，通过循环将每个id传进去，获取元素距离顶部的位置利用pageScrollTo滚动到元素距离顶部的位置，发现要不就是会高了，要不就是会低了，定位的距离总是达不到想要的效果

解决方案

同事研究后发现body顶部居然存在高度，以下是她研究的内容，我只是个搬运工加解说！！！获取body距离顶部的距离，当body顶部存在距离时，拿到元素的高度减去body顶部距离，不存在时则按照元素距离顶部的位置进行滚动

Taro.createSelectorQuery()
    .select("body")
    .boundingClientRect()
    .exec((rec) => {
        if (!rec) return;
        Taro.createSelectorQuery()
            .select(`#${id}`)
            .boundingClientRect()
            .exec((res) => {
                if (!res) return;
                let scrollTop = rec[0].top
                    ? res[0].top - rec[0].top
                    : res[0].top;
                pageScrollTo({
                    scrollTop:
                        scrollTop > barHeight
                            ? scrollTop - barHeight
                            : scrollTop,
                    duration: 300,
                });
            });
    });

h5环境下navigateTo switchTab在百度App ios环境下出现跳转一次任何页面后无法跳转的问题

问题描述

用 taro 开发 h5 页面时在测服环境（百度app浏览器ios环境和其他浏览器）都下可以正常跳转，上线正服环境时其他浏览器表现全部正常，就只有百度app浏览器ios环境下出现了问题！！！可恶啊，怎么老是有这种兼容性问题，产品流量都集中在百度浏览器这边，所以没有办法不解决，因此只能花时间单独排查这个问题，排查了页面路径、页面组件，最后发现是h5环境下navigateTo switchTab在百度App ios环境下出现跳转一次任何页面后无法跳转的问题。

解决方案

只能退而求其次，封装一个方法，单独判断百度app浏览器环境加ios环境，处理其他环境下的跳转继续使用navigateTo，将tabbar重新封装，做一个自己的组件，将判断符合环境条件时，使用redirectTo reLaunch进行替代跳转。

缺点

如果 h5 页面内有返回按钮，会导致返回按钮无效，并且会导致用户返回时直接退出 h5，希望有更优解决方法的大佬能够分享。

h5环境下加载了百度小程序环境下的sdk问题

问题描述

百度小程序环境下有加载sdk的代码，sdk在h5环境并不能生效，因此判断环境进行初始化，但是不知道为什么判断环境无效，环境是h5的情况下依旧会走入百度小程序环境下的代码内

解决方案

在 sdk 中去判断当前环境