UniApp只是一个第三方的开发工具，借鉴各种平台的能力，UniApp的组件也借鉴了微信小程序的组件，我们学习时，可以进行对照学习，我们在用UniApp开发微信小程序时，UniApp也只是将代码转成了微信小程序的代码，还是需要了解微信小程序开发，才能开发出微信小程序的。
下面我们来进行对应学习
1、视图容器
1.1 view
视图容器：它类似于传统html中的div，用于包裹各种元素内容。
1.2 scroll-view
可滚动视图区域：它用于区域滚动。
1.3 swiper
滑块视图容器：它一般用于左右滑动或上下滑动，比如banner轮播图。
演示效果如图：
1.4 match-media
media query 匹配检测节点：它类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。
1.5 movable-area
可拖动区域：由于app和小程序的架构是逻辑层与视图层分离，使用js监听拖动时会引发逻辑层和视图层的频繁通讯，影响性能。为了方便高性能的实现拖动，平台特封装了movable-area组件。
1.6 movable-view
可移动的视图容器：在页面中可以拖拽滑动或双指缩放。
演示如下：
1.7 cover-view
覆盖在原生组件上的文本视图：app-vue和小程序框架，渲染引擎是webview的。但为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。为了能正常覆盖原生组件，设计了cover-view。
1.8 cover-image
覆盖在原生组件上的图片视图：可覆盖的原生组件同cover-view，支持嵌套在cover-view里。
演示如下：
1.9 page-container
页面容器：仅微信小程序里的支持， 小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。
1.10 root-portal
使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。仅微信小程序里的支持
1.11 grid-view
仅微信小程序里的支持
1.12 sticky
吸顶布局器，仅微信小程序里的支持
2、基础内容
2.1 icon
图标：内置了不同状态的图标，如“success, success_no_circle, info, warn, waiting, cancel, download, search, clear”，各平台会有差异，具体看官方文档。
2.2 text
文本组件：用于包裹文本内容。
2.3 rich-text
富文本：支持html内容在App，小程序上显示，具体看官方文档。
2.4 progress
进度条
演示如下：
3、表单组件
3.1 button
按钮，演示如下：
具体各平台的显示会有差异，具体看各平台的官方文档
3.2 checkbox
多选项
3.3 checkbox-group
多选框组，内部由多个checkbox组成。
3.4 editor
富文本编辑器：它可以对图片、文字格式进行编辑和混排。
在web开发时，可以使用contenteditable来实现内容编辑。但这是一个dom API，在非H5平台无法使用。于是微信小程序和uni-app的App-vue提供了editor组件来实现这个功能，并且在uni-app的H5平台也提供了兼容。从技术本质来讲，这个组件仍然运行在视图层webview中，利用的也是浏览器的contenteditable功能。
编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。
通过setContents接口设置内容时，解析插入的 html 可能会由于一些非法标签导致解析错误，建议开发者在应用内使用时通过 delta 进行插入。
富文本组件内部引入了一些基本的样式使得内容可以正确的展示，开发时可以进行覆盖。需要注意的是，在其它组件或环境中使用富文本组件导出的html时，需要额外引入这段样式，并维护<ql-container><ql-editor></ql-editor></ql-container>的结构。
演示如下：
3.5 form
表单：它将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。
当点击 <form> 表单中 formType 为 submit 的 <button> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
3.6 input
单行输入框
html规范中input不仅是输入框，还有radio、checkbox、时间、日期、文件选择功能。在uni-app规范中，input仅仅是输入框。其他功能uni-app有单独的组件或API：radio组件、checkbox组件、时间选择、日期选择、图片选择、视频选择、多媒体文件选择(含图片视频)、通用文件选择
3.7 label
用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。
for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
目前可以绑定的控件有：<button>, <checkbox>, <radio>, <switch>。
3.8 picker
从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。
演示如下：
3.9 picker-view
嵌入页面的滚动选择器：相对于picker组件，picker-view拥有更强的灵活性。当需要对自定义选择的弹出方式和UI表现时，往往需要使用picker-view。
演示如下：
3.10 picker-view-column
<picker-view /> 的子组件，仅可放置于 <picker-view /> 中，其子节点的高度会自动设置成与 picker-view 的选中框的高度一致。
3.11 radio
单选项目
3.12 radio-group
单项选择器，内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下，实现这些radio的单选。
演示如下：
3.13、slider
滑动选择器，演示如下：
3.14、switch
开关选择器，演示如下：
3.15、textarea
多行输入框
3.16、keyboard-accessory
仅微信小程序支持
设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图
3、导航
3.1 navigator
页面跳转：它类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。
通过设置open-type的属性，可以有不同的打开方式，如下：
| 值 | 说明 | 平台差异说明 |
|---|---|---|
| navigate | 对应 uni.navigateTo 的功能 | |
| redirect | 对应 uni.redirectTo 的功能 | |
| switchTab | 对应 uni.switchTab 的功能 | |
| reLaunch | 对应 uni.reLaunch 的功能 | 抖音小程序与飞书小程序不支持 |
| navigateBack | 对应 uni.navigateBack 的功能 | |
| exit | 退出小程序，target="miniProgram"时生效 | 微信2.1.0+、百度2.5.2+、QQ1.4.7+ |
具体看不同平台的官方文档
3.2 functional-page-navigator
仅微信小程序支持
仅在插件中有效，用于跳转到插件功能页。
4、媒体组件
4.1 animation-view
Lottie动画组件，仅UniApp支持
4.2 audio
音频
4.3 camera
页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。
4.4 image
图片
4.5 video
视频播放组件
4.6 live-player
实时音视频播放，也称直播拉流。
4.7 live-pusher
实时音视频录制，也称直播推流。
4.8 voip-room
多人音视频对话。需用户授权 scope.camera、scope.record。仅微信小程序支持
4.9 channel-live
微信小程序内嵌视频号直播组件，展示视频号直播状态和封面，并无弹窗跳转至视频号。注意：使用该组件打开的视频号视频需要与小程序的主体一致。仅微信小程序支持。
4.10 channel-video
小程序内嵌视频号视频组件，支持在小程序中播放视频号视频，并无弹窗跳转至视频号。注意：
若小程序与内嵌视频号视频为同主体，则内嵌视频号视频可支持自动播放；
基础库 2.31.1 起，对于非个人主体小程序，若小程序于内嵌视频号视频非同主体，则内嵌视频号视频不可自动播放，即强制 autoplay=false。
仅微信小程序支持
5、地图
5.1 map
地图组件：它用于展示地图，而定位API只是获取坐标，请勿混淆两者。
6、画布
6.1 canvas
画布
注意事项：
- canvas 标签默认宽度 300px、高度 225px，动态修改 canvas 大小后需要重新绘制。
- h5、app-vue 中单个尺寸过大的 canvas 在 iOS/Safari 无法绘制（具体限制尺寸未公布）。
- 同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作。
- canvas 在微信小程序、百度小程序、QQ小程序中为原生组件，层级高于前端组件，请勿内嵌在 scroll-view、swiper、picker-view、movable-view 中使用。解决 canvas 层级过高无法覆盖，参考 native-component。其他小程序端的 canvas 仍然为 webview 中的 canvas。
- app-vue 中的 canvas 仍然是 webview 的 canvas。app-nvue下如需使用canvas，需下载插件，详见文档底部章节。
- app-vue的canvas虽然是webview自带的canvas，但却比nvue和微信小程序的原生canvas性能更高。注意并非原生=更快。canvas动画的流畅，关键不在于渲染引擎的速度，而在于减少从逻辑层向视图层频繁通信造成的折损。
- 小程序、app-nvue，因为通信阻塞，难以绘制非常流畅的canvas动画。h5和app-vue不存在此问题。但注意，app-vue下若想流畅的绘制canvas动画，需要使用renderjs技术，把操作canvas的js逻辑放到视图层运行，避免逻辑层和视图层频繁通信。hello uni-app的canvas示例很典型，在相同手机运行该示例，可以看出在h5端和app端非常流畅，而小程序端由于没有renderjs技术，做不到这么流畅的动画。
注：具体看各平台的官方文档
7、web-view
7.1 web-view
web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。
注：各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。
8、广告
8.1 广告
有不同种类型的广告，如下：
9、页面属性配置节点
9.1 page-meta
页面属性配置节点，用于指定页面的一些属性、监听页面事件。可部分替代pages.json的功能。
9.2 navigation-bar
页面导航条配置节点，用于指定导航栏的一些属性。只能是 page-meta 组件内的第一个节点，需要配合它一同使用。
9.3 custom-tab-bar
自定义tabBar组件。
在小程序和App端，为提升性能，在 pages.json 里配置固定的原生tabBar。但在H5端，这一设计并不会提升性能。
同时，H5端尤其是PC宽屏，对tabBar的位置和样式有更灵活的需求，tabBar作为一级导航，更多的时候是在PC网页顶部而不是底部。
自定义tabBar组件应需而生，它仍然读取 pages.json 里配置的tabBar信息，但这个组件可以自定义摆放的位置，可以灵活的配置各种css。
该组件支持 pages.json 中 tabBar 相关配置（兼容性和 H5 保持一致）， 其中不支持 borderStyle 配置。
该组件支持所有 tabBar 相关 API，例如设置 tab 徽标、显示红点、以及 switchTab 等。
10、原生组件说明
小程序和App的vue页面，主体是webview渲染的。为了提升性能，小程序和App的vue页面下部分ui元素，比如导航栏、tabbar、video、map使用了原生控件。这种方式被称为混合渲染。
虽然提升了性能，但原生组件带来了其他问题：
- 前端组件无法覆盖原生控件的层级问题
- 原生组件不能嵌入特殊前端组件(如scroll-view)
- 原生控件ui无法灵活自定义
- 原生控件在Android上，字体会渲染为rom的主题字体，而webview如果不经过单独改造不会使用rom主题字体
H5、App的nvue页面，不存在混合渲染的情况，它们或者全部是前端渲染、或者全部是原生渲染，不涉及层级问题。
uni-app 中原生组件清单如下：
- map
- video
- camera（仅微信小程序、百度小程序支持）
- canvas（仅在微信小程序、百度小程序表现为原生组件）
- input（仅在微信小程序、支付宝小程序、抖音小程序、飞书小程序、QQ小程序中且input置焦时表现为原生组件，其中支付宝小程序的input仅为text且置焦时才表现为原生组件）
- textarea（仅在微信小程序、百度小程序、抖音小程序、飞书小程序表现为原生组件）
- live-player（仅微信小程序、百度小程序支持，App端直接使用video组件可同时实现拉流）
- live-pusher（仅微信小程序、百度小程序、app-nvue支持，app-vue使用plus.video.LivePusher可实现推流）
- cover-view
- cover-image
- ad (仅app、微信小程序、百度小程序、抖音小程序、QQ小程序支持)
注：注意各平台的差异，具体看各官方文档
标签：UniApp,canvas,微信,程序,组件,页面,view From： https://blog.csdn.net/xzp19841203xzp/article/details/142557075