小程序/H5/APP【多端开发利器】Taro框架的条件编译实战指南

内置环境变量在Taro多端开发中的应用

Taro提供了内置环境变量 process.env.TARO_ENV 以便开发者能够针对不同平台编写特定的代码。

process.env.TARO_ENV 的作用

该变量可以帮助开发者判断当前编译的目标平台 ，进而执行特定的代码或应用特定的配置。process.env.TARO_ENV 的取值包含：

• weapp - 微信小程序
• swan - 百度小程序
• alipay - 支付宝小程序
• tt - 字节跳动小程序
• h5 - 网页
• rn - React Native
• qq - QQ小程序
• jd - 京东小程序

示例

以下是基于process.env.TARO_ENV的使用示例：

import Taro from '@tarojs/taro'

function Greeting() {
  let platformMessage;
  
  if (process.env.TARO_ENV === 'weapp') {
    platformMessage = '欢迎使用微信小程序';
  } else if (process.env.TARO_ENV === 'h5') {
    platformMessage = '欢迎访问网页版';
  }
  
  return <div>{platformMessage}</div>;
}

在这个示例中，Greeting 函数组件会根据不同的平台显示不同的欢迎信息。

微信小程序效果：

浏览器效果：

条件编译在Taro中的应用

条件编译是一种编程技术，在编译过程中根据条件决定代码块是否参与编译 。在Taro框架中，条件编译允许开发者为不同的平台编写专门的代码。这意味着可以在同一个文件中写入针对各个平台的代码，而Taro编译器会根据目标平台保留或剔除相应的代码块。

条件编译的语法

Taro的条件编译采用特殊的注释标记来定义。基本语法如下：

判断平台：

• /* #ifdef %PLATFORM% */ - 仅在某个平台编译该代码块
• /* #ifndef %PLATFORM% */ - 除了某个平台，其他平台都编译该代码块

结束条件编译：

• /* #endif */ - 结束条件编译块

%PLATFORM% 需要替换成具体的平台名称，例如 weapp、h5 等。

示例 1: 条件渲染文本

在Taro的React版本中，是不支持 使用注释标记进行条件编译的。需要通过JavaScript的运算符进行条件渲染。例如以下代码，条件编译不会生效，而是原封不动的将所有内容输出：

<View>
  {/* #ifdef weapp */}
  <Text>微信小程序专属文本</Text>
  {/* #endif */}
  
  {/* #ifdef alipay */}
  <Text>支付宝小程序专属文本</Text>
  {/* #endif */}
  
  {/* #ifdef h5 */}
  <Text>H5专属文本</Text>
  {/* #endif */}
</View>

浏览效果

正确的写法是使用内置环境变量：

<View>
  {process.env.TARO_ENV === 'weapp' && <Text>微信小程序专属文本</Text>}
  {process.env.TARO_ENV === 'alipay' && <Text>支付宝小程序专属文本</Text>}
  {process.env.TARO_ENV === 'h5' && <Text>H5专属文本</Text>}
</View>

上面的示例展示了在不同平台中根据process.env.TARO_ENV变量渲染不同的文本。

微信小程序效果：

浏览器效果：

示例 2: 根据平台引入不同的样式

同一组件在不同端可能需要不同的样式修饰，可以这样书写：

/* 公共样式 */
.button {
  padding: 10px;
}

/* #ifdef weapp */
/* 微信小程序样式 */
.button {
  background-color: green;
}
/* #endif */

/* #ifdef h5 */
/* H5样式 */
.button {
  background-color: blue;
}
/* #endif */

在以上SCSS代码中，.button 样式会根据编译的目标平台 决定是使用绿色背景 还是蓝色背景。

微信小程序效果：

浏览器效果：

多端文件支持

Taro为了提高项目的可维护性，引入了多端文件支持。这样，开发者可以为每个平台创建特定的文件版本，而Taro编译器则会智能地选择合适的文件进行编译。

多端文件命名规则

我们可以根据不同端创建不同的文件分支。文件命名规则是：文件名.端名.js。例如，若要指定文件仅在微信小程序和H5平台上有不同，可创建如下文件：

• filename.weapp.js - 微信小程序特有的JavaScript文件
• filename.h5.js - H5特有的JavaScript文件

Taro会根据当前编译目标平台自动选择对应的文件版本。

示例 1: 文件多端支持

假设有一个页面，微信小程序 和H5平台采用不同方式显示。则文件结构可能如下：

在此结构中，Taro会根据编译目标平台自动选择正确的index文件版本。

微信小程序效果：

示例 2：组件多端支持

假设有一个用于展示消息的组件 ，微信小程序 和H5平台采用不同方式显示。则文件结构可能如下：

.
├── ShowMessage.tsx      # 其他平台的消息展示
├── ShowMessage.weapp.tsx # 微信小程序的消息展示
└── ShowMessage.h5.tsx    # H5的消息展示

在此结构中，Taro会根据编译目标平台自动选择正确的ShowMessage文件版本。

使用时无需指明特定端：

微信小程序效果：

浏览器效果：

在本文中，我们探讨了Taro多端开发框架中内置环境变量、条件编译和多端文件支持的功用和应用实例。

总结：

内置环境变量

Taro提供的process.env.TARO_ENV内置环境变量允许开发者在代码中依据不同的编译目标平台执行特定的逻辑 。这为在同一代码中处理多端平台提供了便捷方式。

条件编译

条件编译使得开发者可以在同一个文件内定义针对不同平台的特定代码块，并由Taro编译器在编译过程中根据当前目标平台保留或剔除它们。不过在Taro的React版本中，条件编译需通过JavaScript运算符实现。

多端文件支持

多端文件命名规则，使得同一组件或模块可以根据不同平台有不同的版本。Taro编译器会自动选取适当的文件版本进行编译，大大促进了多端项目的代码组织和可维护性。