Taro多端开发之跨端踩坑

Zjw
1,950 阅读3分钟

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）

  1. 获取用户信息 API getUserProfile

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

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

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

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

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

  1. 选择器的写法
  • 基本选择器只支持类选择器
  • 不支持组合选择器的写法
  • 不支持伪类及伪元素
  1. 读写缓存
    RN 端不支持 setStorageSync 需要改用 setStorage
    RN 端不支持 getStorageSync 需要改用 getStorage
    RN 端不支持 removeStorageSync 需要改用 removeStorage
avatar
文章
阅读
粉丝