【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商业库

相关推荐
小白小白从不日白1 分钟前
react hooks--useReducer
前端·javascript·react.js
下雪天的夏风13 分钟前
TS - tsconfig.json 和 tsconfig.node.json 的关系,如何在TS 中使用 JS 不报错
前端·javascript·typescript
diygwcom25 分钟前
electron-updater实现electron全量版本更新
前端·javascript·electron
Hello-Mr.Wang41 分钟前
vue3中开发引导页的方法
开发语言·前端·javascript
艾小逗1 小时前
uniapp快速入门教程,内容来源于官方文档,仅仅记录快速入门需要了解到的知识点
小程序·uni-app·app·es6
程序员凡尘1 小时前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法,亲测有效!!!
前端·javascript·vue.js
编程零零七4 小时前
Python数据分析工具(三):pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
(⊙o⊙)~哦6 小时前
JavaScript substring() 方法
前端
无心使然云中漫步7 小时前
GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions
前端·javascript
Bug缔造者7 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js