uniapp组件笔记-小程序开发笔记01

视图容器

view

视图容器。

它类似于传统html中的div,用于包裹各种元素内容。

如果使用nvue,则需注意,包裹文字应该使用<text>组件。

scroll-view

可滚动视图区域。用于区域滚动。

需注意在webview渲染的页面中,区域滚动的性能不及页面滚动。

swiper

一般用于左右滑动或上下滑动,比如banner轮播图。

滑块视图容器。

注意滑动切换和滚动的区别,滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域,不能停留在2个滑动区域之间。

match-media

media query 匹配检测节点。

类似于网页开发中使用媒体查询来适配大屏小屏,match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则,满足查询条件时,这个组件才会被展示。

例如在match-media组件中放置一个侧边栏,媒体查询规则设置为宽屏才显示,就可以实现在PC宽屏显示该侧边栏,而在手机窄屏中不显示侧边栏的效果。

movable-area

可拖动区域

由于app和小程序的架构是逻辑层与视图层分离,使用js监听拖动时会引发逻辑层和视图层的频繁通讯,影响性能。为了方便高性能的实现拖动,平台特封装了movable-area组件。

movable-area指代可拖动的范围,在其中内嵌movable-view组件用于指示可拖动的区域。

即手指/鼠标按住movable-view拖动或双指缩放,但拖不出movable-area规定的范围。

当然也可以不拖动,而使用代码来触发movable-viewmovable-area里的移动缩放。

movable-view

可移动的视图容器,在页面中可以拖拽滑动或双指缩放。

movable-view必须在movable-area组件中,并且必须是直接子节点,否则不能移动。

cover-view

覆盖在原生组件上的文本视图。

app-vue和小程序框架,渲染引擎是webview的。但为了优化体验,部分组件如map、video、textarea、canvas通过原生控件实现,原生组件层级高于前端组件(类似flash层级高于div)。为了能正常覆盖原生组件,设计了cover-view。

cover-image

覆盖在原生组件上的图片视图。可覆盖的原生组件同cover-view,支持嵌套在cover-view里。

基础内容

icon

图标。

text

文本组件。

用于包裹文本内容。

rich-text

富文本。

支持默认事件,包括:click、touchstart、touchmove、touchcancel、touchend、longpress。

progress

进度条。

表单组件

button

按钮。

checkbox-group

多项选择器,内部由多个 checkbox 组成。

editor

富文本编辑器,可以对图片、文字格式进行编辑和混排。

form

表单,将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。

当点击 <form> 表单中 formType 为 submit 的 <button> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。

input

输入框。

label

用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。

for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有:<button><checkbox><radio><switch>

picker

从底部弹起的滚动选择器。支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。

picker-view

嵌入页面的滚动选择器。

相对于picker组件,picker-view拥有更强的灵活性。当需要对自定义选择的弹出方式和UI表现时,往往需要使用picker-view

radio-group

单项选择器,内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下,实现这些radio的单选。

slider

滑动选择器。

switch

开关选择器。

textarea

多行输入框。

路由与页面跳转

页面跳转。

该组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中注册。

该组件的功能有API方式,另见:https://uniapp.dcloud.io/api/router?id=navigateto

媒体组件

audio

音频。

camera

页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。

image

图片。

video

视频播放组件。

live-player

实时音视频播放,也称直播拉流。

使用live-player 组件需注意:如果发布到小程序,需要先通过各家小程序的审核。指定类目的小程序才能使用(微信小程序类目百度小程序类目),审核通过后在各家小程序管理后台自助开通该组件权限。

live-pusher

实时音视频录制,也称直播推流。

画布

canvas

画布。

webview

web-view

web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。

各小程序平台,web-view 加载的 url 需要在后台配置域名白名单,包括内部再次 iframe 内嵌的其他 url 。

THE END
勇敢面对生活...
点赞12
分享