一介布衣

🧭 快速导航

Taro UI 使用与按需引入 ​

项目地址：https://github.com/NervJS/taro-ui
文档：以仓库 README 与示例为准（注意跟随 Taro 版本选择）
关联清单：https://github.com/justjavac/awesome-wechat-weapp

Taro UI 是基于 Taro 的 React 组件库。在 Taro 项目中可快速搭建页面与交互，需注意与 Taro 版本的兼容关系。

🎯 文章目标 ​

  • 在 Taro（React）项目中安装并使用 Taro UI
  • 掌握按需引入与样式定制
  • 了解与小程序端构建的注意点

⚙️ 安装与配置 ​

在 Taro（React）项目根目录：

bash
npm i taro-ui -S

全局样式（示例）：

scss
/* src/app.scss */
@import "~taro-ui/dist/style/index.scss";

页面示例（React）：

tsx
// src/pages/index/index.tsx
import { View } from '@tarojs/components'
import { AtButton, AtModal } from 'taro-ui'
import { useState } from 'react'

export default function Index() {
  const [open, setOpen] = useState(false)

  return (
    <View className='page'>
      <AtButton type='primary' onClick={() => setOpen(true)}>打开弹窗</AtButton>
      <AtModal
        isOpened={open}
        title='提示'
        onClose={() => setOpen(false)}
        onConfirm={() => setOpen(false)}
        confirmText='确认'
        cancelText='取消'
      >
        这是一段内容
      </AtModal>
    </View>
  )
}

🔌 按需引入 ​

  • 建议结合构建工具的按需策略与 tree-shaking，减少无用样式
  • 对新版本/分支，按官方 README 的「按需引入」指南配置 babel/预处理器

🎨 主题与样式 ​

  • 可通过 SCSS 变量或覆盖局部样式进行主题调整
  • 对按钮、表单等高频组件进行二次封装统一风格

🏗️ 工程实践 ​

  • 与 Taro 路由、状态管理（Redux/React Query 等）协同
  • 真机测试：关注 iOS/Android 与小程序基础库差异
  • 包体：结合分包与组件拆分，避免主包过大

🧪 常见问题 ​

  • 版本兼容：注意 Taro 与 Taro UI 的版本对应关系
  • 样式冲突：与自定义样式或其他库共存时，控制选择器优先级
  • 小程序端特性：React 生态库若直接依赖 DOM，需评估可用性

✅ 适用场景 ​

  • 基于 Taro（React）的项目
  • 希望快速使用现成组件并保持一致体验

🔗 参考 ​

📊 总结 ​

Taro UI 对 Taro React 项目较为友好。把控版本、做按需与主题治理，可快速形成稳定的 UI 体系。