最近遇到一个工作需求，从将h5项目利用taro迁移至百度小程序，将遇到的踩坑点一一记录在下面
【前言】本文章会持续更新，工作中会经常涉及到这类型需求（百度小程序、h5居多），如有问题也可以一起交流学习，本人taro工作经验很少，目前也在不断学习中，若下面的内容有错误，请各位大佬指正，理性讨论，谢谢☃️
【备注】本文的实现均用 React 实现，各位小伙伴可以采用其他的实现，vue或者纯html都可以，只是方便使用就好，根据自己所需要的业务场景进行更换即可。本文会一直更新更新更新，在提出问题后，当有解决方案的时候会及时更新至此文档，没有找到解决方案的小伙伴可以耐心等待一段时间，或者有大佬找到解决方案欢迎私信或者评论留言。
【导读】
百度小程序不支持svg百度小程序的dom元素百度小程序定位pageScrollTo不准确的问题h5环境下navigateToswitchTab在百度Appios环境下出现跳转一次任何页面后无法跳转的问题h5环境下加载了百度小程序环境下的sdk问题微信小程序环境热重载失效的问题百度小程序环境textarea在class中设置min-height居中问题h5环境下百度app浏览器点击图片变成预览效果的问题h5环境下获取dom元素距离页面顶部距离为0的问题
1、百度小程序不支持svg
问题描述
h5项目中有部分动效是采用svg格式的图实现的，想直接进行迁移，发现折腾了半天，taro不支持svg，本项目需要在百度小程序环境运行，其实采用Taro中的组件Image解析svg就可以实现。结果发现坑爹的是，百度小程序并不支持Image的svg属性。
官方文档介绍如上
百度小程序并不支持此属性
taro也不支持使用svg标签
解决方案
无奈，只能将svg动效采用其他方式进行处理（转换成静态图、手写动画等）
2、百度小程序的dom元素
问题描述
还是动画问题引发的，在h5项目中有部分动画是通过animejs这个库进行实现的，使用animejs很重要的一点就是需要先选中dom元素，将h5项目迁移至百度小程序后，引入该引入的包，最后实现时，却发现打死选不上dom元素，对document进行研究后，根据官方文档解释，发现Taro中的返回的都是TaroElement，原来是Taro对document做了重写？的操作吗，所以我就想着将TaroElement传入animejs中实现，结果发现还是不可行！！之后还研究了好一会，发现社区也没有人提出这个问题，Taro的issue里面也并未有人提及，所以自己没办法从根本上解决这个问题
Taro中的document.getElementById
解决方案
采用重新修改动画逻辑，采用js+css的方式实现原本的动画效果，耗费了我一段时间去实现。
3、百度小程序定位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,
});
});
});
4、h5环境下navigateTo switchTab在百度App ios环境下出现跳转一次任何页面后无法跳转的问题
问题描述
用 taro 开发 h5 页面时在测服环境（百度app浏览器ios环境和其他浏览器）都下可以正常跳转，上线正服环境时其他浏览器表现全部正常，就只有百度app浏览器ios环境下出现了问题！！！可恶啊，怎么老是有这种兼容性问题，产品流量都集中在百度浏览器这边，所以没有办法不解决，因此只能花时间单独排查这个问题，排查了页面路径、页面组件，最后发现是h5环境下navigateTo switchTab在百度App ios环境下出现跳转一次任何页面后无法跳转的问题。
解决方案
只能退而求其次，封装一个方法，单独判断百度app浏览器环境加ios环境，处理其他环境下的跳转继续使用navigateTo，将tabbar重新封装，做一个自己的组件，将判断符合环境条件时，使用redirectTo reLaunch进行替代跳转。
缺点
如果 h5 页面内有返回按钮，会导致返回按钮无效，并且会导致用户返回时直接退出 h5，希望有更优解决方法的大佬能够分享。
5、h5环境下加载了百度小程序环境下的sdk问题
问题描述
百度小程序环境下有加载sdk的代码，sdk在h5环境并不能生效，因此判断环境进行初始化，但是不知道为什么判断环境无效，环境是h5的情况下依旧会走入百度小程序环境下的代码内
解决方案
在 sdk 中去判断当前环境
6、微信小程序环境热重载失效的问题
问题描述
微信开发者工具对于taro的编译不能热重载
解决方案
查询官方文档后，发现taro官网有针对于微信小程序热重载
热重载
打开微信小程序开发者工具的“热重载”功能，可以在修改页面 JS 文件、样式文件后快速在开发者工具显示更新的内容，极大地提升了开发体验。
在 Taro 中，样式文件的热重载是直接支持的，而页面 JS 文件的热重载在 Taro v3.3.17 版本后支持，且需要额外配置：
注意： 目前微信小程序的 JS 文件热重载只支持页面文件，而不包括其依赖。
其他问题
目前尝试了一个taro v3.5.0版本的，将hot设置为true，但是偶尔还是会失效，需要自己手动编译，效果感觉不太好，有尝试好的方法的大佬也可以告知
7、百度小程序环境textarea在class中设置min-height居中问题
问题描述
不知道为什么在less 文件中设置min-height时，textarea的内容会自动垂直居中，具体没有去看原因
开发者工具效果：
真机效果（i14pm）：
很明显发现，文本的位置对不上了，本来想置顶显示，结果真机自动给我垂直居中了
解决方案
在Textarea标签外套一层View设置min-height，而不是直接给Textarea设置min-height
8、h5环境下百度app浏览器 ios(i14pm)点击图片变成预览效果的问题
问题描述
百度app浏览器打开h5页面时，发现<View onClick={goToLink}><Image src={xxx}></View>这段代码本身设置了点击图片跳转至对应的链接上，但是发现只有ios环境下，百度app浏览器点击这张图片预期是跳转至对应的链接上（实际变成了图片预览）
解决方案
在 img 的class 类上添加 pointer-events: none; 阻止点击事件的发生即可
ps: e.stopPropagation()和e.preventDefault()都试过了，没啥用。
9、h5环境下获取dom元素（根据id获取）距离页面顶部距离为0的问题
问题描述
做一个吸顶导航栏时获取了导航栏距离顶部的距离，第一次进入页面没有问题，跳转其他页面后返回当前页发现获取元素距离顶部的距离为0
解决方案
来自同事的摸索：navgiateTo这个导航会缓存DOM元素为display: none;，所以每次入栈的时候会新增一个Dom，获取高度的代码需要改成selectAll，取出最新的DOM元素即可。
Taro.createSelectorQuery()
.selectAll("#xxxx")
.boundingClientRect()
.exec(res => {
if (!res) return;
const result = res[0];
const domScrollTop = result[result.length - 1].top;
setScrollTop(domScrollTop);
});
