【uni-app】uni-app内置组件和扩展组件

2023-09-14 20:35:11

内置组件和扩展组件的关系

先引用uni-app官网原文:

uni-app是有内置组件的。这和web开发不一样。
web开发基本上不用基础组件,都是找一个三方ui库,全套组件都包含。那是因为html的基础组件默认样式不适配手机风格。
但uni-app体系不是这样,内置组件就是为手机优化的。 但内置组件只能满足基础需求,更多场景,需要扩展组件。
扩展组件是基于内置组件的二次封装,从性能上来讲,扩展组件的性能略低于内置组件,所以开发者切勿抛弃内置组件,直接全套用三方UI组件库。
uni-app的插件市场,有很多扩展组件,有的是单独的,有的是成套的。
有些开发者喜欢成套的组件,但注意成套扩展组件也不可能覆盖所有需求,很多场景还是需要单独下载专业组件。

由此我们确认了内置组件和扩展组件的关系和各自的优势,内置组件是相对更高性能,但满足需求更少的,扩展组件适合引入用于专门的需求但性能没有那么高,因此官方认为不能完全弃用内置组件。

uni-app组件用法

由上我们确认以下用法顺序:

  1. 可以沿用 vue 组件使用的步骤,先创建,再注册,最后使用
  2. 也可以直接使用,即不需要导入、注册,直接使用
  3. 或者直接使用 uni-app 的内置组件,这部分组件与微信小程序的组件类似
    如果以上方式还是无法满足,可以使用 uni-app 提供的拓展组件,直接去组件页面导入到项目中,导入的扩展组件会存放在 uni-modules 文件夹,使用时不需要导入、注册,直接使用(注意:有些组件可能依赖其他插件,按照提示安装即可)

内置组件

  1. 下面列举原先的html改为uni-app的内置组件
    (注:html的标签存在跨端兼容问题,比如只在web端兼容,小程序和app端不兼容,所以要使用uni-app封装后的内置组件,从而回避掉不兼容的问题)

div 改成 view
span、font 改成 text
a 改成 navigator
img 改成 image

input 仅仅是输入框。 原html规范中input不仅是输入框,还有radio、checkbox、时间、日期、文件选择功能。
注:在uni-app和小程序规范中,input仅仅是输入框。其他功能uni-app有单独的组件或API:radio组件、checkbox组件、时间选择、日期选择、图片选择、视频选择、多媒体文件选择(含图片视频)、通用文件选择。

form、button、label、textarea、canvas、video 这些还在。 select 改成 picker
iframe 改成 web-view ul、li没有了,都用view替代。做列表一般使用uList组件 audio
不再推荐使用,改成api方式,背景音频api文档

注:其实老的HTML标签也可以在uni-app里使用,uni-app编译器会在编译时把老标签转为新标签,比如把div编译成view。但不推荐这种用法,调试H5端时容易混乱。

  1. 除了改动外,新增了一批手机端常用的新组件
    ●scroll-view
    ●swiper
    ●icon
    ●rich-text
    ●progress
    ●slider
    ●switch
    ●camera
    ●live-player
    ●map
    ●cover-view
    需要特别注意的是cover-view,uni-app的非h5端的video、map、canvas、textarea是原生组件,层级高于其他组件。如需覆盖原生组件,则需要使用cover-view组件。详见原生组件说明 | uni-app官网

扩展组件库库uni-ui

详见官网:uni-app官网
各种组件效果地址:https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge
DCloud官方出了一套扩展组件,即uni-app官网 这些扩展组件支持单个组件从插件市场下载,也支持 uni-ui - DCloud 插件市场 uni ui,当然更方便的是在HBuilderX新建项目时直接选择uni ui项目模板 uni ui有如下优势:
1.优化逻辑层和视图层的通信折损:非H5端的各个平台,包括App和各种小程序,其逻辑层和视图层是分离的,两层之间通信交互会有折损,导致诸如跟手滑动不流畅。uni ui在底层会利用wxs等技术,把适当的js代码运行在视图层,减少通信折损,保证诸如swiperAction左滑菜单等跟手操作流畅顺滑
2.自动差量diff数据:在uni-app下,开发App和小程序,不需要手动setData,底层自动会差量更新数据。但如果使用了小程序组件,则需要按小程序的setData方式来更新数据,很难做到自动diff更新数据。
3.背景停止:很多ui组件是会一直动的,比如轮播图、跑马灯。即便这个窗体被新窗体挡住,它在背景层仍然在消耗着硬件资源。在Android的webview版本为chrome66以上,背景操作ui会引发很严重的性能问题,造成前台界面明显卡顿。而uni ui的组件,会自动判断自己的显示状态,在组件不再可见时,不会再做动画消耗硬件资源。
4.纯vue语法:uni ui的引用、开发都是纯vue方式。而小程序组件的引用注册、开发都是小程序语法,两种语法混合在一个工程,写的也不舒服,维护也麻烦。
5.与uni统计 - uni-app统计、小程序统计、app统计、全端统计自动整合:比如使用uni ui的导航栏组件,就不需要写统计的自定义事件来触发页面标题上报。uni统计会自动识别导航栏组件的标题。类似的,收藏组件、购物车组件,都可以免打点直接使用。
6.uni ui兼容Android 4.4等低端机webview,没有浏览器兼容问题。
7.uni ui支持nvue:App端,uni-app同时支持webview渲染和原生渲染,而uni ui是可以一套代码同时支持webview渲染和原生渲染的。为了兼容原生渲染,uni ui也做到了纯flex布局。
8.uni ui内置vue doc,使用组件时有良好的代码提示
9.支持pages.json 页面路由 | uni-app官网规范,使用非常简单
10.支持什么是datacom | uni-app官网,云端一体全部封装掉
11.支持uni-app官网,方便插件的更新

插件市场更多组件

插件市场,DCloud 插件市场,有各种玲琅满目的组件、模板。 其中成套的全端兼容ui库包括:

●uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架:整合了非常多组件,功能丰富、文档清晰,但不支持nvue(2.x已支持nvue)
● ColorUI-UniApp - DCloud 插件市场 :颜值很高,css库而非组件
● 已下架插件(1) - DCloud 插件市场 :全端支持的组件库,侧重nvue(商城已下架)
● mypUI开源nvue组件库 兼容vue - DCloud 插件市场 :全端支持的组件库,侧重nvue
● ThorUI组件库 - DCloud 插件市场
●graceUI商业库

更多推荐

Python中的文件I/O操作:常见问题与解决方案

目录常见问题代码示例文件路径问题:文件权限问题:文件编码问题:文件读写模式问题:文件未关闭问题:大文件处理问题:文件读写过程中的异常处理问题:文件内容格式问题:跨平台换行符问题:二进制文件处理问题:总结在Python编程中,文件I/O操作是常见的任务之一。无论是读取文件内容、写入新数据还是追加信息,文件I/O操作都是不

客观题:Android基础【基础题】

一.单选题(共6题,60分)1.(单选题,10分)Android四层架构中,应用框架层使用的是什么语法?A.JavaB.AndroidC.CD.C++正确答案:AAndroid四层架构通常指的是Android应用的四个关键组件,包括:应用层(ApplicationLayer):这是最顶层的层次,包括用户界面(UI)和应

GaussDB技术解读系列:数据库迁移创新实践

近日,以“数智赋能共筑未来”为主题的第14届中国数据库技术大会(DTCC2023)在北京举行,在GaussDB“五高两易”核心技术,给世界一个更优选择的专场,华为云数据库生态工具研发总监窦德明分享了GaussDB数据库的迁移创新实践。本篇将分享GaussDB数据库迁移的创新实践。易迁移能力是企业数据库替换选型的关键考量

华硕电脑怎么录屏?分享实用录制经验!

“华硕电脑怎么录屏呀,刚买的笔记本电脑,是华硕的,自我感觉挺好用的,但是不知道怎么录屏,最近刚好要录一个教程,怎么都找不到在哪里录制,有人能教教我吗?”随着电脑技术的不断发展,人们越来越依赖电脑进行工作和娱乐。录屏功能作为电脑的一项重要功能,已经逐渐成为人们日常生活中的必备工具。华硕作为知名的电脑品牌,为用户提供了便捷

C语言——自定义类型结构体_学习笔记

结构体的基本概念结构体是一种用户自定义的数据类型,可以包含多个不同类型的变量。通过使用结构体,我们可以将相关联的数据组织在一起,便于管理和使用。结构体的声明正常的结构体声明在C语言中,结构体(struct)指的是一种数据结构,是C语言中聚合数据类型的一类。结构体可以包含多个不同类型的数据成员,例如:int、float、

linux的应用线程同步与驱动同步机制

同步机制在Linux应用程序和内核中的驱动程序中,有一些常见的同步机制用于实现线程或进程之间的同步和数据访问保护。下面是它们的一些主要机制:Linux应用程序中的同步机制:互斥锁(Mutex):用于保护共享资源,确保只有一个线程可以访问该资源。应用程序可以使用pthread_mutex_t类型的互斥锁,使用pthrea

爬虫入门基础:深入解析HTTP协议的工作过程

目录一、HTTP协议简介二、HTTP协议的工作过程三、请求方法与常见用途四、请求头与常见字段五、状态码与常见含义六、进阶话题和注意事项总结在如今这个数字化时代,互联网已经成为我们获取信息、交流和娱乐的主要渠道。而在互联网中,HTTP协议则扮演着至关重要的角色。HTTP,全称HypertextTransferProtoc

SpringMVC之JSR303和拦截器

目录一.JSR303二.JSR常用的注解三.JSR快速入门四.拦截器⭐⭐⭐拦截器和过滤器有什么不一样,或者它们的区别是什么??五.拦截器快速入门--登录的案例一.JSR303JSR303是Java规范的一部分,全称为BeanValidation框架。它定义了一组基于标注的验证注解,用于验证Java对象的属性值的合法性。

【Java 基础篇】ThreadPoolExecutor 详解

多线程编程是现代应用程序开发中的一个重要主题。为了更有效地管理和利用多线程资源,Java提供了丰富的线程池支持。ThreadPoolExecutor类是Java中用于创建和管理线程池的核心类之一,本文将详细介绍ThreadPoolExecutor的使用方法和原理。线程池的基本概念在深入探讨ThreadPoolExecu

leetcode 54. 螺旋矩阵

1.题解如果一条边从头遍历到底,则下一条边遍历的起点随之变化选择不遍历到底,可以减小横向、竖向遍历之间的影响一轮迭代结束时,4条边的两端同时收窄1一轮迭代所做的事情变得很清晰:遍历一个“圈”,遍历的范围收缩为内圈一层层向里处理,按顺时针依次遍历:上、右、下、左。不再形成“环”了,就会剩下:一行或一列,然后单独判断矩阵不

计算机竞赛 机器视觉opencv答题卡识别系统

0前言🔥优质竞赛项目系列,今天要分享的是🚩答题卡识别系统-opencvpython图像识别该项目较为新颖,适合作为竞赛课题方向,学长非常推荐!🥇学长这里给一个题目综合评分(每项满分5分)难度系数:3分工作量:3分创新点:3分🧿更多资料,项目分享:https://gitee.com/dancheng-senior

热文推荐