在移动互联网时代，多端开发已经成为企业级应用的标配需求。一家公司往往需要同时覆盖微信小程序、支付宝小程序、百度小程序、H5、React Native等多个平台，传统开发模式下，这意味着需要为每个平台单独维护一套代码，开发成本呈几何级增长。

Taro正是为了解决这一痛点而诞生的——它是一套遵循React语法规范的多端开发解决方案，由京东凹凸实验室倾力打造。开发者只需编写一套代码，即可编译运行到微信小程序、支付宝小程序、百度小程序、H5、React Native等多个平台。而Taro UI，正是基于Taro框架开发的多端UI组件库，为开发者提供了开箱即用的50+高质量组件，让跨端应用的界面开发变得前所未有的高效。

本文将系统全面地梳理Taro UI的核心知识点，从安装配置到核心组件使用，从主题定制到性能优化，帮助读者建立完整的知识体系，能够熟练运用Taro UI构建企业级跨端应用。

一、Taro UI概述

1.1 什么是Taro UI
Taro UI是由京东凹凸实验室开发的现代化UI组件库，专为Taro多端开发框架设计。它提供了一套完整的、多端适配的组件体系，让开发者能够使用一套组件代码，编译出可以在不同平台运行的应用程序。

Taro UI的核心价值体现在三个层面：

1.2 Taro UI的组件体系
Taro UI的组件库按照功能可以分为以下几大类：

1.3 Taro UI的版本选择
根据Taro版本的不同，需要选择对应的Taro UI版本：

为什么会有版本差异？ Taro在升级到3.x版本时，底层架构发生了重大变化（从编译时优化转向运行时适配），因此组件库也需要同步升级以保证兼容性。在开始项目之前，务必确认Taro版本与Taro UI版本的匹配关系。

二、环境搭建与安装配置

2.1 Taro开发环境搭建
在使用Taro UI之前，首先需要搭建Taro开发环境：

1. 全局安装Taro CLI

   npm install -g @tarojs/cli
   

   2.创建Taro项目

   taro init myApp
   

   在初始化过程中，CLI会提示选择：

项目名称

框架选择（React / Vue等）

模板类型（默认模板 / 其他模板）

3.安装Taro UI

cd myApp
npm install taro-ui@latest

2.2 Taro UI的使用方式
方式一：全局引入（快速上手）
在项目入口文件（如app.js或app.tsx）中全局引入Taro UI样式：

// app.js
import 'taro-ui/dist/style/index.scss'

然后在组件中按需引入具体组件：

import { AtButton } from 'taro-ui'

export default function MyPage() {
  return <AtButton type='primary'>主要按钮</AtButton>
}

全局引入的特点：配置简单，开箱即用，但会引入所有组件的样式，增加打包体积。

方式二：按需引入（性能优化推荐）
只引入需要使用的组件样式，可以有效减少打包体积：

// 只引入Button组件的样式
import 'taro-ui/dist/style/components/button.scss'
import { AtButton } from 'taro-ui'

对于大型项目，按需引入是推荐的优化手段，可以显著减少小程序包体积。

2.3 配置按需引入
为了更方便地实现按需引入，可以使用babel-plugin-import插件自动转换引入方式。

1. 安装插件

   npm install babel-plugin-import --save-dev
   

2. 配置babel.config.js

   module.exports = {
   plugins: [
    ['import', {
      libraryName: 'taro-ui',
      customName: (name) => `taro-ui/lib/components/${name}/${name}`,
      style: (name) => `taro-ui/dist/style/components/${name}.scss`
    }, 'taro-ui']
   ]
   }
   

   配置完成后，代码中直接按需引入即可，插件会自动处理样式：

   import { AtButton } from 'taro-ui'
   // 插件自动转换为
   // import AtButton from 'taro-ui/lib/components/button/button'
   // import 'taro-ui/dist/style/components/button.scss'
   

   来源：
   https://yyvgt.cn/category/jiushige.html