Taro 开发微信小程序、RN踩坑指南

haru
7,488 阅读9分钟

本文的提纲如下：

  1. 简介
  2. 开发环境搭建：小程序、android、iOS运行环境搭建
  3. 本身开发的注意事项
  4. 小程序开发的注意事项
  5. RN端开发的注意事项
  6. Taro开发的建议
  7. 尾声

简介

Taro 是由京东凹凸实验室开发维护的一套遵循 React 语法规范的 多端开发 解决方案。目的就是写一套代码，通过 Taro 的编译工具编译成可以在多端运行的代码。目前适配的有六种：微信小程序、RN、支付宝小程序、百度小程序、快应用和H5。

Taro目前最新版本是 1.3.5。

我们Taro开发需要知道的有：

✅ 1. Taro使用的是React，组件生命周期一致，可以写JSX，同时也支持TSX

✅ 2. 支持使用 npm/yarn 安装管理第三方依赖

✅ 3. 支持使用 ES7/ES8 甚至更新的 ES 规范，一切都可自行配置

✅ 4. 支持使用 CSS 预编译器，例如 Sass 等

✅ 5. 支持使用 Redux 进行状态管理

✅ 6. 支持使用 MobX 进行状态管理

✅ 7. 小程序 API 优化，异步 API Promise 化等等

开发环境搭建：小程序、Android、iOS运行环境搭建

1. 安装以及使用：

Taro开发要求 node 环境（>=8.0.0）。

// cli 工具安装
$ npm install -g @tarojs/cli

// 使用: 命令创建模板项目，或自动安装项目依赖
$ taro init myApp

// 运行项目，例如微信小程序和RN端
$ npm run dev:weapp
$ npm run dev:rn

$ npm run build:weapp
$ npm run build:rn

特别说明（干货整理🍁🍁），一定要仔细看：

🍒️ 编译出来的微信小程序代码在项目根目录下的 /dist 文件夹下面👇。编译出来的RN代码在项目根目录下的 /rn_temp 文件夹下面👇。

🍒️ 在运行项目编译成RN端代码的时候，会自动弹出一个终端命令窗口，调用127.0.0.1:8081 端口，为RN代码打包成 android 和 iOS 应用入口文件 作准备。

🍒️ 在运行项目的时候，项目会自动安装 react-native 命令，并更新package.json。因此可以在项目根目录下直接调用 react-native 命令。

🍒️ 当RN端代码编译好之后，需要先在项目根目录下 调用 react-native upgrade 命令生成android应用和iOS应用的壳子，即 /android 和 /ios 文件夹。

🍒️ 之后调试 RN 端代码的时候，就分别对应上述两个应用文件夹工程。

🍒️ 直接在android环境和iOS环境调试这两个文件可能有问题，因为上述生成的这两个工程项目默认的入口文件是 index，需要将其对应到RN代码的 rn_temp/index 上面才可以。

iOS应用需要修改一个地方：

// 在 ios/taroDemo/AppDelegate.m 文件中修改
jsBundleURLForBundleRoot:@"rn_temp/index"

Android应用需要修改两个地方：

// 1. android/app/src/main/java/com/taroDemo/MainAppliaction.java文件

@Override
protected String getJSMainModuleName() {
  return "rn_temp/index";
}

// 2. android/app/build.gradle文件
project.ext.react = [
    entryFile: "rn_temp/index.js"
]

6⃣️ 修改完之后，小伙伴就可以愉快地开发Taro代码了😄，但是要看我们开发代码的具体效果还要安装不同的调试环境。。。。。✊✊

小程序

安装微信开发者工具即可，Taro编印出来的微信小程序应用代码在项目根目录下面的 /dist 目录。

🙆比较方便的地方是微信小程序调试的时候，我们改动Taro开发代码，微信小程序这边可以实时预览效果。

android

android 环境需要首先安装的依赖有 JDK 和 Android Studio。

🎈JDK：版本要求是 1.8 ，暂不支持 1.9 及更高版本，主要是因为 React Native 只支持 1.8 版本的JDK。

🎈Android Studio：这个没有什么需要特别说明的，小伙伴们按照 Taro 文档 【React Native 端开发流程】中说明来就可以了。

👎不方便的是我们改动Taro代码，rn_temp/ 下面会实时编译出来新代码，但是android和iOS应用这边目前不能实时预览效果，必须重启运行应用。应该是有实时预览效果的方案的，后续找到了再补充上来✊。

iOS

⚠️Xcode安装，注意版本与mac版本的兼容。同时RN支持的Xcode版本至少是9.4。

已知的 macOS10.13.6不兼容Xcode10.2.1及以上，确定成功的是Xcode9.4。建议就安装 9.4。

本身开发的注意事项

这里讲的是无论用Taro进行什么开发，都不要忽略的注意事项⚠️，小伙伴们来围观吧。。。都是干货🍃🍃

✅✅✅ 建议首先阅读下 Taro文档的 Taro 规范。

⚠️ 1. React/Nerv 的不同： React 可以使用 ... 扩展操作符来传递属性，但在 Taro 中你不能这么做。例如：

const props = {firstName: 'Plus', lastName: 'Second'}
return <Greeting {...props} />

这样的操作会报错。

⚠️ 2. React/Nerv 不一样的地方在于，Taro 不支持使用 点表示法 和运行时指定类型来引用组件，例如 <MyComponents.DatePicker /> 这样的写法在 Taro 中是无法正确编译的。

⚠️ 3. Taro 与 React 一样，也支持 PropTypes 检查类型，用法和 React 一样，但是目前在小程序端还有些问题，慎用！

⚠️ 4. setState的异步性：这是 Taro 和 React 另一个不同的地方，React 的 setState 不一定总是异步的，他内部有一套事务机制控制，且 React 15/16 的实现也各不相同。而对于 Taro 而言，setState 之后，你提供的对象会被加入一个数组，然后在执行下一个 eventloop 的时候合并它们。

⚠️ 5. Taro中事件使用驼峰命名方式，与小程序的全小写不同。

⚠️ 6. Taro中阻止事件冒泡，必须明确使用 e.stopPropagation()

⚠️ 7. 在 Taro 中尺寸单位建议使用 px、 百分比 %，Taro 默认会对所有单位进行转换。

⚠️ 8. Taro 默认以 750px 作为换算尺寸标准，如果设计稿不是以 750px 为标准，则需要在项目配置 config/index.js 中进行设置。

⚠️ 9. 子元素选择器（.a > .b）只能用于 View 组件与其子节点之间。

⚠️ 10. 建议只使用class 选择器写样式。

小程序开发的注意事项

如果你的项目使用Taro开发，且要适配小程序端，那下面这些个坑你要注意了。。。。。干货呐🍂🍂

⚠️ 1. 事件传参数，一般是两种：bind 和 匿名函数传参两种。

<Button onClick={(e) => this.deleteRow(id, e)}>Delete Row</bButton>
<Button onClick={this.deleteRow.bind(this, id)}>Delete Row</Button>

匿名函数传参数自Taro v1.2.9之后开始支持。 注意：在各小程序端，使用匿名函数，尤其是在 循环中 使用匿名函数，比使用 bind 进行事件传参占用更大的内存，速度也会更慢。

**建议：**使用bind进行传参数

RN端开发的注意事项

如果你的项目使用Taro开发，且要适配RN端，那下面这些个坑你要注意了。。。。。干货呐🍂🍂

✅✅✅ 建议首先阅读下 Taro文档的 开发前注意。

如果要支持 RN 端：

⚠️ 1. 必须采用 Flex 布局。

⚠️ 2. 样式选择器仅支持类选择器，且不 支持 组合器。

⚠️ 3. 就需要书写 RN 支持的CSS属性样式，因为RN的样式基本上实现了 CSS 的一个子集，并且属性名不完全一致，所以要注意。

⚠️ 4. box-shadow，React Native 这方面支持得并不好（仅 ios 支持且支持程度有限）。

⚠️ 5. CSS 属性简写的支持：只接受 React Native 支持的值。例如 background属性 只接受 backgroundColor。

⚠️ 6. Taro 编译成 RN 时对 border 的处理有问题，border{Top,Right,Bottom,Left} 的简写（shorthands）不支持，因为 borderStyle 不能应用于单个边框。。可以使用的是：

/**
 * // NOTE Taro 编译成 RN 时对 border 的处理有问题
 * RN 不支持针对某一边设置 style，即 border-bottom-style 会报错
 * 那么 border-bottom: 1px 就需要写成如下形式：
 * border: 0 style color; border-bottom-width: 1px;
 */
 // sass
 @mixin border($dir, $width, $style, $color) {
  border: 0 $style $color;
  @each $d in $dir {
    #{border-#{$d}-width}: $width;
  }
}

⚠️ 7. React Native 不支持 background-image。可以使用 Image 组件，配合 Flex 布局实现，具体参考：thekevinscott.com/background-…

⚠️ 8. position:fixed React Native 不支持。

⚠️ 9. Animation 和 transform React Native 动画不支持。

⚠️ 10. React Native 与 H5/小程序 的 Flex 布局相关属性的默认值有差异。

⚠️ 11. 渐变色的实现需要借助 react-native 的第三方包 react-native-linear-gradient。

⚠️ 12. font-weight样式只支持400、700、bold、normal这几个值。

⚠️ 13. 获取设备ID需要借助 react-native 的第三方包 react-native-device-info。

Taro开发的建议

✌️✌️这一部分是整理出的 Taro 多端开发的一些建议，小伙伴们好好享用吧。

由于不同的平台之间还是存在一些无法消除的差异，所以为了更好的实现Taro跨平台开发，Taro 中提供了如下的解决方案：

🍒 1. 内置环境变量 process.env.TARO_ENV

用于判断当前编译类型，目前有 weapp / swan / alipay / h5 / rn / tt 六个取值，可以通过这个变量来书写对应一些不同环境下的代码，在编译时会将不属于当前编译类型的代码去掉，只保留当前编译类型下的代码。通常用于处理不太复杂逻辑的跨平台代码：

if (process.env.TARO_ENV === 'weapp') {
  require('path/to/weapp/name')
} else if (process.env.TARO_ENV === 'h5') {
  require('path/to/h5/name')
}

// JSX 中使用
render () {
  return (
    <View>
      {process.env.TARO_ENV === 'weapp' && <ScrollViewWeapp />}
      {process.env.TARO_ENV === 'h5' && <ScrollViewH5 />}
    </View>
  )
}

🍒 2. 统一接口的多端文件

开发者可以通过将文件修改成 原文件名 + 端类型 的命名形式，不同端的文件代码对外保持统一接口，而引用的时候仍然是 import 原文件名的文件，Taro 在编译时，会跟根据需要编译平台类型，将加载的文件变更为带有对应端类型文件名的文件，从而达到不同的端加载对应文件的目的。

🍒 3. 样式方面建议

考虑到需要兼容RN端，兼容到小程序的限制，基本样式开发遵循三点就差不多可以了：

  • 使用 Flex 布局
  • 基于 BEM 写样式
  • 采用 style 属性覆盖组件样式

🍒 4. 样式代码的条件编译

// 指定平台保留：
/*  #ifdef  %PLATFORM%  */
样式代码
/*  #endif  */

// 指定平台剔除：
/*  #ifndef  %PLATFORM%  */
样式代码
/*  #endif  */

多个平台之间可以使用空格隔开。

🍒 5. 写样式的时候就使用 class 选择器

尾声

好了。目前用Taro开发小程序、RN，踩的坑主要就这些了，希望对小伙伴们有帮助哈，支持的多给个赞！！！！

最后祝大家Taro开发愉快！

avatar
文章
阅读
粉丝