uni-app学习（一）

一、开发环境的搭建

        第一步：开发工具使用HBuilder

        第二步：安装需要开发的小程序模拟器，例如微信开发者工具，抖音开发者工具

二、常用的内置组件     

2.1.view常用视图容器组件    

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

2.2.scroll-view可滚动视图区域组件

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

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

属性名	类型	默认值	说明	平台差异说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number/String	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number/String	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number/String		设置竖向滚动条位置
scroll-left	Number/String		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
enable-back-to-top	Boolean	false	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向	app-nvue，微信小程序
show-scrollbar	Boolean	false	控制是否出现滚动条	App-nvue 2.1.5+
refresher-enabled	Boolean	false	开启自定义下拉刷新	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-threshold	Number	45	设置自定义下拉刷新阈值	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-default-style	String	"black"	设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-background	String	"#FFF"	设置自定义下拉刷新区域背景颜色	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-triggered	Boolean	false	设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
enable-flex	Boolean	false	启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。	微信小程序 2.7.3
scroll-anchoring	Boolean	false	开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。	微信小程序 2.8.2
@scrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
@scroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
@refresherpulling	EventHandle		自定义下拉刷新控件被下拉	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrefresh	EventHandle		自定义下拉刷新被触发	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrestore	EventHandle		自定义下拉刷新被复位	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherabort	EventHandle		自定义下拉刷新被中止	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

2.3.swiper滑块视图容器的用法   

滑块视图容器。

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

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

属性名	类型	默认值	说明	平台差异说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
active-class	String		swiper-item 可见时的 class	支付宝小程序
changing-class	String		acceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的class	支付宝小程序
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在滑块的 index
current-item-id	String		当前所在滑块的 item-id ，不能与 current 被同时指定	支付宝小程序不支持
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长	app-nvue不支持
circular	Boolean	false	是否采用衔接滑动，即播放到末尾后重新回到开头
vertical	Boolean	false	滑动方向是否为纵向
previous-margin	String	0px	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	app-nvue、抖音小程序、飞书小程序不支持
next-margin	String	0px	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	app-nvue、抖音小程序、飞书小程序不支持
acceleration	Boolean	false	当开启时，会根据滑动速度，连续滑动多屏	支付宝小程序
disable-programmatic-animation	Boolean	false	是否禁用代码变动触发 swiper 切换时使用动画。	支付宝小程序
display-multiple-items	Number	1	同时显示的滑块数量	app-nvue、支付宝小程序不支持
skip-hidden-item-layout	Boolean	false	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	App、微信小程序、京东小程序
disable-touch	Boolean	false	是否禁止用户 touch 操作	App 2.5.5+、H5 2.5.5+、支付宝小程序、抖音小程序与飞书小程序（只在初始化时有效，不能动态变更）
touchable	Boolean	true	是否监听用户的触摸事件，只在初始化时有效，不能动态变更	抖音小程序与飞书小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch）
easing-function	String	default	指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic	微信小程序、快手小程序、京东小程序
@change	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}
@transition	EventHandle		swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy	App、H5、微信小程序、支付宝小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序
@animationfinish	EventHandle		动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}	抖音小程序与飞书小程序不支持

2.4.image媒体组件属性配合swiper轮播

属性名	类型	默认值	说明	平台差异说明
src	String		图片资源地址
mode	String	'scaleToFill'	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载。只针对page与scroll-view下的image有效	微信小程序、百度小程序、抖音小程序、飞书小程序
fade-show	Boolean	true	图片显示动画效果	仅App-nvue 2.3.4+ Android有效
webp	boolean	false	在系统不支持webp的情况下是否单独启用webp。默认false，只支持网络资源。webp支持详见下面说明	微信小程序2.9.0
show-menu-by-longpress	boolean	false	开启长按图片显示识别小程序码菜单	微信小程序2.7.0
draggable	boolean	true	是否能拖动图片	H5 3.1.1+、App（iOS15+）
@error	HandleEvent		当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
@load	HandleEvent		当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

2.5.navigator路由与页面跳转

页面跳转。

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

除了组件方式，API方式也可以实现页面跳转，另见：uni.navigateTo(OBJECT) | uni-app官网

HarmonyOS Next 兼容性

HarmonyOS Next
HBuilderX 4.23

属性说明

属性名	类型	默认值	说明	平台差异说明
url	String		应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后缀
open-type	String	navigate	跳转方式
delta	Number		当 open-type 为 'navigateBack' 时有效，表示回退的层数
animation-type	String	pop-in/out	当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画	App
animation-duration	Number	300	当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。	App
render-link	boolean	true	是否给 navigator 组件加一层 a 标签控制 ssr 渲染	web3.7.6+、App-vue3.7.6+
hover-class	String	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态	微信小程序
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	600	手指松开后点击态保留时间，单位毫秒
target	String	self	在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram	微信2.0.7+、百度2.5.2+、QQ

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+

2.6.常用的表单组件button和input 

 1、button

属性名	类型	默认值	说明	生效时机	平台差异说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标		H5、App(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)
form-type	String		用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
open-type	String		开放能力
hover-class	String	button-hover	指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果

open-type 有效值

值	说明	平台差异说明
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志	App、微信小程序、QQ小程序
share	触发用户转发	微信小程序、百度小程序、支付宝小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序、京东小程序、360小程序
getUserInfo	获取用户信息，可以从@getuserinfo回调中获取到用户信息	微信小程序、百度小程序、QQ小程序、快手小程序、京东小程序、360小程序
contact	打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息	微信小程序、百度小程序、快手小程序、抖音小程序
getPhoneNumber	获取用户手机号，可以从@getphonenumber回调中获取到用户信息	微信小程序、百度小程序、抖音小程序、支付宝小程序、快手小程序、京东小程序。App平台另见一键登陆
launchApp	小程序中打开APP，可以通过app-parameter属性设定向APP传的参数	微信小程序、QQ小程序、快手小程序、京东小程序
openSetting	打开授权设置页	微信小程序、QQ小程序、百度小程序、快手小程序、京东小程序、360小程序
chooseAvatar	获取用户头像，可以从@chooseavatar回调中获取到头像信息	微信小程序2.21.2版本+
agreePrivacyAuthorization	用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过 @agreeprivacyauthorization 监听用户同意隐私协议事件。隐私合规开发指南详情可见《小程序隐私协议开发指南》	微信小程序2.33.0版本+

2、input

单行输入框。

HarmonyOS Next 兼容性

HarmonyOS Next
HBuilderX 4.23

html规范中input不仅是输入框，还有radio、checkbox、时间、日期、文件选择功能。在uni-app规范中，input仅仅是输入框。其他功能uni-app有单独的组件或API：radio组件、checkbox组件、时间选择、日期选择、图片选择、视频选择、多媒体文件选择(含图片视频)、通用文件选择。

#属性说明

属性名	类型	默认值	说明	平台差异说明
value	String		输入框的初始内容
type	String	text	input 的类型 有效值
text-content-type	String		文本区域的语义，根据类型自动填充 有效值	仅 App-nvue-iOS 支持
password	Boolean	false	是否是密码类型	H5和App写此属性时，type失效
placeholder	String		输入框为空时占位符
placeholder-style	String		指定 placeholder 的样式
placeholder-class	String	"input-placeholder"	指定 placeholder 的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/	抖音小程序、飞书小程序、快手小程序不支持
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacing	Number	0	指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离	App、微信小程序、百度小程序、QQ小程序、京东小程序
focus	Boolean	false	获取焦点。	H5、App需要点击按钮获取焦点的，必须使用@touchend.prevent="onTap"阻止键盘收起默认事件才能获取焦点关于软键盘弹出的逻辑说明，小程序、nvue需使用组件的 focus()、blur() 方法控制焦点
confirm-type	String	done	设置键盘右下角按钮的文字，仅在 type="text" 时生效。有效值	微信小程序、App、H5、快手小程序、京东小程序
confirm-hold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起	App(3.3.7+)、H5 (3.3.7+)、微信小程序、支付宝小程序、百度小程序、QQ小程序、京东小程序
cursor	Number		指定focus时的光标位置
cursor-color	String		光标颜色	微信小程序 3.1.0+、H5(4.0+)、App-Vue(4.0+)
selection-start	Number	-1	光标起始位置，自动聚集时有效，需与selection-end搭配使用
selection-end	Number	-1	光标结束位置，自动聚集时有效，需与selection-start搭配使用
adjust-position	Boolean	true	键盘弹起时，是否自动上推页面	App-Android（vue 页面 softinputMode 为 adjustResize 时无效，使用 x5 内核时无效）、微信小程序、百度小程序、QQ小程序、京东小程序
auto-blur	Boolean	false	键盘收起时，是否自动失去焦点	App-Vue 3.0.0+

type 有效值

值	说明	平台差异说明
text	文本输入键盘
number	数字输入键盘	均支持，App平台、H5平台 3.1.22 以下版本 vue 页面在 iOS 平台显示的键盘包含负数和小数。
idcard	身份证输入键盘	微信、支付宝、百度、QQ小程序、快手小程序、京东小程序
digit	带小数点的数字键盘	均支持，App平台、H5平台 vue 页面在 iOS 平台显示的键盘包含负数（原生键盘不支持负号）。
tel	电话输入键盘
safe-password	密码安全输入键盘	微信小程序
nickname	昵称输入键盘	微信小程序