【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端时容易混乱。

2. 除了改动外，新增了一批手机端常用的新组件
   ●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商业库