@tarojs/components 和 taro-ui 中的组件之间的区别
1. 来源与用途:
@tarojs/components
:Taro 官方提供的基础组件库,包含了微信小程序、H5 等不同平台的通用组件(如View
,Input
,Button
,Form
等)。这些组件是跨平台的,并提供了与微信小程序等平台原生组件类似的 API。taro-ui
:Taro 官方的 UI 组件库,基于 Taro 框架的设计,提供了更高级的 UI 组件,如AtForm
,AtInput
,AtButton
,AtInputNumber
等。这些组件通常具有更好的样式和更丰富的功能,适用于快速开发界面。
2. 功能与样式:
@tarojs/components
:- 基础组件,样式较为简单,通常需要手动添加样式或进行二次开发。
- 这些组件与微信小程序的原生组件类似,如
Form
,Input
,Button
,用于构建基础的表单或按钮功能。 - 没有额外的样式或动画,需要自行设计。
taro-ui
:- 高级 UI 组件,自带样式,开箱即用,并且提供了更多高级功能。例如:
AtInput
提供了输入框的样式和交互,内置的onChange
方法处理。AtForm
提供表单提交、重置的逻辑,并且与AtButton
等搭配使用时,样式更加统一。AtButton
提供了定制化的按钮样式,且支持多种样式,如带图标、颜色变化等。
- 这些组件基于
@tarojs/components
进行封装,提供更丰富的 UI 和交互逻辑。 - 适合希望快速搭建漂亮 UI 的场景。
- 高级 UI 组件,自带样式,开箱即用,并且提供了更多高级功能。例如:
3. 使用上的区别:
5. 第三方依赖:
总结来说,taro-ui
提供了更加高级和样式丰富的组件,适合快速搭建复杂界面,而 @tarojs/components
提供了基础组件,灵活性更高但需要手动管理样式和功能。
-
@tarojs/components
的表单和按钮: -
import { Form, Input, Button } from '@tarojs/components'; const MyComponent = () => ( <Form onSubmit={() => console.log('Submitted')}> <Input name="name" placeholder="请输入名字" /> <Button formType="submit">提交</Button> </Form> );
taro-ui
的表单和按钮: -
import { AtForm, AtInput, AtButton } from 'taro-ui'; const MyComponent = () => ( <AtForm onSubmit={() => console.log('Submitted')}> <AtInput name="name" placeholder="请输入名字" /> <AtButton formType="submit">提交</AtButton> </AtForm> );
4. 选择何时使用:
@tarojs/components
:适合希望自己编写样式、对 UI 进行细粒度控制的场景,或者开发简单的、小型项目。taro-ui
:适合需要快速开发界面、希望获得一致性 UI 风格的场景。它提供了内置的样式和交互,适合中大型项目或对视觉效果有较高要求的项目。- 使用
taro-ui
时,需要引入它的样式文件,如import "taro-ui/dist/style/index.scss"
,而@tarojs/components
不需要引入额外样式,直接使用。