@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 的场景。

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 不需要引入额外样式,直接使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/57534.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

15分钟学Go 第7天:控制结构 - 条件语句

第7天&#xff1a;控制结构 - 条件语句 在Go语言中&#xff0c;控制结构是程序逻辑的重要组成部分。通过条件语句&#xff0c;我们可以根据不同的条件采取不同的行动。今天我们将详细探讨Go语言中的两种主要条件结构&#xff1a;if语句和switch语句。理解这些控制结构对于编写…

CTA-GAN:基于生成对抗网络对颈动脉和主动脉的非增强CT影像进行血管增强

写在前面 目前只分析了文章的大体内容和我个人认为的比较重要的细节&#xff0c;代码实现还没仔细看&#xff0c;后续有时间会补充代码细节部分。 文章地址&#xff1a;Generative Adversarial Network-based Noncontrast CT Angiography for Aorta and Carotid Arteries 代…

JAVA基础面试题准备

一些常见的JAVA基础题&#xff0c;面试中遇到过的会加*显示。 JAVA基础 1.Java中重载和重写的区别&#xff1f;* 2.int 和Integer类型这两个区别吗&#xff1f; 为什么需要有Integer类型&#xff1a; int和Integer类型的区别&#xff1a; 3.遍历list有那些方式吗&#xff1f;…

python如何提取MYSQL数据,并在完成数据处理后保存?

在现代数据驱动的世界中,数据分析已成为企业决策的重要组成部分。 Python作为一种强大的编程语言,因其丰富的库和简单的语法,广泛应用于数据分析、数据清洗和数据可视化等领域。 本文将详细介绍如何使用Python提取MySQL数据库中的数据,并进行数据分析、数据清洗、汇总等操…

【Linux】进程信号(下)

目录 一、信号的阻塞 1.1 信号在内核中的保存方式 1.2 sigset_t信号集 &#xff08;1&#xff09;信号集操作 &#xff08;2&#xff09;sigprocmask函数 &#xff08;3&#xff09;sigpending函数 二、信号的处理 2.1 用户态和内核态 2.2 重谈进程地址空间 三、信号…

盘点2024年4款高清稳定的Windows10录屏工具。

Windows10电脑录屏在生活当中还是挺重要的&#xff0c;无论是教育领域的制作教程&#xff0c;还是游戏玩家记录精彩瞬间&#xff0c;亦或是商务人士进行演示&#xff0c;录屏都能发挥巨大作用。如果设备自带的一些工具无法完成录屏需求的话&#xff0c;这里帮大家找了几款好用到…

AI大模型应用(3)开源框架Vanna: 利用RAG方法做Text2SQL任务

AI大模型应用(3)开源框架Vanna: 利用RAG方法做Text2SQL任务 RAG&#xff08;Retrieval-Augmented Generation&#xff0c;如下图所示&#xff09;检索增强生成&#xff0c;即大模型LLM在回答问题时&#xff0c;会先从大量的文档中检索出相关信息&#xff0c;然后基于这些检索出…

W25Q64的学习

24位地址意味着系统有24根地址线&#xff0c;每根地址线可以取两种状态&#xff08;0或1&#xff09;&#xff0c;所以系统可以形成 2242^{24}224 个不同的地址组合。每个地址对应一个存储单元&#xff0c;通常是1字节。 在大多数现代计算机体系结构中&#xff0c;地址指向的…

万家数科:零售业务信息化融合的探索|OceanBase案例

本文作者&#xff1a;马琳&#xff0c;万家数科数据库专家。 万家数科商业数据有限公司&#xff0c;作为华润万家旗下的信息技术企业&#xff0c;专注于零售行业&#xff0c;在为华润万家提供服务的同时&#xff0c;也积极面向市场&#xff0c;为零售商及其生态系统提供全面的核…

挖矿病毒来势汹汹

病毒来了, 我的个人站点使用了 wordpress, 它的不知哪个漏洞让黑客攻入了我的站点 使用 top 命令看到了有不明进程始终占据了 100% 的 CPU snapshot 1 snapshot 2 通过以下 "三板斧"可以查杀这个进程 先用 top (shiftp) 查找占据 CPU 最多的进程根据其进程号 pid 查看…

【数据结构】宜宾大学-计院-实验四

栈和队列之&#xff08;栈的基本操作&#xff09; 实验目的&#xff1a;实验内容&#xff1a;实验结果&#xff1a;实验报告:&#xff08;及时撰写实验报告&#xff09;&#xff1a;实验测试结果&#xff1a;代码实现1.0&#xff1a;&#xff08;C/C&#xff09;【含注释】代码…

QGIS之三十二DEM地形导出三维模型gltf

效果 1、准备数据 (1)dem.tif (2)dom.tif 2、qgis加载dem和dom数据 3、安装插件 插件步骤可以参考这篇文章 QGIS之二十四安装插件 安装了Qgis2threejs插件,结果

无人机之自主降落系统篇

一、定义与功能 无人机自主降落系统是指无人机在无需人工干预的情况下&#xff0c;按照预先设定好的程序或基于实时感知的环境信息&#xff0c;自主完成降落过程的技术系统。该系统能够确保无人机在完成任务后安全、准确地降落到指定位置。 二、系统组成 无人机自主降落系统主…

二十、行为型(访问者模式)

访问者模式&#xff08;Visitor Pattern&#xff09; 概念 访问者模式是一种行为型设计模式&#xff0c;允许你在不修改被访问对象的前提下&#xff0c;定义新的操作。它通过将操作封装在访问者类中&#xff0c;从而将操作与对象结构分离。访问者模式非常适合于需要对一组对象…

对“一个中心,三重防护”中安全管理中心的理解

安全管理中心 本控制项为网络安全等级保护标准的技术部分。本项主要包括系统管理、审计管理、安全管理和集中管控四个控制点&#xff0c;其中的集中管控可以说是重中之重&#xff0c;主要都是围绕它来展开的。 28448基本要求中安全管理中心 8.1.5 安全管理中心 8.1.5.1 系统…

ELK之路第二步——可视化界面Kibana

Kibana 1.安装2.解压3.修改配置4.启动 这部分内容就比较简单了&#xff0c;水一片文章。 1.安装 需要梯子 官网下载链接&#xff1a;https://www.elastic.co/cn/downloads/past-releases/kibana-7-3-0 如果你去官网下载页面&#xff0c;点击下载是404报错&#xff0c;记得切换…

redis的zset实现下滑滚动分页查询思路

常规zset查询 我们redis的数据为 我们知道 我们常规查询的话 我们假如 zset 表中 有7个元素&#xff0c;然后我们进行分页查询的话&#xff0c;我们一次查3个元素&#xff0c;然后查出来元素 和元素的分数 我们redis的语法应该这样写 zrevrangebyscore wang 1000 0 withsc…

Flutter 12 实现双击屏幕显示点赞爱心多种动画(AnimationIcon)效果

本文主要是使用Flutter封装一个双击屏幕显示点赞爱心UI效果&#xff0c;并实现了爱心Icon 透明度、缩放、旋转、渐变等动画效果。 实现效果&#xff1a; 实现逻辑&#xff1a; 1、封装FavoriteGesture&#xff08;爱心手势&#xff09;实现双击屏幕显示爱心Icon&#xff1b; …

【设计模式系列】抽象工厂模式

一、什么是抽象工厂模式 抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;是一种创建型设计模式&#xff0c;它提供了一个接口&#xff0c;用于创建一系列相关或相互依赖的对象&#xff0c;而无需指定它们具体的类。这种模式允许客户端使用抽象的接口来创建一组…

VoLTE 微案例:VoLTE 注册失败,I-CSCF 返回 403,HSS(UAR) 返回 5001

目录 1. 问题描述 2. 故障注册流程与正常流程对照 3. 结论 博主wx:yuanlai45_csdn 博主qq:2777137742 想要 深入学习 5GC IMS 等通信知识(加入 51学通信),或者想要 cpp 方向修改简历,模拟面试,学习指导都可以添加博主低价指导哈。 1. 问题描述