跨平台开发-04-Taro核心语法（二）.pdf

跨平台开发Taro

刘军liujun

目录

content1自定义组件

2跨端兼容实现

3Redux状态管理

4卷皮项目实战

coderwhy组件及生命周期

◼在Taro中，除了应用和页面组件有生命周期之外，Taro的组件也是生命周期，如下图所示：

◼下面我们来编写一个HYButton组件。

创建组件

定义属性

样式编写

定义插槽

定义生命周期

组件可编写页面生命周期吗？

✓class组件默认不行，需要单独处理

✓但是函数组件是支持的

页面可以编写组件生命周期吗？可以

coderwhy跨端兼容方案

◼Taro的设计初衷就是为了统一跨平台的开发方式，并且已经尽力通过运行时框架、组件、API去抹平多端差异，但是由于不同的

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

◼方案一：内置环境变量

Taro在编译时提供了一些内置的环境变量来帮助用户做一些特殊处理。

通过这个变量来区分不同环境，从而使用不同的逻辑。在编译阶段，会移除不属于当前端的代码，只保留当前端的代码。

内置环境变量虽然可以解决大部分跨端的问题，但是会让代码中存在很多逻辑判断的代码，影了响代码的可维护性，而且也

让代码变得丑陋。

为了解决这种问题，Taro提供了另外一种跨端开发的方式作为补充。

◼方案二：统一接口的多端文件

开发者可以通过将文件修改成原文件名+端类型的命名形式（端类型对应着process.env.TARO_ENV的取值），不同端的

文件代码对外保持统一接口，而引用的时候仍然是import原文件名的文件。

Taro在编译时，会跟根据当前编译平台类型，精准加载对应端类型的文件，从而达到不同的端加载其对应端的文件。

coderwhy内置环境变量

◼内置环境变量（process.env.TARO_ENV），该环境变量可直接使用

process.env.TARO_ENV，用于判断当前的编译平台类型，有效值为：weapp/swan/alipay/tt/qq/jd/h5/rn。

通过这个变量来区分不同环境，从而使用不同的逻辑。

在编译阶段，会移除不属于当前平台的代码，只保留当前平台的代码，例如：

◼注意事项：不要解构process.env来获取环境变量，请直接以完整书写的方式（process.env.TARO_ENV）来进行使用。

coderwhy统一接口的多端文件

◼统一接口的多端文件这一跨平台兼容写法有如下三个使用要点：

1.不同端的对应文件一定要统一接口和调用方式。

2.引用文件的时候，只需写默认文件名，不用带文件后缀。

3.最好有一个平台无关的默认文件，这样在使用TS的时候也不会出现报错。

◼常见有以下使用场景：

多端组件（属性，方法，事件等需统一）

✓针对不同的端写不同的组件代码

多端脚本逻辑（属性、方法等需统一）

✓针对不同的端写不同的脚本逻辑代码

coderwhy认识ReduxToolkit（RTK）

◼ReduxToolkit是官方推荐的编写Redux逻辑的方法。

以前我们在使用redux的时候，通常会将redux代码拆分在多个文件中，比如：constants、action、reducer等

这种代码组织方式过于繁琐和麻烦，导致代码量过多，也不利于后期管理

ReduxToolkit就是为了解决这种编码方式而诞生。

并且以前的createStore方式已标为过时，而ReduxToolkit已成为官方推荐；

◼安装ReduxToolkit：