Taro多端开发之跨端踩坑

Taro多端开发之跨端踩坑

遇到的问题

1.className 全局不要重名 支付宝小程序所有的组件样式会全局同步，同名的话会造成样式互相污染，且 RN 不支持。2.样式类名不支持 less 嵌套语法，将类名平铺实现，RN 不支持。3.避免使用 float、fixed 布局。 RN 不支持。4.文本样式写在<Text>标签，不要写在<View>标签。5.边框的实现，避免直接写 0.5px。 边框宽度使用偶数像素如 2px。项目的 designWidth 是基于 750 的，在 375 的手机上就会解析成 1px，如果使用单数会解析成 0.5px，部分型号手机会丢失宽度默认为 0，导致边框的线无法显示。6.Taro.getImageInfo 获取图片信息返回值不同 微信小程序平台 返回值示例 errMsg: "getImageInfo:ok" height: 64 orientation: "up" path: "http://tmp/O3dPoGO2Eopw3e718fa1668604635a50f3ab88c97597.png" type: "png" width: 64 - H5 平台 返回值示例 (无 orientation、path、type 字段)7.Taro.getCurrentPages() 获取页面栈 API 的结果不同建议获取页面信息统一使用this.$router取值* 微信小程序平台返回值数组中元素有 router 字段，为页面路由名称* H5 平台返回值数组中元素没有 router 字段，无法通过该 api 获取路由名称
8.顶部导航需要做样式兼容* 微信小程序平台默认是有头部导航条* H5 平台默认是没有头部导航条的
9.CSS 的 animation 动画效果 RN 端不支持10.Taro.chooseImage() H5 端在 APP 浮层中使用 部分安卓机型取消也会触发成功回调选择图片，然后在选择相机或者相册时，直接取消。Taro.chooseImage 也会触发成功回调，不过 size 为 0。可以通过 size 这个字段来进行筛选。 11. 微信 H5 长按图片识别码功能。

如果屏幕内有很多码，长按没有完整展示在屏幕内的码，进行识别的时候，可能会识别出是屏幕其他码的信息。（疑似是微信的自身 bug）

12.获取用户信息 API getUserProfile

Taro.getUserProfile 不支持微信小程序。（Taro2.x 版本）解决方案为如果是微信小程序端，通过 wx.getUserProfile 去调用，其他端则不作处理跳过该逻辑

13.H5 端 如果元素设置绝对定位，通过 bottom 控制位置不准确。

当有 Input 聚焦的时弹出输入法，部分安卓机型，此时屏幕高度会被调整。（device.windowHeight 高度会改变）此时如果通过 absolute + bottom 布局，元素就会被输入法挤上去。解决方案为页面渲染之前，将屏幕高度获取到，并且计算好元素的对应 top 或者 margin-top，然后引用到对应元素上即可。

14.文字要包在 Text 组件里面，否则 RN 端会不显示
15.RN 动画不支持：Animation 和 transform
16.RN 与 H5/小程序 的 flex 布局相关属性的默认值有差异，所以需要显式声明，不采用默认值。

flexDirection 指定布局的主轴。RN 子元素默认是沿着 竖直轴(column) 方向排列；这点和 CSS 不一样，需要注意

17.选择器的写法

• 基本选择器只支持类选择器
• 不支持组合选择器的写法
• 不支持伪类及伪元素

18.读写缓存RN 端不支持 setStorageSync 需要改用 setStorageRN 端不支持 getStorageSync 需要改用 getStorageRN 端不支持 removeStorageSync 需要改用 removeStorage

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享