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

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

先引用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商业库

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试