UniApp组件与微信小程序组件对照学习

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小程序支持)

注：注意各平台的差异，具体看各官方文档