Taro UI：Taro 多端小程序 UI 组件库安装与使用指南

一、项目官方信息

Taro UI 是一款基于 Taro 框架开发的多端 UI 组件库，由凹凸实验室（Taro 团队）维护。

特性：

• 基于 Taro 开发 UI 组件；
• 一套组件可在微信小程序、支付宝小程序、百度小程序、H5 多端适配运行（ReactNative 端暂不支持）；
• 提供友好的 API，可灵活使用组件。

Taro UI 3 仍在 next 分支开发，已支持 Taro v3.0.0-alpha.3，体验版安装命令为 npm i —save taro-ui@next。

二、官方图片

上图为 Taro UI README 提供的微信扫一扫体验码，扫码可在手机上直接体验组件库效果。

三、环境要求

• Node.js 环境；
• Taro 开发工具 @tarojs/cli，版本需在 1.0.0-beta.18 以上；
• 一个已初始化的 Taro 项目；
• 微信开发者工具（用于小程序端预览）。

四、安装步骤

1. 安装 Taro 开发工具

npm install -g @tarojs/cli

2. 在项目中安装 Taro UI

进入你的 Taro 项目目录：

npm install taro-ui

如需体验 Taro UI 3（next 分支）：

npm i —save taro-ui@next

五、使用方法

在代码中 import 需要的组件并按文档说明使用：

import { AtButton } from 'taro-ui'

例如在页面里渲染：

<AtButton type='primary'>主要按钮</AtButton>
<AtButton>次要按钮</AtButton>

• 组件命名统一以 At 开头（AtButton、AtInput、AtList、Tabs 等）；
• 完整组件 API 见官方使用文档：https://taro-ui.aotu.io；
• 参考官方示例工程：https://github.com/NervJS/taro-ui-demo；
• 用 Taro 编译到微信小程序后，即可在开发者工具预览。

六、常见问题 FAQ

1. Taro UI 和原生小程序组件库有什么区别？ Taro UI 是基于 Taro 框架的组件库，写一套 React/Vue 风格代码，经 Taro 编译后可同时跑微信/支付宝/百度小程序与 H5，而不是只面向微信小程序。

2. 安装后组件找不到？ 先确认已全局装 @tarojs/cli 且项目内 npm install taro-ui 成功；Taro 版本需在 1.0.0-beta.18 以上。

3. 支持 ReactNative 吗？ README 明确 RN 端暂不支持；覆盖微信/支付宝/百度小程序与 H5。

4. 想用 Taro UI 3 怎么办？ 它还在 next 分支开发，安装 taro-ui@next 体验，注意仍是开发中版本。

5. 完整组件文档在哪？ https://taro-ui.aotu.io，另有官方示例工程 taro-ui-demo。

6. Taro 本身是什么？ Taro 是凹凸实验室打造的多端开发解决方案，一套代码编译到微信小程序、H5、RN 等多端。

七、跳转链接

• GitHub 仓库：https://github.com/NervJS/taro-ui
• 使用文档：https://taro-ui.aotu.io
• Taro 官网：https://taro.aotu.io
• 官方示例：https://github.com/NervJS/taro-ui-demo