一、uni-app概述
1,uni-app概述:
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
2,uni-app由来:
是为了解决跨平台开发的问题。在移动应用开发中,不同平台(如iOS、Android)有不同的开发语言和技术栈,这导致开发者需要针对不同平台开发多套代码,增加了开发和维护的成本。DCloud公司正是看到了这些问题,因此决心打造一款终极的跨平台解决方案,此时,uni-app就应运而生,Uni-app的出现使得开发者可以使用同一套代码,快速地部署到多个平台,提高了开发效率和降低了开发成本。
3,uni-app特点:
- 跨更多平台
- 一套代码,多平台运行
- 运行体验好,性能高
- 开发生态、周边生态丰富(组件丰富)
- 通用技术栈,学习/开发成本低
二、常用的组件介绍
uni-app 为开发者提供了一系列基础组件,类似 HTML 里的基础标签元素,但 uni-app 的组件与 HTML 不同,而是与小程序相同,更适合手机端使用。
虽然不推荐使用 HTML 标签,但实际上如果开发者写了p等标签,在编译到非H5平台时也会被编译器转换为 view 标签,类似的还有 span 转 text、a 转navigator等,包括 css 里的元素选择器也会转,但为了管理方便、策略统一,新写代码时仍然建议使用view等组件。
开发者可以通过组合这些基础组件进行快速开发, 基于内置的基础组件,可以开发各种扩展组件,组件规范与vue组件相同.
1,视图容器
(1)view
它类似于传统html中的div,用于包裹各种元素内容。
属性名 | 类型 | 默认值 | 说明 |
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)scroll-view
可滚动视图区域。用于区域滚动。
属性名 | 类型 | 默认值 | 说明 |
scroll-x | boolean | false | 允许横向滚动 |
scroll-y | boolean | falsee | 允许纵向滚动 |
upper-threshold | Number/String | 50 | 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 |
lower-threshold | Number/String | 50 | 距底部/右边多远时(单位px),触发 scrolltoupper 事件 |
(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 | 是否自动切换 |
(4)match-media
media query 匹配检测节点。
类似于网页开发中使用媒体查询来适配大屏小屏,match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则,满足查询条件时,这个组件才会被展示。
例如在match-media组件中放置一个侧边栏,媒体查询规则设置为宽屏才显示,就可以实现在PC宽屏显示该侧边栏,而在手机窄屏中不显示侧边栏的效果。
属性名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
min-width | number | 否 | 页面最小宽度( px 为单位) | |
max-width | number | 否 | 页面最大宽度( px 为单位) | |
width | number | 否 | 页面宽度( px 为单位) | |
min-height | number | 否 | 页面最小高度( px 为单位) | |
max-height | number | 否 | 页面最大高度( px 为单位) | |
height | number | 否 | 页面高度( px 为单位) | |
orientation | string | 否 | 屏幕方向( landscape 或 portrait ) |
(5)movable-area
可拖动区域
由于app和小程序的架构是逻辑层与视图层分离,使用js监听拖动时会引发逻辑层和视图层的频繁通讯,影响性能。为了方便高性能的实现拖动,平台特封装了movable-area
组件。
movable-area
指代可拖动的范围,在其中内嵌movable-view
组件用于指示可拖动的区域。
即手指/鼠标按住movable-view
拖动或双指缩放,但拖不出movable-area
规定的范围。
当然也可以不拖动,而使用代码来触发movable-view
在movable-area
里的移动缩放。
movable-view
的规范另见movable-view。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
scale-area | Boolean | false | 当里面的 movable-view 设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个 movable-area |
(6)movable-view
属性说明
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
---|---|---|---|---|
direction | String | none | movable-view的移动方向,属性值有all、vertical、horizontal、none | |
inertia | Boolean | false | movable-view是否带有惯性 | |
out-of-bounds | Boolean | false | 超过可移动区域后,movable-view是否还可以移动 | |
x | Number / String | 定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画 | ||
y | Number / String | 定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画 | ||
damping | Number | 20 | 阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快 | 360小程序不支持 |
friction | Number | 2 | 摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值 | 360小程序不支持 |
disabled | Boolean | false | 是否禁用 | |
scale | Boolean | false | 是否支持双指缩放,默认缩放手势生效区域是在movable-view内 | 360小程序不支持 |
scale-min | Number | 0.5 | 定义缩放倍数最小值 | |
scale-max | Number | 10 | 定义缩放倍数最大值 | |
scale-value | Number | 1 | 定义缩放倍数,取值范围为 0.5 - 10 | |
animation | Boolean | true | 是否使用动画 | |
@change | EventHandle | 拖动过程中触发的事件,event.detail = {x: x, y: y, source: source},其中source表示产生移动的原因,值可为touch(拖动)、touch-out-of-bounds(超出移动范围)、out-of-bounds(超出移动范围后的回弹)、friction(惯性)和空字符串(setData) | ||
@scale | EventHandle | 缩放过程中触发的事件,event.detail = {x: x, y: y, scale: scale}, |
除了基本事件外,movable-view提供了两个特殊事件
类型 | 触发条件 | 平台差异说明 |
---|---|---|
htouchmove | 初次手指触摸后移动为横向的移动,如果catch此事件,则意味着touchmove事件也被catch | 微信小程序、百度小程序、QQ小程序、快手小程序、快应用 |
vtouchmove | 初次手指触摸后移动为纵向的移动,如果catch此事件,则意味着touchmove事件也被catch | 微信小程序、百度小程序、QQ小程序、快手小程序、快应用 |
movable-view 必须设置width和height属性,不设置默认为10px
movable-view 默认为绝对定位,top和left属性为0px
当movable-view小于movable-area时,movable-view的移动范围是在movable-area内;当movable-view大于movable-area时,movable-view的移动范围必须包含movable-area(x轴方向和y轴方向分开考虑)
(7)cover-view
覆盖在原生组件上的文本视图。
app-vue和小程序框架,渲染引擎是webview的。但为了优化体验,部分组件如map、video、textarea、canvas通过原生控件实现,原生组件层级高于前端组件(类似flash层级高于div)。为了能正常覆盖原生组件,设计了cover-view。
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
---|---|---|---|---|
scroll-top | number/string | 设置顶部滚动偏移量,仅在设置了 overflow-y: scroll 成为滚动元素后生效 |
(8)cover-image
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
---|---|---|---|---|
src | String | 图标路径。支持本地路径、网络路径。不支持 base64 格式。 | ||
@load | eventhandle | 图片加载成功时触发 | 微信小程序 2.1.0、百度小程序、QQ小程序、快手小程序、京东小程序 | |
@error | eventhandle | 图片加载失败时触发 | 微信小程序 2.1.0、百度小程序、QQ小程序、快手小程序、京东 |