内置组件和扩展组件的关系
先引用uni-app官网原文:
uni-app是有内置组件的。这和web开发不一样。
web开发基本上不用基础组件,都是找一个三方ui库,全套组件都包含。那是因为html的基础组件默认样式不适配手机风格。
但uni-app体系不是这样,内置组件就是为手机优化的。 但内置组件只能满足基础需求,更多场景,需要扩展组件。
扩展组件是基于内置组件的二次封装,从性能上来讲,扩展组件的性能略低于内置组件,所以开发者切勿抛弃内置组件,直接全套用三方UI组件库。
uni-app的插件市场,有很多扩展组件,有的是单独的,有的是成套的。
有些开发者喜欢成套的组件,但注意成套扩展组件也不可能覆盖所有需求,很多场景还是需要单独下载专业组件。
由此我们确认了内置组件和扩展组件的关系和各自的优势,内置组件是相对更高性能,但满足需求更少的,扩展组件适合引入用于专门的需求但性能没有那么高,因此官方认为不能完全弃用内置组件。
uni-app组件用法
由上我们确认以下用法顺序:
- 可以沿用 vue 组件使用的步骤,先创建,再注册,最后使用
- 也可以直接使用,即不需要导入、注册,直接使用
- 或者直接使用 uni-app 的内置组件,这部分组件与微信小程序的组件类似
如果以上方式还是无法满足,可以使用 uni-app 提供的拓展组件,直接去组件页面导入到项目中,导入的扩展组件会存放在 uni-modules 文件夹,使用时不需要导入、注册,直接使用(注意:有些组件可能依赖其他插件,按照提示安装即可)
内置组件
- 下面列举原先的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端时容易混乱。
- 除了改动外,新增了一批手机端常用的新组件
●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商业库