提交 78abd246 编写于 作者: study夏羽's avatar study夏羽

docs: component.md remove mp

上级 f0512481
......@@ -147,7 +147,7 @@ uni-app为开发者提供了一系列基础组件,类似HTML里的基础标签
开发者可以通过组合这些基础组件进行快速开发。在需要复用的情况下可封装成扩展组件。
`uni-app` 基础组件规范,与小程序规范相近。如果了解小程序开发的话,uni-app的基础组件会感觉很熟悉。但需要注意组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成 `@change="eventName"`
`uni-app` 基础组件规范,需要注意组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成 `@change="eventName"`
```html
<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="bindDateChange">
......
......@@ -31,7 +31,6 @@
* [navigator](component/navigator.md)
* 媒体组件
* [audio](component/audio.md)
* [camera](component/camera.md)
* [image](component/image.md)
* [video](component/video.md)
* [live-player](component/live-player.md)
......@@ -42,18 +41,10 @@
* [canvas](component/canvas.md)
* webview
* [web-view](component/web-view.md)
* 广告
* [ad](component/ad.md)
* [ad-draw](component/ad-draw.md)
* [ad-content-page](component/ad-content-page.md)
* [Grid 广告](component/ad-grid.md)
* 页面属性配置节点
* [page-meta](component/page-meta.md)
* [navigation-bar](component/navigation-bar.md)
* [custom-tab-bar](component/custom-tab-bar.md)
* 小程序开放能力组件
* [official-account](component/official-account.md)
* [open-data](component/open-data.md)
* App nvue专用组件
* [barcode](component/barcode.md)
* [list](component/list.md)
......@@ -108,7 +99,7 @@
* [更多插件市场的组件](https://ext.dcloud.net.cn/?cat1=2)
* [datacom组件规范](component/datacom)
* [App原生插件](https://nativesupport.dcloud.net.cn/NativePlugin/README)
* [小程序插件](component/mp-weixin-plugin.md)
<li></li>
<div class="contact-box">
<a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
......
......@@ -3,11 +3,9 @@
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|√|x|x|x|
**注意:** 微信小程序平台自基础库 1.6.0 版本开始,不再维护 audio 组件,推荐使用API方式而不是组件方式来播放音频。API见 [uni.createInnerAudioContext](/api/media/audio-context?id=createinneraudiocontext) 替代。
|App|H5|
|:-:|:-:|
|√|√|
app-nvue也不支持此组件。
......
......@@ -16,22 +16,10 @@
|hover-class|String|button-hover|指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果||App-nvue 平台暂不支持|
|hover-start-time|Number|20|按住后多久出现点击态,单位毫秒|||
|hover-stay-time|Number|70|手指松开后点击态保留时间,单位毫秒|||
|app-parameter|String||打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效||微信小程序、QQ小程序|
|hover-stop-propagation|boolean|false|指定是否阻止本节点的祖先节点出现点击态||微信小程序|
|lang|string|'en'|指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。||微信小程序|
|session-from|string||会话来源,open-type="contact"时有效||微信小程序|
|send-message-title|string|当前标题|会话内消息卡片标题,open-type="contact"时有效||微信小程序|
|send-message-path|string|当前分享路径|会话内消息卡片点击跳转小程序路径,open-type="contact"时有效||微信小程序|
|send-message-img|string|截图|会话内消息卡片图片,open-type="contact"时有效||微信小程序|
|show-message-card|boolean|false|是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效||微信小程序|
|@getphonenumber|Handler||获取用户手机号回调|open-type="getPhoneNumber"|微信小程序|
|@getuserinfo|Handler||用户点击该按钮时,会返回获取到的用户信息,从返回参数的detail中获取到的值同uni.getUserInfo|open-type="getUserInfo"|微信小程序|
|@error|Handler||当使用开放能力时,发生错误的回调|open-type="launchApp"|微信小程序|
|@opensetting|Handler||在打开授权设置页并关闭后回调|open-type="openSetting"|微信小程序|
|@launchapp|Handler||从小程序打开 App 成功的回调|open-type="launchApp"|微信小程序|
- **注1:``button-hover`` 默认为 ``{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}``**
- ```open-type="launchApp"```时需要调起的APP接入微信OpenSDK[详见](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html)
- **注意:``button-hover`` 默认为 ``{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}``**
**size 有效值**
......@@ -44,7 +32,7 @@
|值|说明|
|:-|:-|
|primary|微信小程序、360小程序为绿色,App、H5、百度小程序、支付宝小程序、快应用为蓝色,字节跳动小程序为红色,QQ小程序为浅蓝色。如想在多端统一颜色,请改用default,然后自行写样式|
|primary|App、H5为蓝色|
|default|白色|
|warn|红色|
......@@ -59,17 +47,8 @@
|值|说明|平台差异说明|
|:-|:-|:-|
|feedback|打开“意见反馈”页面,用户可提交反馈内容并上传日志|App、微信小程序、QQ小程序|
|share|触发用户转发|微信小程序、百度小程序、支付宝小程序、字节跳动小程序、QQ小程序、快手小程序 |
|getUserInfo|获取用户信息,可以从@getuserinfo回调中获取到用户信息|微信小程序、百度小程序、QQ小程序、快手小程序 |
|contact | 打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息 |微信小程序、百度小程序|
|getPhoneNumber | 获取用户手机号,可以从@getphonenumber回调中获取到用户信息|微信小程序、百度小程序、字节跳动小程序、支付宝小程序、快手小程序。App平台另见[一键登陆](https://uniapp.dcloud.net.cn/univerify) |
|launchApp | 小程序中打开APP,可以通过app-parameter属性设定向APP传的参数|[微信小程序](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html)[QQ小程序](https://q.qq.com/wiki/develop/miniprogram/frame/open_ability/open_app.html)|
|openSetting | 打开授权设置页 |微信小程序、百度小程序|
|getAuthorize | 支持小程序授权 | 支付宝小程序 |
|contactShare | 分享到通讯录好友 | 支付宝小程序 |
|lifestyle | 关注生活号 | 支付宝小程序 |
|openGroupProfile|呼起QQ群资料卡页面,可以通过group-id属性设定需要打开的群资料卡的群号,同时manifest中必须配置groupIdList|QQ小程序基础库1.4.7版本+|
|feedback|打开“意见反馈”页面,用户可提交反馈内容并上传日志|App|
**button点击**
......@@ -100,11 +79,9 @@ button 组件没有 url 属性,如果要跳转页面,可以在@click中编
**注意**
- 在小程序中,开发者可以登录 [微信小程序管理后台](https://mp.weixin.qq.com/)[QQ小程序后台](https://q.qq.com/#/)后,进入菜单“客服反馈”页面获取反馈内容。
- 在 App 中,开发者登录 [DCloud开发者中心](https://dev.dcloud.net.cn/) 后点击应用名称,进入左侧菜单“用户反馈”页面获取反馈内容。
- 点击 share 分享按钮时会触发 [onShareAppMessage](/api/plugins/share)
- 支付宝小程序平台,获取用户手机号时,建议先通过条件编译的方式,调用支付宝原生API,[参考](https://docs.alipay.com/mini/api/getphonenumber)
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/button/button)
......@@ -137,11 +114,3 @@ button 组件没有 url 属性,如果要跳转页面,可以在@click中编
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/f3edf730-4f32-11eb-8a36-ebb87efcf8c0.png)
**注意**
事件务必使用vue语法,比如下面的获取手机号示例
```html
<button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">获取手机号</button>
```
......@@ -6,25 +6,20 @@
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|type|String||指定 canvas 类型,支持 2d (2.9.0) 和 webgl|微信小程序 2.7.0+ 字节小程序1.78.0+|
|canvas-id|String||canvas 组件的唯一标识符||
|disable-scroll|Boolean|false|当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新|字节跳动小程序不支持|
|@touchstart|EventHandle||手指触摸动作开始|字节小程序1.78.0+|
|@touchmove|EventHandle||手指触摸后移动|字节小程序1.78.0+|
|@touchend|EventHandle||手指触摸动作结束|字节小程序1.78.0+|
|@touchcancel|EventHandle||手指触摸动作被打断,如来电提醒,弹窗|字节小程序1.78.0+|
|@longtap|EventHandle||手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动|字节跳动小程序不支持|
|@error|EventHandle||当发生错误时触发 error 事件,detail = {errMsg: 'something wrong'}|字节跳动小程序不支持|
|disable-scroll|Boolean|false|当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新||
|@longtap|EventHandle||手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动||
|@error|EventHandle||当发生错误时触发 error 事件,detail = {errMsg: 'something wrong'}||
**注意事项:**
* 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](/component/native-component)。其他小程序端的 canvas 仍然为 webview 中的 canvas
* 解决 canvas 层级过高无法覆盖,参考 [native-component](/component/native-component)
* 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](https://uniapp.dcloud.io/frame?id=renderjs)技术,把操作canvas的js逻辑放到视图层运行,避免逻辑层和视图层频繁通信。hello uni-app的canvas示例很典型,在相同手机运行该示例,可以看出在h5端和app端非常流畅,而小程序端由于没有renderjs技术,做不到这么流畅的动画。
* app-vue的canvas虽然是webview自带的canvas,但却比nvue的原生canvas性能更高。注意并非原生=更快。canvas动画的流畅,关键不在于渲染引擎的速度,而在于减少从逻辑层向视图层频繁通信造成的折损。
* app-nvue,因为通信阻塞,难以绘制非常流畅的canvas动画。h5和app-vue不存在此问题。但注意,app-vue下若想流畅的绘制canvas动画,需要使用[renderjs](https://uniapp.dcloud.io/frame?id=renderjs)技术,把操作canvas的js逻辑放到视图层运行,避免逻辑层和视图层频繁通信。hello uni-app的canvas示例很典型,在相同手机运行该示例,可以看出在h5端和app端非常流畅,而小程序端由于没有renderjs技术,做不到这么流畅的动画。
**示例:** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/canvas/canvas)
......@@ -42,7 +37,6 @@
export default {
onReady: function (e) {
var context = uni.createCanvasContext('firstCanvas')
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
......@@ -75,9 +69,9 @@ export default {
canvas的常用用途有图表和图片处理,在uni-app插件市场有大量基于canvas的插件,可搜索 [图表](https://ext.dcloud.net.cn/search?q=图表)[头像裁剪](https://ext.dcloud.net.cn/search?q=头像裁剪)[海报](https://ext.dcloud.net.cn/search?q=海报)[二维码](https://ext.dcloud.net.cn/search?q=%E4%BA%8C%E7%BB%B4%E7%A0%81)
关于图表
- H5端流行的echart报表因为涉及大量dom操作,无法跨端使用,而wx-chart在跨端和更新方面都不足。如考虑小程序,推荐使用全端可用的[uChart](https://ext.dcloud.net.cn/plugin?id=271)
- H5端流行的echart报表因为涉及大量dom操作,无法跨端使用,而wx-chart在跨端和更新方面都不足。
- 如只考虑H5端,也可以继续使用echart、f2等常规web图表。
- 如不考虑小程序,那么App端和H5,也可以通过renderjs技术来使用echart、f2等web图表,功能性能比uchart更好。[什么是renderjs](https://uniapp.dcloud.io/frame?id=renderjs)[基于renderjs使用echart的示例](https://ext.dcloud.net.cn/plugin?id=1207)
- App端和H5,也可以通过renderjs技术来使用echart、f2等web图表,功能性能比uchart更好。[什么是renderjs](https://uniapp.dcloud.io/frame?id=renderjs)[基于renderjs使用echart的示例](https://ext.dcloud.net.cn/plugin?id=1207)
**nvue页面如何使用canvas**
......
......@@ -131,7 +131,6 @@
**注意**
- checkbox的默认颜色,在不同平台不一样。微信小程序、360小程序是绿色的,字节跳动小程序为红色,其他平台是蓝色的。更改颜色使用color属性。
- 如需调节checkbox大小,可通过css的scale方法调节,如缩小到70%`style="transform:scale(0.7)"`
**扩展**
......
......@@ -6,20 +6,12 @@ app-vue和小程序框架,渲染引擎是webview的。但为了优化体验,
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快应用|360小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|√|√|x|√|
|App|H5|
|:-:|:-:|
|√|√|
* app-nvue所有组件均为原生渲染,不存在前端组件无法覆盖原生组件的问题。但为了保持多端兼容,nvue里也实现了`cover-view`,作用于普通`view`一样。
* 微信小程序部分原生组件实现了同层渲染,在指定的基础库版本上,某些原生组件可无需使用`cover-view`覆盖,[详见](https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html)
* 字节跳动小程序不需要`cover-view`,因其原生组件均实现了同层渲染。
* 360小程序不存在原生组件,无此概念
支持的事件:`click`
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|scroll-top|number/string||设置顶部滚动偏移量,仅在设置了 overflow-y: scroll 成为滚动元素后生效|微信小程序2.1.0|
#### cover-image
......@@ -27,17 +19,15 @@ app-vue和小程序框架,渲染引擎是webview的。但为了优化体验,
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快应用|360小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|√|√|x|√|
|App|H5|
|:-:|:-:|
|√|√|
**属性说明**
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|src|String||图标路径。支持本地路径、网络路径。不支持 base64 格式。||
|@load|eventhandle||图片加载成功时触发|微信小程序 2.1.0|
|@error|eventhandle||图片加载失败时触发|微信小程序 2.1.0|
app-vue上可覆盖的原生组件:`<video>``<map>`
......@@ -63,25 +53,7 @@ app-vue上可覆盖的原生组件:`<video>`、`<map>`
- App端还提供了更灵活和强大的`subNvue`,参考[原生子窗体subNvue](/api/window/subNVues)
- 在 video 组件中使用时,若想在全屏模式下使用`cover-view`,只有在微信小程序、App端的nvue页面可实现。
- 在App端,如果重度使用video和map,推荐使用nvue页面。
- 百度小程序iOS端暂不支持一个页面有多个video时嵌套cover-view。
- 支付宝小程序中 `cover-view` 不支持嵌套。
**微信小程序的cover-view使用注意:**
- cover-view和cover-image的aria-role仅可设置为button,读屏模式下才可以点击,并朗读出“按钮”;为空时可以聚焦,但不可点击
- 基础库 2.2.4 起支持 touch 相关事件,也可使用 hover-class 设置点击态
- 基础库 2.1.0 起支持设置 scale rotate 的 css 样式,包括 transition 动画
- 基础库 1.9.90 起 cover-view 支持 overflow: scroll,但不支持动态更新 overflow
- 基础库 1.9.90 起最外层 cover-view 支持 position: fixed
- 基础库 1.9.0 起支持插在 view 等标签下。在此之前只可嵌套在原生组件map、video、canvas、camera内,避免嵌套在其他组件内。
- 基础库 1.6.0 起支持css transition动画,transition-property只支持transform (translateX, translateY)与opacity。
- 基础库 1.6.0 起支持css opacity。
- 事件模型遵循冒泡模型,但不会冒泡到原生组件。
- 文本建议都套上cover-view标签,避免排版错误。
- 只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow: visible等。
- 建议子节点不要溢出父节点
- 支持使用 z-index 控制层级
- 默认设置的样式有:white-space: nowrap; line-height: 1.2; display: block;
- 自定义组件嵌套 cover-view 时,自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐,否则会导致 cover-view 不显示
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/cover-view/cover-view)
......
......@@ -2,7 +2,7 @@
富文本编辑器,可以对图片、文字格式进行编辑和混排。
在web开发时,可以使用`contenteditable`来实现内容编辑。但这是一个dom API,在非H5平台无法使用。于是微信小程序和uni-app的App-vue提供了`editor`组件来实现这个功能,并且在uni-app的H5平台也提供了兼容。从技术本质来讲,这个组件仍然运行在视图层webview中,利用的也是浏览器的`contenteditable`功能。
在web开发时,可以使用`contenteditable`来实现内容编辑。但这是一个dom API,在非H5平台无法使用。于是uni-app的App-vue提供了`editor`组件来实现这个功能,并且在uni-app的H5平台也提供了兼容。从技术本质来讲,这个组件仍然运行在视图层webview中,利用的也是浏览器的`contenteditable`功能。
编辑器导出内容支持带标签的 `html`和纯文本的 `text`,编辑器内部采用 `delta` 格式进行存储。
......@@ -16,11 +16,12 @@
**平台差异说明**
|App |H5 |微信小程序 |支付宝小程序|百度小程序 |字节跳动小程序|QQ小程序 |快应用 |360小程序|快手小程序 |
|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|2.0+,app-vue|2.4.5+ |基础库 2.7.0+|x |需引入动态库[引入方式](/api/media/editor-context) |x |x |x |x |x |
|App |H5 |
|:-: |:-: |
|2.0+,app-vue |2.4.5+ |
editor组件目前只有H5、App的vue页面、微信小程序、百度小程序支持,其他端平台自身未提供editor组件,只能使用web-view加载web页面,也可搜索[插件市场](https://ext.dcloud.net.cn/search?q=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91) 获取简单的markdown富文本编辑器
editor组件目前只有H5、App的vue页面支持,其他端平台自身未提供editor组件,只能使用web-view加载web页面,也可搜索[插件市场](https://ext.dcloud.net.cn/search?q=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91) 获取简单的markdown富文本编辑器
| 属性 | 类型 | 默认值 | 必填 | 说明 |
| --- | --- | --- | --- | --- |
......
......@@ -7,8 +7,6 @@
|属性名|类型|说明|平台差异说明|
|:-|:-|:-|:-|
|report-submit|Boolean|是否返回 formId 用于发送[模板消息](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/template-message.html)|微信小程序、支付宝小程序|
|report-submit-timeout|number|等待一段时间(毫秒数)以确认 formId 是否生效。如果未指定这个参数,formId 有很小的概率是无效的(如遇到网络失败的情况)。指定这个参数将可以检测 formId 是否有效,以这个参数的时间作为这项检测的超时时间。如果失败,将返回 requestFormId:fail 开头的 formId|微信小程序2.6.2|
|@submit|EventHandle|携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''},report-submit 为 true 时才会返回 formId||
|@reset|EventHandle|表单重置时会触发 reset 事件|&nbsp;|
......@@ -100,13 +98,13 @@
**使用内置 behaviors**
小程序端在`form`内的自定义组件内有`input`表单控件时,或者用普通标签实现表单控件,例如``评分``等,无法在`form``submit`事件内获取组件内表单控件值,此时可以使用`behaviors`
无法在`form``submit`事件内获取组件内表单控件值,此时可以使用`behaviors`
对于 form 组件,目前可以自动识别下列内置 behaviors:
uni://form-field
> 目前仅支持 微信小程序、QQ小程序、百度小程序、h5。
> 目前仅支持h5。
**uni://form-field**
......
......@@ -4,9 +4,9 @@
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快应用|360小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√(2.2.3+)|√|√|√|√|√|√|√|√|
|App|H5|
|:-:|:-:|
|√|√(2.2.3+)|
**Tips**
......@@ -24,9 +24,7 @@
|平台|type 有效值|
|:-:|:-:|
|App、H5、微信小程序、QQ小程序|success, success_no_circle, info, warn, waiting, cancel, download, search, clear|
|支付宝小程序|info, warn, waiting, cancel, download, search, clear, success, success_no_circle,loading|
|百度小程序|success, info, warn, waiting, success_no_circle, clear, search, personal, setting, top, close, cancel, download, checkboxSelected, radioSelected, radioUnselect|
|App、H5|success, success_no_circle, info, warn, waiting, cancel, download, search, clear|
**示例**
......
......@@ -6,10 +6,7 @@
|:-|:-|:-|:-|:-|
|src|String||图片资源地址||
|mode|String|'scaleToFill'|图片裁剪、缩放的模式|<div style="width:68px;"></div>|
|lazy-load|Boolean|false|图片懒加载。只针对page与scroll-view下的image有效|微信小程序、百度小程序、字节跳动小程序|
|fade-show|Boolean|true|图片显示动画效果|仅App-nvue 2.3.4+ Android有效|
|webp|boolean|false|默认不解析 webP 格式,只支持网络资源|微信小程序2.9.0|
|show-menu-by-longpress|boolean|false|开启长按图片显示识别小程序码菜单|微信小程序2.7.0|
|draggable|boolean|true|鼠标长按是否能拖动图片|仅 H5 平台 3.1.1+ 有效|
|@error|HandleEvent||当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'}||
|@load|HandleEvent||当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}|&nbsp;|
......@@ -34,7 +31,7 @@ mode 有 14 种模式,其中 5 种是缩放模式,9 种是裁剪模式。
|缩放|aspectFit|保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。|
|缩放|aspectFill|保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。|
|缩放|widthFix|宽度不变,高度自动变化,保持原图宽高比不变|
|缩放|heightFix|高度不变,宽度自动变化,保持原图宽高比不变 **App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3**|
|缩放|heightFix|高度不变,宽度自动变化,保持原图宽高比不变 **App 和 H5 平台 HBuilderX 2.9.3+ 支持**|
|裁剪|top|不缩放图片,只显示图片的顶部区域|
|裁剪|bottom|不缩放图片,只显示图片的底部区域|
|裁剪|center|不缩放图片,只显示图片的中间区域|
......
......@@ -15,21 +15,20 @@
|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小程序|
|cursor-spacing|Number|0|指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离|App|
|focus|Boolean|false|获取焦点。|在 H5 平台能否聚焦以及软键盘是否跟随弹出,取决于当前浏览器本身的实现。nvue 页面不支持,需使用组件的 focus()、blur() 方法控制焦点|
|confirm-type|String|done|设置键盘右下角按钮的文字,仅在 type="text" 时生效。|微信小程序、App、H5、快手小程序|
|confirm-hold|Boolean|false|点击键盘右下角按钮时是否保持键盘不收起|App、微信小程序、支付宝小程序、百度小程序、QQ小程序|
|confirm-type|String|done|设置键盘右下角按钮的文字,仅在 type="text" 时生效。|App、H5|
|confirm-hold|Boolean|false|点击键盘右下角按钮时是否保持键盘不收起|App|
|cursor|Number||指定focus时的光标位置||
|selection-start|Number|-1|光标起始位置,自动聚集时有效,需与selection-end搭配使用||
|selection-end|Number|-1|光标结束位置,自动聚集时有效,需与selection-start搭配使用||
|adjust-position|Boolean|true|键盘弹起时,是否自动上推页面|App-Android(vue 页面 softinputMode 为 adjustResize 时无效)、微信小程序、百度小程序、QQ小程序|
|hold-keyboard|boolean|false|focus时,点击页面的时候不收起键盘|微信小程序2.8.2|
|adjust-position|Boolean|true|键盘弹起时,是否自动上推页面|App-Android(vue 页面 softinputMode 为 adjustResize 时无效)|
|auto-blur|boolean|false|键盘收起时,是否自动失去焦点|App 3.0.0+|
|@input|EventHandle||当键盘输入时,触发input事件,event.detail = {value}|差异见下方 Tips|
|@focus|EventHandle||输入框聚焦时触发,event.detail = { value, height },height 为键盘高度|仅微信小程序、App(2.2.3+) 、QQ小程序支持 height|
|@blur|EventHandle||输入框失去焦点时触发,event.detail = {value: value}|快手小程序不支持|
|@confirm|EventHandle||点击完成按钮时触发,event.detail = {value: value}|&nbsp;快手小程序不支持|
|@keyboardheightchange|eventhandle||键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration}|微信小程序基础库2.7.0+、App 3.1.0+|
|@focus|EventHandle||输入框聚焦时触发,event.detail = { value, height },height 为键盘高度|仅App(2.2.3+) 支持|
|@blur|EventHandle||输入框失去焦点时触发,event.detail = {value: value}||
|@confirm|EventHandle||点击完成按钮时触发,event.detail = {value: value}|&nbsp;|
|@keyboardheightchange|eventhandle||键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration}|App 3.1.0+|
**Tips**
......@@ -55,16 +54,12 @@
|:-|:-|:-|
|text|文本输入键盘||
|number|数字输入键盘|均支持,App平台、H5平台 3.1.22 以下版本 vue 页面在 iOS 平台显示的键盘包含负数和小数。|
|idcard|身份证输入键盘|微信、支付宝、百度、QQ小程序、快手小程序|
|digit|带小数点的数字键盘|均支持,App平台、H5平台 vue 页面在 iOS 平台显示的键盘包含负数。|
|tel|电话输入键盘|仅App的nvue页面支持|
**注意事项**
- 原html规范中input不仅是输入框,还有radio、checkbox、时间、日期、文件选择功能。在uni-app和小程序规范中,input仅仅是输入框。其他功能uni-app有单独的组件或API:[radio组件](https://uniapp.dcloud.io/component/radio)[checkbox组件](https://uniapp.dcloud.io/component/checkbox)[时间选择](https://uniapp.dcloud.io/component/picker?id=%e6%97%b6%e9%97%b4%e9%80%89%e6%8b%a9%e5%99%a8)[日期选择](https://uniapp.dcloud.io/component/picker?id=%e6%97%a5%e6%9c%9f%e9%80%89%e6%8b%a9%e5%99%a8)[图片选择](https://uniapp.dcloud.io/api/media/image?id=chooseimage)[视频选择](https://uniapp.dcloud.io/api/media/video?id=choosevideo)[多媒体文件选择(含图片视频)](https://uniapp.dcloud.io/api/media/video?id=choosemedia)[通用文件选择](https://uniapp.dcloud.io/api/media/file?id=choosefile)
- 小程序平台,`number` 类型只支持输入整型数字。微信开发者工具上体现不出效果,请使用真机预览。
- 如果需要在小程序平台输入浮点型数字,请使用 `digit` 类型。
- 小程序端input在置焦时,会表现为原生控件,此时会层级变高。如需前端组件遮盖input,需让input失焦,或使用cover-view等覆盖原生控件的方案,[参考](https://uniapp.dcloud.io/component/native-component)。具体来讲,阿里小程序的input为text且置焦为原生控件;微信、头条、QQ所有input置焦均为原生控件;百度小程序置焦时仍然是非原生的。也可以参考[原生控件](https://uniapp.dcloud.io/component/native-component)文档
- input组件若不想弹出软键盘,可设置为disabled
**text-content-type 有效值**
......@@ -77,11 +72,11 @@
|值|说明|平台差异说明|
|:-|:-|:-|
|send|右下角按钮为“发送”|微信、支付宝、百度小程序、快手小程序、app-nvue、app-vue和h5(2.9.9+,且要求设备webview内核Chrome81+、Safari13.7+)|
|send|右下角按钮为“发送”|app-nvue、app-vue和h5(2.9.9+,且要求设备webview内核Chrome81+、Safari13.7+)|
|search|右下角按钮为“搜索”||
|next|右下角按钮为“下一个”|微信、支付宝、百度小程序、快手小程序、app-nvue、app-vue和h5(2.9.9+,且要求设备webview内核Chrome81+、Safari13.7+)|
|next|右下角按钮为“下一个”|app-nvue、app-vue和h5(2.9.9+,且要求设备webview内核Chrome81+、Safari13.7+)|
|go|右下角按钮为“前往”||
|done|右下角按钮为“完成”|微信、支付宝、百度小程序、快手小程序、app-nvue、app-vue和h5(2.9.9+,且要求设备webview内核Chrome81+、Safari13.7+)|
|done|右下角按钮为“完成”|app-nvue、app-vue和h5(2.9.9+,且要求设备webview内核Chrome81+、Safari13.7+)|
- App平台的nvue页面,如果是weex编译模式,需通过weex的api设置(weex模式已被淘汰)
- App平台的vue页面及 H5平台 的弹出键盘使用的是浏览器控制的键盘,在Chrome81+、Safari13.7+之前,键盘右下角文字只能设置完成和搜索,从Chrome81+、Safari13.7+起支持设置发送、下一个。
......@@ -126,7 +121,6 @@ App平台软键盘弹出有 adjustResize|adjustPan 两种模式,默认为 adju
**注意**
- adjustResize模式在Android App上,弹起键盘和收回键盘时,因为要重设webview窗体高度,可能会在个别安卓机型闪现灰屏或漏出下层页面内容。
- 小程序端在 input 聚焦期间,避免使用 css 动画。
- H5平台只能在用户交互时修改 focus 生效。
- 如果遇到 focus 属性设置不生效的问题参考:[组件属性设置不生效解决办法](/vue-api?id=_4-组件属性设置不生效解决办法)
- 如需禁止点击其他位置收起键盘的默认行为,可以监听`touch`事件并使用`prevent`修饰符(仅支持App-v3、H5,其他平台可以通过设置`focus`来使输入框重新获取焦点),例如在确认按钮上使用:```@touchend.prevent="onTap"```
......
......@@ -6,9 +6,9 @@
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快应用|360小程序|
|:-: |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x(见下)|x |√ |x |√ |√(基础库版本>=1.52.0) |√ |x |x |
|App|H5|
|:-: |:-:|
|x(见下)|x |
- App的实时音视频播放,不是使用 live-player,而是直接使用 video 组件。
- H5 下可用 video 播放符合 HTML5 规范的流媒体,rtmp 等非 HTML5 标准的流媒体格式,仅在部分支持 flash 的国内手机浏览器上可播放。在 pc 浏览器上,需要安装 flash 插件才能播放 rtmp 等格式。
......@@ -19,8 +19,7 @@
|属性名|类型|默认值|说明|平台差异说明|
|:-:|:-:|:-:|:-:|:-:|
|id|String||live-player 属性的唯一标志符||
|src|String||音视频地址。百度小程序支持 m3u8 格式;微信小程序支持 flv, rtmp 格式||
|mode|String|live|live(直播),RTC(实时通话,该模式时延更低)|微信小程序|
|src|String||音视频地址。||
|autoplay|Boolean|false|自动播放||
|muted|Boolean|false|是否静音||
|orientation|String|vertical|画面方向,可选值有 vertical,horizontal||
......@@ -28,22 +27,12 @@
|background-mute|Boolean|false|进入后台时是否静音||
|min-cache|Number|1|最小缓冲区,单位s||
|max-cache|Number|3|最大缓冲区,单位s||
|picture-in-picture-mode|string/Array|3|设置小窗模式: push, pop,空字符串或通过数组形式设置多种模式(如: ["push", "pop"])|微信小程序(2.10.3)|
|@statechange|EventHandle||播放状态变化事件,detail = {code}||
|@netstatus|EventHandle||网络状态通知,detail = {info}||
|@fullscreenchange|EventHandle||全屏变化事件,detail = {direction, fullScreen}。|&nbsp;|
|@audiovolumenotify|EventHandle||播放音量大小通知,detail = {}|微信小程序(2.10.0)|
|@enterpictureinpicture|EventHandle||播放器进入小窗|微信小程序(2.11.0)|
|@leavepictureinpicture|EventHandle||播放器退出小窗|2.11.0|
mode 的合法值
|值|说明|
|:-|:-|
|live|直播|
|RTC|实时通话,该模式时延更低|
orientation 的合法值
......@@ -61,23 +50,11 @@ object-fit 的合法值
|fillCrop|图像铺满屏幕,超出显示区域的部分将被截掉|
sound-mode 的合法值
|值|说明|
|:-|:-|
|speaker|扬声器|
|ear|听筒|
**Tips**
* 百度小程序 iOS 端不支持设置 orientation 属性;
* 微信小程序已废弃 background-mute 属性,默认为进入后台静音;
* live-player 默认宽度 300px、高度 225px;
* live-player 是原生组件,层级高于前端组件,请勿在 scroll-view、swiper、picker-view、movable-view 中使用
* 小程序下覆盖live-player需要使用cover-view。[详见](/component/native-component)
* live-player 组件相关 JS API:[createLivePlayerContext](/api/media/live-player-context)
* 小程序平台使用live-player有审核限制,请注意参考各家文档。
* App端使用直播,推荐nvue页面下用video组件,可避免复杂的层级问题和全屏覆盖问题。
......
......@@ -4,9 +4,9 @@
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快应用|360小程序|快手小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(仅nvue)|x|√|x|x|x|x|x|x|x|x|
|App|H5|
|:-:|:-:|
|√(仅nvue)|x|
如app平台的vue页面需要支持直播推流,需编写条件编译代码,使用 `plus.video.LivePusher`[业务指南](https://ask.dcloud.net.cn/article/13416)[规范文档](http://www.html5plus.org/doc/zh_cn/video.html#plus.video.LivePusher)。还是推荐直接使用nvue里的`live-pusher`组件。
......@@ -34,25 +34,10 @@ whiteness|Number|0|否|美白,取值范围 0-9(iOS取值范围为1) ,0
orientation|String|"vertical"|否|画面方向|
min-bitrate|Number|200|否|最小码率。|
max-bitrate|Number|1000|否|最大码率。|
audio-quality|string|high|否|高音质(48KHz)或低音质(16KHz),值为high, low|微信小程序1.7.0
waiting-image|string||否|进入后台时推流的等待画面|微信小程序1.7.0
waiting-image-hash|string||否|等待画面资源的MD5值|微信小程序1.7.0
zoom|boolean|false|否|调整焦距|微信小程序2.1.0
device-position|string|front|否|前置或后置,值为front, back|微信小程序2.3.0
background-mute|boolean|false|否|进入后台时是否静音|微信小程序1.7.0
remote-mirror|boolean|false|否|设置推流画面是否镜像,产生的效果在 live-player 反应到|微信小程序2.10.0
local-mirror|string|auto|否|控制本地预览画面是否镜像|微信小程序2.10.0
audio-reverb-type|number|0|否|音频混响类型|微信小程序2.10.0
enable-mic|boolean|true|否|开启或关闭麦克风|微信小程序2.10.0
enable-agc|boolean|false|否|是否开启音频自动增益|微信小程序2.10.0
enable-ans|boolean|false|否|是否开启音频噪声抑制|微信小程序2.10.0
audio-volume-type|string|voicecall|否|音量类型|微信小程序2.10.0
@statechange|EventHandle|||状态变化事件,detail = {code}|
@netstatus|EventHandle|||网络状态通知,detail = {info}|
@error|EventHandle|||渲染错误事件,detail = {errMsg, errCode}|
@bgmstart|EventHandle|||背景音开始播放时触发|微信小程序2.4.0
@bgmprogress|EventHandle|||背景音进度变化时触发,detail = {progress, duration}|微信小程序2.4.0
@bgmcomplete|EventHandle|||背景音播放完成时触发|微信小程序2.4.0
orientation 的合法值
......@@ -63,36 +48,6 @@ orientation 的合法值
|horizontal|水平|
local-mirror 的合法值
|值|说明|
|:-|:-|
|auto|前置摄像头镜像,后置摄像头不镜像|
|enable|前后置摄像头均镜像|
|disable|前后置摄像头均不镜像|
audio-reverb-type 的合法值
|值|说明|
|:-|:-|
|0|关闭|
|1|KTV|
|2|小房间|
|3|大会堂|
|4|低沉|
|5|洪亮|
|6|金属声|
|7|磁性|
audio-volume-type 的合法值
|值|说明|
|:-|:-|
|media|媒体音量|
|voicecall|通话音量|
网络状态数据(info)安卓
键名|说明
......@@ -227,5 +182,4 @@ message|string| 具体的网络状态信息
**注意**
* live-pusher 是原生组件,在小程序端层级高于前端组件,需使用cover-view覆盖。在低版本微信中,live-pusher无法内嵌于 scroll-view、swiper、picker-view、movable-view 中。在App端的nvue文件中,live-pusher没有这类限制。
* App平台:使用 `<live-pusher/>` 组件,打包 App 时必须勾选 manifest.json->App 模块权限配置->LivePusher(直播推流) 模块。
......@@ -6,9 +6,9 @@
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快应用|360小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|1.63+|1.9.0+|√|x|x|
|App|H5|
|:-:|:-:|
|√|√|
**属性说明**
......@@ -16,37 +16,36 @@
|:-|:-|:-|:-|:-|
|longitude|Number||中心经度||
|latitude|Number||中心纬度||
|scale|Number|16|缩放级别,取值范围为3-20|高德地图缩放比例与微信小程序不同|
|min-scale|Number|3|最小缩放级别|App-nvue 3.1.0+、微信小程序2.13+|
|max-scale|Number|20|最大缩放级别|App-nvue 3.1.0+、微信小程序2.13+|
|layer-style|Number|1|个性化地图|App-nvue 3.1.0+、微信小程序2.13+|
|scale|Number|16|缩放级别,取值范围为3-20||
|min-scale|Number|3|最小缩放级别|App-nvue 3.1.0+|
|max-scale|Number|20|最大缩放级别|App-nvue 3.1.0+|
|layer-style|Number|1|个性化地图|App-nvue 3.1.0+|
|markers|Array||标记点||
|polyline|Array||路线||
|circles|Array||圆||
|controls|Array||控件||
|include-points|Array||缩放视野以包含所有给定的坐标点|App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序|
|enable-3D|Boolean|false|是否显示3D楼块|App-nvue 2.1.5+、微信小程序2.3.0|
|show-compass|Boolean|false|是否显示指南针|App-nvue 2.1.5+、微信小程序2.3.0|
|enable-zoom|Boolean|true|是否支持缩放|App-nvue 2.1.5+、微信小程序2.3.0|
|enable-scroll|Boolean|true|是否支持拖动|App-nvue 2.1.5+、微信小程序2.3.0|
|enable-rotate|Boolean|false|是否支持旋转|App-nvue 2.1.5+、微信小程序2.3.0|
|enable-overlooking|Boolean|false|是否开启俯视|App-nvue 2.1.5+、微信小程序2.3.0|
|enable-satellite|Boolean|false|是否开启卫星图|App-nvue 2.1.5+、微信小程序2.7.0|
|enable-traffic|Boolean|false|是否开启实时路况|App-nvue 2.1.5+、微信小程序2.7.0|
|include-points|Array||缩放视野以包含所有给定的坐标点|App-nvue 2.1.5+、H5|
|enable-3D|Boolean|false|是否显示3D楼块|App-nvue 2.1.5+|
|show-compass|Boolean|false|是否显示指南针|App-nvue 2.1.5+|
|enable-zoom|Boolean|true|是否支持缩放|App-nvue 2.1.5+|
|enable-scroll|Boolean|true|是否支持拖动|App-nvue 2.1.5+|
|enable-rotate|Boolean|false|是否支持旋转|App-nvue 2.1.5+|
|enable-overlooking|Boolean|false|是否开启俯视|App-nvue 2.1.5+|
|enable-satellite|Boolean|false|是否开启卫星图|App-nvue 2.1.5+|
|enable-traffic|Boolean|false|是否开启实时路况|App-nvue 2.1.5+|
|enable-poi|Boolean|false|是否展示 POI 点|App-nvue 3.1.0+|
|enable-building|Boolean|false|是否展示建筑物|App-nvue 3.1.0+ 支持 (**废除原enable-3D属性 高德地图默认开启建筑物就是3D无法设置**)|
|show-location|Boolean||显示带有方向的当前定位点|微信小程序、H5、百度小程序、支付宝小程序|
|polygons|Array.`<polygon>`||多边形|App-nvue 2.1.5+、微信小程序、百度小程序、支付宝小程序|
|show-location|Boolean||显示带有方向的当前定位点|H5|
|polygons|Array.`<polygon>`||多边形|App-nvue 2.1.5+|
|enable-indoorMap|Boolean|false|是否展示室内地图|App-nvue 3.1.0+|
|@markertap|EventHandle||点击标记点时触发,e.detail = {markerId}|App-nvue 2.3.3+, App平台需要指定 marker 对象属性 id|
|@labeltap|EventHandle||点击label时触发,e.detail = {markerId} |微信小程序2.9.0|
|@callouttap|EventHandle||点击标记点对应的气泡时触发,e.detail = {markerId}||
|@controltap|EventHandle||点击控件时触发,e.detail = {controlId}||
|@regionchange|EventHandle||视野发生变化时触发|微信小程序、H5、百度小程序、支付宝小程序|
|@tap|EventHandle||点击地图时触发; App-nuve、微信小程序2.9支持返回经纬度||
|@updated|EventHandle||在地图渲染更新完成时触发|微信小程序、H5、百度小程序|
|@anchorpointtap|EventHandle||点击定位标时触发,e.detail = {longitude, latitude}|App-nvue 3.1.0+、微信小程序2.13+|
|@poitap|EventHandle||点击地图poi点时触发,e.detail = {name, longitude, latitude}|微信小程序2.3.0+|
|@regionchange|EventHandle||视野发生变化时触发|H5|
|@tap|EventHandle||点击地图时触发; App-nuve||
|@updated|EventHandle||在地图渲染更新完成时触发|H5|
|@anchorpointtap|EventHandle||点击定位标时触发,e.detail = {longitude, latitude}|App-nvue 3.1.0+|
**注意**
......@@ -63,50 +62,48 @@
|id|标记点id|Number|是|marker点击事件回调会返回此id。建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。最大限制9位数||
|latitude|纬度|Number|是|浮点数,范围 -90 ~ 90||
|longitude|经度|Number|是|浮点数,范围 -180 ~ 180||
|title|标注点名|String|否|点击时显示,callout存在时将被忽略|App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序|
|title|标注点名|String|否|点击时显示,callout存在时将被忽略|App-nvue 2.1.5+、H5|
|iconPath|显示的图标|String|是|项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径||
|rotate|旋转角度|Number|否|顺时针旋转的角度,范围 0 ~ 360,默认为 0|App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序|
|alpha|标注的透明度|Number|否|默认1,无透明,范围 0 ~ 1|App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序|
|width|标注图标宽度|Number|否|默认为图片实际宽度|App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序|
|height|标注图标高度|Number|否|默认为图片实际高度|App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序|
|rotate|旋转角度|Number|否|顺时针旋转的角度,范围 0 ~ 360,默认为 0|App-nvue 2.1.5+|
|alpha|标注的透明度|Number|否|默认1,无透明,范围 0 ~ 1|App-nvue 2.1.5+|
|width|标注图标宽度|Number|否|默认为图片实际宽度|App-nvue 2.1.5+、H5|
|height|标注图标高度|Number|否|默认为图片实际高度|App-nvue 2.1.5+、H5|
|callout|自定义标记点上方的气泡窗口|Object|否|支持的属性见下表,可识别换行符。|App-nvue 2.1.5+|
|label|为标记点旁边增加标签|Object|否|支持的属性见下表,可识别换行符。|App-nvue 2.1.5+、微信小程序、H5、App、百度小程序|
|anchor|经纬度在标注图标的锚点,默认底边中点|Object|否|{x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|clusterId|自定义点聚合簇效果时使用|Number|否||App-nvue 3.1.0+、微信小程序|
|customCallout|自定义气泡窗口|Object|否||app暂时不支持、微信小程序|
|aria-label|无障碍访问,(属性)元素的额外描述|String|否||App-nvue 3.1.0+、微信小程序|
|label|为标记点旁边增加标签|Object|否|支持的属性见下表,可识别换行符。|App-nvue 2.1.5+、H5、App|
|anchor|经纬度在标注图标的锚点,默认底边中点|Object|否|{x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点|App-nvue 2.1.5+、H5|
|clusterId|自定义点聚合簇效果时使用|Number|否||App-nvue 3.1.0+|
|customCallout|自定义气泡窗口|Object|否||app暂时不支持|
|aria-label|无障碍访问,(属性)元素的额外描述|String|否||App-nvue 3.1.0+|
**marker 上的气泡 callout**
|属性|说明|类型|平台差异说明|
|:-|:-|:-|:-|
|content|文本|String||
|color|文本颜色|String|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|fontSize|文字大小|Number|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|borderRadius|callout边框圆角|Number|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|bgColor|背景色|String|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|padding|文本边缘留白|Number|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|display|'BYCLICK':点击显示; 'ALWAYS':常显|String|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|textAlign|文本对齐方式。有效值: left, right, center|String|App-nvue 2.1.5+、微信小程序、百度小程序|
|color|文本颜色|String|App-nvue 2.1.5+、H5|
|fontSize|文字大小|Number|App-nvue 2.1.5+、H5|
|borderRadius|callout边框圆角|Number|App-nvue 2.1.5+、H5|
|bgColor|背景色|String|App-nvue 2.1.5+、H5|
|padding|文本边缘留白|Number|App-nvue 2.1.5+、H5|
|display|'BYCLICK':点击显示; 'ALWAYS':常显|String|App-nvue 2.1.5+、H5|
|textAlign|文本对齐方式。有效值: left, right, center|String|App-nvue 2.1.5+|
**marker 上的标签 label**
|属性|说明|类型|平台差异说明|
|:-|:-|:-|:-|
|content|文本|String||
|color|文本颜色|String|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|fontSize|文字大小|Number|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|x|label的坐标,原点是 marker 对应的经纬度|Number|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|y|label的坐标,原点是 marker 对应的经纬度|Number|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|borderWidth|边框宽度|Number|微信小程序、百度小程序|
|borderColor|边框颜色|String|微信小程序、百度小程序|
|borderRadius|边框圆角|Number|App-nvue 2.1.5+、微信小程序、百度小程序|
|bgColor|背景色|String|App-nvue 2.1.5+、微信小程序、百度小程序|
|padding|文本边缘留白|Number|App-nvue 2.1.5+、微信小程序、百度小程序|
|textAlign|文本对齐方式。有效值: left, right, center|String|App-nvue 2.1.5+、微信小程序、百度小程序|
|clusterId|自定义点聚合簇效果时使用|Number|App-nvue 3.1.0+、微信小程序|
|customCallout|自定义气泡窗口|Object|App暂时不支持、微信小程序|
|aria-label|无障碍访问,(属性)元素的额外描述|String|App-nvue 3.1.0+、微信小程序|
|color|文本颜色|String|App-nvue 2.1.5+、H5|
|fontSize|文字大小|Number|App-nvue 2.1.5+、H5|
|x|label的坐标,原点是 marker 对应的经纬度|Number|App-nvue 2.1.5+、H5|
|y|label的坐标,原点是 marker 对应的经纬度|Number|App-nvue 2.1.5+、H5|
|borderRadius|边框圆角|Number|App-nvue 2.1.5+|
|bgColor|背景色|String|App-nvue 2.1.5+|
|padding|文本边缘留白|Number|App-nvue 2.1.5+|
|textAlign|文本对齐方式。有效值: left, right, center|String|App-nvue 2.1.5+|
|clusterId|自定义点聚合簇效果时使用|Number|App-nvue 3.1.0+|
|customCallout|自定义气泡窗口|Object|App暂时不支持|
|aria-label|无障碍访问,(属性)元素的额外描述|String|App-nvue 3.1.0+|
**polyline**
......@@ -117,13 +114,13 @@
|points|经纬度数组|Array|是|[{latitude: 0, longitude: 0}]||
|color|线的颜色|String|否|8位十六进制表示,后两位表示alpha值,如:#0000AA||
|width|线的宽度|Number|否|||
|dottedLine|是否虚线|Boolean|否|默认false|App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序|
|arrowLine|带箭头的线|Boolean|否|默认false,微信小程序开发者工具暂不支持该属性|App-nvue 2.1.5+、微信小程序、百度小程序|
|arrowIconPath|更换箭头图标|String|否|在arrowLine为true时生效|App-nvue 2.1.5+、微信小程序、百度小程序|
|borderColor|线的边框颜色|String|否||微信小程序、H5、百度小程序|
|borderWidth|线的厚度|Number|否||微信小程序、H5、百度小程序|
|colorList|彩虹线|Array|false|存在时忽略 color 值|App-nvue 3.1.0+、微信小程序|
|level|压盖关系,默认为 abovelabels|String|false||App不支持(**需SDK提供支持**、微信小程序|
|dottedLine|是否虚线|Boolean|否|默认false|App-nvue 2.1.5+、H5|
|arrowLine|带箭头的线|Boolean|否|默认false|App-nvue 2.1.5+|
|arrowIconPath|更换箭头图标|String|否|在arrowLine为true时生效|App-nvue 2.1.5+|
|borderColor|线的边框颜色|String|否||H5|
|borderWidth|线的厚度|Number|否||H5|
|colorList|彩虹线|Array|false|存在时忽略 color 值|App-nvue 3.1.0+|
|level|压盖关系,默认为 abovelabels|String|false||App不支持(**需SDK提供支持**)|
**polygon**<br>
指定一系列坐标点,根据 points 坐标数据生成闭合多边形
......@@ -135,7 +132,7 @@
|strokeColor|描边的颜色|String|否|十六进制|
|fillColor|填充颜色|String|否|十六进制|
|zIndex|设置多边形 Z 轴数值|Number|否||
|level|压盖关系,默认为 abovelabels|String|false|App不支持(**需SDK提供支持**、微信小程序|
|level|压盖关系,默认为 abovelabels|String|false|App不支持(**需SDK提供支持**)|
**circles**
......@@ -149,7 +146,7 @@
|fillColor|填充颜色|String|否|8位十六进制表示,后两位表示alpha值,如:#0000AA|
|radius|半径|Number|是||
|strokeWidth|描边的宽度|Number|否|&nbsp;|
|level|压盖关系,默认为 abovelabels|String|false|App不支持(**需SDK提供支持**、微信小程序|
|level|压盖关系,默认为 abovelabels|String|false|App不支持(**需SDK提供支持**)|
**controls**
......@@ -218,13 +215,13 @@ nvue map 更换箭头图标格式参考: [https://ask.dcloud.net.cn/article/3790
**注意事项**
- 小程序和app-vue中,`<map>` 组件是由引擎创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。在`<map>`上绘制内容,可使用组件自带的marker、controls等属性,也可以使用`<cover-view>`组件。App端还可以使用plus.nativeObj.view 或 subNVue 绘制原生内容,[参考](/component/native-component)。另外App端nvue文件不存在层级问题。从微信基础库2.8.3开始,支持map组件的同层渲染,不再有层级问题。
- App端nvue文件的map和小程序拉齐度更高。vue里的map则与plus.map功能一致,和小程序的地图略有差异**App端使用map推荐使用nvue。**
- app-vue中,`<map>` 组件是由引擎创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。在`<map>`上绘制内容,可使用组件自带的marker、controls等属性,也可以使用`<cover-view>`组件。App端还可以使用plus.nativeObj.view 或 subNVue 绘制原生内容,[参考](/component/native-component)。另外App端nvue文件不存在层级问题。
- vue里的map则与plus.map功能一致**App端使用map推荐使用nvue。**
- App端使用到本地图像的话,打包前需要设置资源为释放模式,在manifest文件内app-plus新增runmode节点,设置值为liberate。
- 在涉及层级问题的小程序中和app-vue中,请勿在 scroll-view、swiper、picker-view、movable-view 中使用 `<map>` 组件。
- 小程序和 app-vue 中,css 动画对 `<map>` 组件无效。
- 在涉及层级问题的app-vue中,请勿在 scroll-view、swiper、picker-view、movable-view 中使用 `<map>` 组件。
- app-vue 中,css 动画对 `<map>` 组件无效。
- map 组件使用的经纬度是国测局坐标,调用 uni.getLocation 接口需要指定 type 为 gcj02。
- `<map>` 组件在不同平台的底层引擎是不同的:H5、微信小程序为腾讯地图;App、支付宝小程序为高德地图;百度小程序、快应用为百度地图。app-vue也可以使用百度地图,在manifest中配置,打包后生效,但app-nvue只支持高德地图。另外选择地图、查看地图位置的API也仅支持高德地图。App端如无特殊必要,建议使用高德地图。
- `<map>` 组件在不同平台的底层引擎是不同的:H5为腾讯地图;App为高德地图。app-vue也可以使用百度地图,在manifest中配置,打包后生效,但app-nvue只支持高德地图。另外选择地图、查看地图位置的API也仅支持高德地图。App端如无特殊必要,建议使用高德地图。
- map 组件默认的api是参考微信小程序的,如需要使用plus.map,可以通过`$getAppMap`获取原生地图对象,[详见](https://uniapp.dcloud.io/api/location/map)。注意nvue的map组件不是plus.map对象,无法使用`$getAppMap`
- H5 端获取定位信息,需要部署在 **https** 服务上,本地预览(localhost)仍然可以使用 http 协议。
- 无GPS模块或GPS无信号的 PC 设备使用 Chrome 浏览器的时候,位置信息是连接谷歌服务器获取的,国内用户可能获取位置信息失败。
......
......@@ -8,11 +8,10 @@ media query 匹配检测节点。
**平台兼容性**
|app|微信小程序|支付宝小程序|qq小程序|百度小程序|字节小程序|360小程序|快应用|
|:-|:-|:-|:-|:-|:-|:-|:-|
|2.8.12+,app-vue|基础库 2.11.1+|√|√|√|√|√|×|
|app|
|:-|
|2.8.12+,app-vue|
注意:支付宝小程序、qq小程序、百度小程序、字节小程序,暂不支持监听屏幕动态改变,即只执行一次媒体查询。
**属性说明**
......
......@@ -14,9 +14,9 @@
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快应用|360小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|√|√|√|√|
|App|H5|
|:-:|:-:|
|√|√|
**属性说明**
......@@ -36,29 +36,29 @@
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快应用|360小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|√|√|√|√|
|App|H5|
|:-:|:-:|
|√|√|
**属性说明**
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|direction|String|none|movable-view的移动方向,属性值有all、vertical、horizontal、none||
|inertia|Boolean|false|movable-view是否带有惯性|微信小程序、支付宝小程序、App、H5、百度小程序|
|out-of-bounds|Boolean|false|超过可移动区域后,movable-view是否还可以移动|微信小程序、支付宝小程序、App、H5、百度小程序、快手小程序|
|inertia|Boolean|false|movable-view是否带有惯性|App、H5|
|out-of-bounds|Boolean|false|超过可移动区域后,movable-view是否还可以移动|App、H5|
|x|Number / String||定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画||
|y|Number / String||定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画||
|damping|Number|20|阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快|微信小程序、支付宝小程序、App、H5、百度小程序|
|friction|Number|2|摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值|微信小程序、支付宝小程序、App、H5、百度小程序|
|damping|Number|20|阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快|App、H5|
|friction|Number|2|摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值|App、H5|
|disabled|Boolean|false|是否禁用||
|scale|Boolean|false|是否支持双指缩放,默认缩放手势生效区域是在movable-view内|微信小程序、支付宝小程序、App、H5、快手小程序|
|scale-min|Number|0.5|定义缩放倍数最小值|微信小程序、支付宝小程序、App、H5、快手小程序|
|scale-max|Number|10|定义缩放倍数最大值|微信小程序、支付宝小程序、App、H5、快手小程序|
|scale-value|Number|1|定义缩放倍数,取值范围为 0.5 - 10|微信小程序、支付宝小程序、App、H5、快手小程序|
|animation|Boolean|true|是否使用动画|微信小程序、支付宝小程序、App、H5、百度小程序、快手小程序|
|scale|Boolean|false|是否支持双指缩放,默认缩放手势生效区域是在movable-view内|App、H5|
|scale-min|Number|0.5|定义缩放倍数最小值|App、H5|
|scale-max|Number|10|定义缩放倍数最大值|App、H5|
|scale-value|Number|1|定义缩放倍数,取值范围为 0.5 - 10|App、H5|
|animation|Boolean|true|是否使用动画|App、H5|
|@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},|微信小程序、App、H5、百度小程序、快手小程序|
|@scale|EventHandle||缩放过程中触发的事件,event.detail = {x: x, y: y, scale: scale},|App、H5|
除了基本事件外,movable-view提供了两个特殊事件
......@@ -76,7 +76,7 @@
**Tips**
- movable-view必须在`<movable-area/>`组件中,并且必须是直接子节点,否则不能移动。
- 如果遇到x、y、scale属性设置不生效的问题参考:[组件属性设置不生效解决办法](/vue-api?id=componentsolutions)
- 除了H5端和app-nvue端,其他平台不支持内嵌video、map等原生组件。更新:微信基础库2.4.4起支持了原生组件在 scroll-view、swiper、movable-view 中的使用
- 除了H5端和app-nvue端,其他平台不支持内嵌video、map等原生组件。
**示例**[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/movable-view/movable-view)
......
#### 原生组件说明
小程序和App的vue页面,主体是webview渲染的。为了提升性能,小程序和App的vue页面下部分ui元素,比如导航栏、tabbar、video、map使用了原生控件。这种方式被称为混合渲染。
App的vue页面,主体是webview渲染的。为了提升性能,App的vue页面下部分ui元素,比如导航栏、tabbar、video、map使用了原生控件。这种方式被称为混合渲染。
虽然提升了性能,但原生组件带来了其他问题:
1. 前端组件无法覆盖原生控件的层级问题
......@@ -13,15 +13,11 @@ H5、App的nvue页面,不存在混合渲染的情况,它们或者全部是
``uni-app`` 中原生组件清单如下:
* [map](/component/map)
* [video](/component/video)
* [camera](/component/camera)(仅微信小程序、百度小程序支持)
* [canvas](/component/canvas)(仅在微信小程序、百度小程序表现为原生组件)
* [input](/component/input)(仅在微信小程序、支付宝小程序、字节跳动小程序、QQ小程序中且input置焦时表现为原生组件,其中支付宝小程序的input仅为text且置焦时才表现为原生组件)
* [textarea](/component/textarea)(仅在微信小程序、百度小程序、字节跳动小程序表现为原生组件)
* [live-player](/component/live-player)(仅微信小程序、百度小程序支持,App端直接使用video组件可同时实现拉流)
* [live-pusher](/component/live-pusher)(仅微信小程序、百度小程序、app-nvue支持,app-vue使用plus.video.LivePusher可实现推流)
* [live-player](/component/live-player)(仅App端直接使用video组件可同时实现拉流)
* [live-pusher](/component/live-pusher)(仅app-nvue支持,app-vue使用plus.video.LivePusher可实现推流)
* [cover-view](/component/cover-view)
* [cover-image](/component/cover-view?id=cover-image)
* [ad](/component/ad) (仅app、微信小程序、百度小程序、字节跳动小程序、QQ小程序支持)
#### 混合渲染模式下原生组件的使用限制
......@@ -30,20 +26,19 @@ H5、App的nvue页面,不存在混合渲染的情况,它们或者全部是
* 原生组件的层级是**最高**的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。后插入的原生组件可以覆盖之前的原生组件。
* 原生组件无法在 scroll-view、swiper、picker-view、movable-view 中使用。
* 同层渲染支持:微信基础库2.4.4起支持了video的同层渲染、微信基础库2.8.3支持map的同层渲染。支持同层渲染后,相关组件的时候不再有层级问题,无需再使用cover-view覆盖,也可以内嵌入swiper等组件。app-nvue 不涉及层级问题,自然所有组件都是同层渲染。
* 需要注意的是,微信原生组件的「同层渲染」能力可能会在特定情况下失效,一方面你需要在开发时稍加注意,另一方面同层渲染失败会触发 ``bindrendererror`` 事件,可在必要时根据该回调做好 UI 的回退。
* app-nvue 不涉及层级问题,自然所有组件都是同层渲染。
可在组件中监听同层失败回调 bindrendererror 来判断
* 部分CSS样式无法应用于原生组件,例如:
* 无法对原生组件设置 CSS 动画;
* 无法定义原生组件为 position: fixed;
* 不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域。
* 在小程序端真机上,原生组件会遮挡 vConsole 弹出的调试面板。
#### 其他原生界面元素
除了原生组件外,uni-app在非H5端还有其他原生界面元素,清单如下:
* 原生navigationBar和tabbar(pages.json里配置的)。
* web-view组件虽然不是原生的,但这个组件相当于一个原生webview覆盖在页面上,并且小程序上web-view组件是强制全屏的,无法在上面覆盖前端元素
* web-view组件虽然不是原生的,但这个组件相当于一个原生webview覆盖在页面上
* 弹出框:picker、showModal、showToast、showLoading、showActionSheet、previewImage、chooseImage、chooseVideo等弹出元素也无法被前端组件覆盖
* plus下的plus.nativeObj.view、plus.video.LivePusher、plus.nativeUI、plus.webview,层级均高于前端元素
......@@ -59,9 +54,8 @@ H5、App的nvue页面,不存在混合渲染的情况,它们或者全部是
`cover-view`只能覆盖原生组件,不能覆盖其他原生界面元素。比如cover-view可以覆盖video、map,但无法覆盖原生导航栏、tabbar、web-view。
微信小程序在基础库 2.4.0 起已支持 video 组件的同层渲染,2.7.0 起支持 map 组件的同层渲染。可以被前端元素通过调节zindex来遮挡,也支持在scroll-view等组件中内嵌这2个原生组件。但video全屏时,仍需要cover-view覆盖。
app-vue的`cover-view`相比小程序端还有一些限制,1) 无法嵌套、 2) 无法内部滚动,即cover-view无法内部出现滚动条、 3) 无法覆盖到视频的全屏界面。
app-vue的`cover-view`还有一些限制,1) 无法嵌套、 2) 无法内部滚动,即cover-view无法内部出现滚动条、 3) 无法覆盖到视频的全屏界面。
app-nvue的`cover-view`无这些限制。
另外cover-view无论如何都无法解决原生导航栏、tabbar、web-view组件的覆盖,为此App端补充了2个层级覆盖方案plus.nativeObj.view和subNVue
......@@ -107,8 +101,6 @@ nvue页面全部都是原生组件,互相之间没有层级问题。
对于webview字体不会跟随rom变的情况,如果原生渲染和webview渲染出现在同一页面,就会发现字体不一致。
部分小程序通过修改了自带的webview内核,实现了webview也可以使用rom主题字体,比如微信、qq、支付宝。
app-nvue因为是原生渲染,没有字体不一致的问题。而app-vue下,在某些rom下,webview字体与系统字体不一致。
app端遇到字体不一致,有2种方案:
......
......@@ -4,9 +4,9 @@
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√ 2.6.3+|2.6.3+|√ 2.9.0+|√|√|√|√|x|
|App|H5|
|:-:|:-:|
|√ 2.6.3+|2.6.3+|
从HBuilderX 2.9.3起,编译到所有平台均支持`navigation-bar`,但编译到微信时,受微信基础库版本限制;编译到其他平台不受平台版本限制。
......@@ -25,11 +25,7 @@
|background-image|string||否|支持以下类型: 背景图片路径 - 如"./img/t.png",仅支持本地文件路径, 相对路径,相对于当前页面的host位置,根据实际标题栏宽高拉伸绘制; 渐变色 - 仅支持线性渐变,两种颜色的渐变,如“linear-gradient(to top, #a80077, #66ff00)”, 其中第一个参数为渐变方向,可取值: "to right"表示从左向右渐变, “to left"表示从右向左渐变, “to bottom"表示从上到下渐变, “to top"表示从下到上渐变, “to bottom right"表示从左上角到右下角, “to top left"表示从右下角到左上角|App 2.6.7+|
|background-repeat|string||否|仅在backgroundImage设置为图片路径时有效。 可取值: "repeat" - 背景图片在垂直方向和水平方向平铺; "repeat-x" - 背景图片在水平方向平铺,垂直方向拉伸; “repeat-y” - 背景图片在垂直方向平铺,水平方向拉伸; “no-repeat” - 背景图片在垂直方向和水平方向都拉伸。 默认使用 “no-repeat"|App 2.6.7+|
|blur-effect|string|"none"|否|此效果将会高斯模糊显示标题栏后的内容,仅在type为"transparent"或"float"时有效。 可取值: "dark" - 暗风格模糊,对应iOS原生UIBlurEffectStyleDark效果; "extralight" - 高亮风格模糊,对应iOS原生UIBlurEffectStyleExtraLight效果; "light" - 亮风格模糊,对应iOS原生UIBlurEffectStyleLight效果; "none" - 无模糊效果。 注意:使用模糊效果时应避免设置背景颜色,设置背景颜色可能覆盖模糊效果。|App 2.6.7+|
|loading|string|false|否|是否在导航条显示 loading 加载提示|微信基础库 2.9.0|
|front-color|string||否|导航条前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000|微信基础库 2.9.0|
|background-color|string||否|导航条背景颜色值,有效值为十六进制颜色|微信基础库 2.9.0|
|color-animation-duration|number|0|否|改变导航栏颜色时的动画时长,默认为 0 (即没有动画效果)|微信基础库 2.9.0|
|color-animation-timing-func|string|"linear"|否|改变导航栏颜色时的动画方式,支持 linear 、 easeIn 、 easeOut 和 easeInOut|微信基础库 2.9.0|
属性说明 [/collocation/pages?id=app-titlenview](/collocation/pages?id=app-titlenview)
......
......@@ -16,10 +16,9 @@
|animation-type|String|pop-in/out|当 open-type 为 navigate、navigateBack 时有效,窗口的显示/关闭动画效果,详见:[窗口动画](api/router?id=animation)|App|
|animation-duration|Number|300|当 open-type 为 navigate、navigateBack 时有效,窗口显示/关闭动画的持续时间。|App|
|hover-class|String|navigator-hover|指定点击时的样式类,当hover-class="none"时,没有点击态效果||
|hover-stop-propagation|Boolean|false|指定是否阻止本节点的祖先节点出现点击态|微信小程序|
|hover-start-time|Number|50|按住后多久出现点击态,单位毫秒||
|hover-stay-time|Number|600|手指松开后点击态保留时间,单位毫秒|&nbsp;|
|target|String|self|在哪个小程序目标上发生跳转,默认当前小程序,值域self/miniProgram|微信2.0.7+、百度2.5.2+、QQ|
**open-type 有效值**
......@@ -28,9 +27,8 @@
|navigate|对应 uni.navigateTo 的功能||
|redirect|对应 uni.redirectTo 的功能||
|switchTab|对应 uni.switchTab 的功能||
|reLaunch|对应 uni.reLaunch 的功能|字节跳动小程序不支持|
|reLaunch|对应 uni.reLaunch 的功能||
|navigateBack|对应 uni.navigateBack 的功能||
|exit|退出小程序,target="miniProgram"时生效|微信2.1.0+、百度2.5.2+、QQ1.4.7+|
**注意**
......
......@@ -2,7 +2,7 @@
页面属性配置节点,用于指定页面的一些属性、监听页面事件。可部分替代pages.json的功能。
从微信基础库2.9.0开始,新增了`page-meta`组件,它是一个特殊的标签,有点类似html里的header标签。页面的背景色、原生导航栏的参数,都可以写在`page-meta`里。HBuilderX 2.6.3+ 支持了这个组件,并且全平台都实现了。
它是一个特殊的标签,有点类似html里的header标签。页面的背景色、原生导航栏的参数,都可以写在`page-meta`里。HBuilderX 2.6.3+ 支持了这个组件,并且全平台都实现了。
从某种意义讲,`page-meta`对pages.json有一定替代作用,可以让页面的配置和页面内容代码写在一个vue文件中。它还可以实现通过变量绑定来控制页面配置。但它的性能不如pages.json的配置,在新页面加载时,渲染速度还是pages.json方式的写法更快。
......@@ -10,28 +10,19 @@
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√ 2.6.3+|2.6.3+|√ 2.9.0+|√|√|√|√|x|
|App|H5|
|:-:|:-:|
|√ 2.6.3+|2.6.3+|
从HBuilderX 2.6.3起,编译到所有平台均支持`page-meta`,但编译到微信时,受微信基础库版本限制;编译到其他平台不受平台版本限制
从HBuilderX 2.6.3起,编译到所有平台均支持`page-meta`
**属性说明**
|属性|类型|默认值|必填|说明|版本要求
|:-|:-|:-|:-|:-|:-|
|background-text-style|string||否|下拉背景字体、loading 图的样式,仅支持 dark 和 light|微信基础库 2.9.0|
|background-color|string||否|窗口的背景色,必须为十六进制颜色值|微信基础库 2.9.0|
|background-color-top|string||否|顶部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持|微信基础库 2.9.0|
|background-color-bottom|string||否|底部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持|微信基础库 2.9.0|
|scroll-top|string|""|否|滚动位置,可以使用 px 或者 rpx 为单位,在被设置时,页面会滚动到对应位置|微信基础库 2.9.0|
|scroll-duration|number|300|否|滚动动画时长|微信基础库 2.9.0|
|page-style|string|""|否|页面根节点样式,页面根节点是所有页面节点的祖先节点,相当于 HTML 中的 body 节点|微信基础库 2.9.0、H5 2.6.7、App 2.6.7|
|root-font-size|string|""|否|页面的根字体大小,页面中的所有 rem 单位,将使用这个字体大小作为参考值,即 1rem 等于这个字体大小|微信基础库 2.9.0、H5 2.6.7、App 2.6.7|
|page-style|string|""|否|页面根节点样式,页面根节点是所有页面节点的祖先节点,相当于 HTML 中的 body 节点|H5 2.6.7、App 2.6.7|
|root-font-size|string|""|否|页面的根字体大小,页面中的所有 rem 单位,将使用这个字体大小作为参考值,即 1rem 等于这个字体大小|H5 2.6.7、App 2.6.7|
|enable-pull-down-refresh|Boolean|""|否|是否开启下拉刷新|App 2.6.7|
|@resize|eventhandle||否|页面尺寸变化时会触发 resize 事件, event.detail = { size: { windowWidth, windowHeight } }|微信基础库 2.9.0|
|@scroll|eventhandle||否|页面滚动时会触发 scroll 事件, event.detail = { scrollTop }|微信基础库 2.9.0|
|@scrolldone|eventhandle||否|如果通过改变 scroll-top 属性来使页面滚动,页面滚动结束后会触发 scrolldone 事件|微信基础库 2.9.0|
**注意**
......@@ -44,11 +35,6 @@
```
<template>
<page-meta
:background-text-style="bgTextStyle"
:background-color="bgColor"
:background-color-top="bgColorTop"
:background-color-bottom="bgColorBottom"
:scroll-top="scrollTop"
page-style="color: green"
root-font-size="16px"
>
......@@ -67,11 +53,6 @@
export default {
data() {
return {
bgTextStyle: 'dark',
scrollTop: '200rpx',
bgColor: '#ff0000',
bgColorTop: '#00ff00',
bgColorBottom: '#0000ff',
nbTitle: '标题',
nbLoading: false,
nbFrontColor: '#000000',
......
......@@ -10,12 +10,11 @@
|:-|:-|:-|:-|
|value|Array<Number>|数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。||
|indicator-style|String|设置选择器中间选中框的样式||
|indicator-class|String|设置选择器中间选中框的类名,注意页面或组件的style中写了scoped时,需要在类名前写/deep/|app-nvue和字节跳动小程序不支持|
|indicator-class|String|设置选择器中间选中框的类名,注意页面或组件的style中写了scoped时,需要在类名前写/deep/|app-nvue不支持|
|mask-style|String|设置蒙层的样式||
|mask-class|String|设置蒙层的类名|app-nvue和字节跳动小程序不支持|
|mask-class|String|设置蒙层的类名|app-nvue不支持|
|@change|EventHandle|当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始)|&nbsp;|
|@pickstart|eventhandle||当滚动选择开始时候触发事件|微信小程序2.3.1、快手小程序|
|@pickend|eventhandle||当滚动选择结束时候触发事件|微信小程序2.3.1、快手小程序|
**注意:**其中只可放置 `<picker-view-column/>` 组件,其他节点不会显示。
......@@ -111,7 +110,6 @@
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/433a97b0-4f30-11eb-b680-7980c8a877b8.png)
**Tips**
- 微信小程序端,滚动时在iOS自带振动反馈,可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭
- 在2.6.3版本以前,如果需要在PC端使用`picker-view`,需配置[H5模版](https://uniapp.dcloud.io/collocation/manifest?id=h5-template),并引入[touch-emulator.js](https://github.com/dcloudio/touchemulator)
**扩展**
......
......@@ -15,10 +15,10 @@
|value|Number|0|value 的值表示选择了 range 中的第几个(下标从 0 开始)||
|selector-type|String|auto|大屏时UI类型,支持 picker、select、auto,默认在 iPad 以 picker 样式展示而在 PC 以 select 样式展示|H5 2.9.9+|
|@change|EventHandle||value 改变时触发 change 事件,event.detail = {value: value}||
|disabled|Boolean|false|是否禁用|快手小程序不支持|
|@cancel|EventHandle||取消选择或点遮罩层收起 picker 时触发|快手小程序不支持|
|disabled|Boolean|false|是否禁用||
|@cancel|EventHandle||取消选择或点遮罩层收起 picker 时触发||
- picker在各平台的实现是有UI差异的,有的平台如百度、支付宝小程序的Android端是从中间弹出的;有的平台支持循环滚动如百度小程序;有的平台没有取消按钮如App-iOS端。但均不影响功能使用。
- picker在各平台的实现是有UI差异的,有的平台没有取消按钮如App-iOS端。但均不影响功能使用。
#### 多列选择器
......@@ -26,11 +26,10 @@
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|vue支持,nvue自2.4起支持|√|√|x|√|√|√|√|
|App|H5|
|:-:|:-:|
|vue支持,nvue自2.4起支持|√|
支付宝小程序 picker 组件不支持多列选择,可以使用 picker-view 组件替代。
**属性说明**
......@@ -41,12 +40,12 @@
|value|Array|[]|value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始)|
|@change|EventHandle||value 改变时触发 change 事件,event.detail = {value: value}|
|@columnchange|EventHandle||某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标|
|@cancel|EventHandle||取消选择时触发(快手小程序不支持)|
|disabled|Boolean|false|是否禁用(快手小程序不支持)|
|@cancel|EventHandle||取消选择时触发|
|disabled|Boolean|false|是否禁用|
**bug & tips**
- 由于 JavaScript 的限制 vue 不能观测如下方式设置 value:``this.value[0] = 0``[vue 注意事项](https://cn.vuejs.org/v2/guide/list.html#注意事项)),解决方式参考:[hello-uniapp 示例](https://github.com/dcloudio/hello-uniapp/commit/59264474172a591c865431d02a2a1e3583978827)
- 微信开发工具的pc模拟器有可能出现拖动数据错乱,使用真机正常
#### 时间选择器
......@@ -54,9 +53,9 @@
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|x|
|App|H5|
|:-:|:-:|
|√|√|
- 时间选择在App端调用的是os的原生时间选择控件,在不同平台有不同的ui表现
......@@ -77,9 +76,9 @@
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|x|
|App|H5|
|:-:|:-:|
|√|√|
日期选择默认在App端和H5端(PC版Chrome以及PC版FireFox)调用的是os的原生日期选择控件,在不同平台有不同的ui表现,当配置fields参数后使用统一的展示方式。
......@@ -90,7 +89,7 @@
|value|String|0|表示选中的日期,格式为"YYYY-MM-DD"||
|start|String||表示有效日期范围的开始,字符串格式为"YYYY-MM-DD"||
|end|String||表示有效日期范围的结束,字符串格式为"YYYY-MM-DD"||
|fields|String|day|有效值 year、month、day,表示选择器的粒度,默认为 day,App 端未配置此项时使用系统 UI|H5、App 2.6.3+、微信小程序、百度小程序、字节跳动小程序|
|fields|String|day|有效值 year、month、day,表示选择器的粒度,默认为 day,App 端未配置此项时使用系统 UI|H5、App 2.6.3+|
|@change|EventHandle||value 改变时触发 change 事件,event.detail = {value: value}||
|@cancel|EventHandle||取消选择时触发||
|disabled|Boolean|false|是否禁用|&nbsp;|
......@@ -103,25 +102,6 @@
|month|选择器粒度为月份|
|day|选择器粒度为天|
#### 省市区选择器
``mode = region``
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√|√|x|
- 小程序平台在引擎层面内置了省市区数据。但省市区包含大量数据,占用体积,并非所有应用都需要,且很多城市数据有自维护需求,所以在App和H5平台没有在前端内置这些数据。可以基于多列picker或picker-view,自行填充城市数据。插件市场有较多类似插件,[详见](https://ext.dcloud.net.cn/search?q=%E5%9F%8E%E5%B8%82%E9%80%89%E6%8B%A9)。注意基于多列picker方式的地区选择不能运行在支付宝小程序上,只有基于picker-view的可以全端运行。尤其推荐插件[uni-data-picker](https://ext.dcloud.net.cn/plugin?id=3796),自带省市区的联网数据,自带懒加载。
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
|value|Array|[]|表示选中的省市区,默认选中每一列的第一个值|
|custom-item|String||可为每一列的顶部添加一个自定义的项|
|@change|EventHandle||value 改变时触发 change 事件,event.detail = {value: value}|
|@cancel|EventHandle||取消选择时触发(快手小程序不支持)|
|disabled|Boolean|false|是否禁用(快手小程序不支持)|
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/picker/picker)
......
......@@ -3,19 +3,19 @@
**属性说明**
|属性名 |类型 |默认值 |说明 |平台差异说明 |
|:- |:- |:- |:- |:- |
|属性名 |类型 |默认值 |说明 |平台差异说明 |
|:- |:- |:- |:- |:- |
|percent |Float |无 |百分比0~100 | |
|show-info |Boolean |false |在进度条右侧显示百分比 | |
|border-radius|number/string|0|圆角大小|app-nvue、微信基础库2.3.1+、QQ小程序、快手小程序|
|font-size|number/string|16|右侧百分比字体大小|app-nvue、微信基础库2.3.1+、QQ小程序|
|border-radius|number/string|0|圆角大小|app-nvue|
|font-size|number/string|16|右侧百分比字体大小|app-nvue|
|stroke-width |Number |6 |进度条线的宽度,单位px | |
|activeColor |Color |#09BB07(百度为#E6E6E6) |已选择的进度条的颜色 | |
|activeColor |Color |#09BB07(百度为#E6E6E6) |已选择的进度条的颜色 | |
|backgroundColor|Color |#EBEBEB |未选择的进度条的颜色 | |
|active |Boolean |false |进度条从左往右的动画 | |
|active-mode |String |backwards |backwards: 动画从头播;forwards:动画从上次结束点接着播|App、H5、微信小程序、QQ小程序、快手小程序 |
|duration|number|30|进度增加1%所需毫秒数|App-nvue2.6.1+、微信基础库2.8.2+、H5 3.1.11+、快手小程序|
|@activeend |EventHandle| |动画完成事件 |微信小程序 |
|active-mode |String |backwards |backwards: 动画从头播;forwards:动画从上次结束点接着播|App、H5|
|duration|number|30|进度增加1%所需毫秒数|App-nvue2.6.1+、H5 3.1.11+|
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/progress/progress)
......
......@@ -99,7 +99,6 @@ export default {
**注意**
- radio的默认颜色,在不同平台不一样。微信小程序是绿色的,字节跳动小程序为红色,其他平台是蓝色的。更改颜色使用color属性。
- 如需调节radio大小,可通过css的scale方法调节,如缩小到70%`style="transform:scale(0.7)"`
- radio不是checkbox,点击一个已经选中的radio,不会将其取消选中
......
......@@ -6,14 +6,12 @@
|属性名|类型|默认值|说明|平台兼容|
|:-|:-|:-|:-|:-|
|nodes|Array / String|[]|节点列表 / HTML String||
|space|string||显示连续空格|微信基础库2.4.1+[详见](https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html)、QQ小程序、快手小程序[详见](https://mp.kuaishou.com/docs/develop/components/basicComponents/richText.html)|
|selectable|Boolean|false|富文本是否可以长按选中,可用于复制,粘贴等场景|百度小程序(真机)|
**注意**
- app-nvue 平台 nodes 属性只支持使用 Array 类型
- 支付宝小程序 nodes 属性只支持使用 Array 类型。
如果需要支持 HTML String,则需要自己将 HTML String转化为 nodes 数组,可使用 [html-parser](https://github.com/dcloudio/hello-uniapp/blob/master/common/html-parser.js) 转换。
......
......@@ -18,20 +18,18 @@
|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 |开启自定义下拉刷新|app-vue 2.5.12+,微信小程序基础库2.10.1+|
|refresher-threshold |number |45 |设置自定义下拉刷新阈值|app-vue 2.5.12+,微信小程序基础库2.10.1+|
|refresher-default-style|string |"black"|设置自定义下拉刷新默认样式,支持设置 black,white,none,none 表示不使用默认样式|app-vue 2.5.12+,微信小程序基础库2.10.1+|
|refresher-background |string |"#FFF" |设置自定义下拉刷新区域背景颜色|app-vue 2.5.12+,微信小程序基础库2.10.1+|
|refresher-triggered |boolean |false |设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发|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|
|refresher-enabled |Boolean |false |开启自定义下拉刷新|app-vue 2.5.12+|
|refresher-threshold |number |45 |设置自定义下拉刷新阈值|app-vue 2.5.12+|
|refresher-default-style|string |"black"|设置自定义下拉刷新默认样式,支持设置 black,white,none,none 表示不使用默认样式|app-vue 2.5.12+|
|refresher-background |string |"#FFF" |设置自定义下拉刷新区域背景颜色|app-vue 2.5.12+|
|refresher-triggered |boolean |false |设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发|app-vue 2.5.12+|
|@scrolltoupper |EventHandle| |滚动到顶部/左边,会触发 scrolltoupper 事件 | |
|@scrolltolower |EventHandle| |滚动到底部/右边,会触发 scrolltolower 事件 | |
|@scroll |EventHandle| |滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |&nbsp;|
|@refresherpulling |EventHandle| |自定义下拉刷新控件被下拉|app-vue 2.5.12+,微信小程序基础库2.10.1+|
|@refresherrefresh |EventHandle| |自定义下拉刷新被触发|app-vue 2.5.12+,微信小程序基础库2.10.1+|
|@refresherrestore |EventHandle| |自定义下拉刷新被复位|app-vue 2.5.12+,微信小程序基础库2.10.1+|
|@refresherabort |EventHandle| |自定义下拉刷新被中止|app-vue 2.5.12+,微信小程序基础库2.10.1+|
|@refresherpulling |EventHandle| |自定义下拉刷新控件被下拉|app-vue 2.5.12+|
|@refresherrefresh |EventHandle| |自定义下拉刷新被触发|app-vue 2.5.12+|
|@refresherrestore |EventHandle| |自定义下拉刷新被复位|app-vue 2.5.12+|
|@refresherabort |EventHandle| |自定义下拉刷新被中止|app-vue 2.5.12+|
使用竖向滚动时,需要给 ``<scroll-view>`` 一个固定高度,通过 css 设置 height;使用横向滚动时,需要给``<scroll-view>``添加``white-space: nowrap;``样式。
......@@ -166,7 +164,7 @@ export default {
**Tips**
- APP-vue和小程序中,请勿在 scroll-view 中使用 map、video 等原生组件。小程序中 scroll-view 中也不要使用 canvas、textarea 原生组件。更新:微信基础库2.4.4起支持了原生组件在 scroll-view、swiper、movable-view 中的使用。app-nvue无此限制。
- APP-vue中,请勿在 scroll-view 中使用 map、video 等原生组件。app-nvue无此限制。
- scroll-view 不适合放长列表,有性能问题。长列表滚动和下拉刷新,应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。包括在app-nvue页面,长列表应该使用list而不是scroll-view。
- scroll-into-view 的优先级高于 scroll-top。
- scroll-view是区域滚动,不会触发页面滚动,无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
......
......@@ -23,7 +23,6 @@
|selected-color|Color|#1aad19|已选择的颜色(请使用 activeColor)| -->
**Tips**
- activeColor默认值在不同平台不一样,微信是绿色(#1aad19),头条是红色,其他平台是蓝色
- 如需要区间滑块,即一根横条上使用2个滑块选择一段范围,可见[插件市场](https://ext.dcloud.net.cn/search?q=%E5%8C%BA%E9%97%B4%E6%BB%91%E5%9D%97)
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/slider/slider)
......
......@@ -13,27 +13,21 @@
|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 被同时指定|支付宝小程序不支持|
|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|微信小程序、快手小程序|
|previous-margin|String|0px|前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值|app-nvue|
|next-margin|String|0px|后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值|app-nvue|
|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+|
|@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}|字节跳动小程序不支持|
|@transition|EventHandle||swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy},支付宝小程序暂不支持dx, dy|App、H5|
|@animationfinish|EventHandle||动画结束时会触发 animationfinish 事件,event.detail = {current: current, source: source}||
change 事件返回 detail 中包含一个 source 字段,表示导致变更的原因,可能值如下:
......@@ -44,7 +38,7 @@ change 事件返回 detail 中包含一个 source 字段,表示导致变更的
**swiper做左右拖动的长列表的专项问题**
- swiper是单页组件,适合做banner图轮播和简单列表左右滑动。
- 因为性能问题,用swiper做复杂长列表,需要较高的优化技巧以及接受一些限制。
- 这是一个范例,[插件市场新闻模板示例](https://ext.dcloud.net.cn/plugin?id=103),它在App端使用了nvue的原生渲染,实现高性能的左右拖动长列表;并支持可自定义的任何形式的下拉刷新。它在非App端使用的模式是只缓存左右一共3列的数据,dom中的数据过多时,它会自动释放。就是说App上,只要看过这一页,再进去时内容是还在的。而在非App上,只能做到缓存3页数据,其他页即便看过,再进去也会重新加载。并且非App的这种情况下,不再提供下拉刷新。虽然插件市场也有其他前端模拟的下拉刷新,但性能不佳。一般小程序的大厂案例里,提供左右拖长列表的,都是这种做法。
- 这是一个范例,[插件市场新闻模板示例](https://ext.dcloud.net.cn/plugin?id=103),它在App端使用了nvue的原生渲染,实现高性能的左右拖动长列表;并支持可自定义的任何形式的下拉刷新。它在非App端使用的模式是只缓存左右一共3列的数据,dom中的数据过多时,它会自动释放。就是说App上,只要看过这一页,再进去时内容是还在的。而在非App上,只能做到缓存3页数据,其他页即便看过,再进去也会重新加载。并且非App的这种情况下,不再提供下拉刷新。虽然插件市场也有其他前端模拟的下拉刷新,但性能不佳。
**Tips**
......@@ -54,8 +48,8 @@ change 事件返回 detail 中包含一个 source 字段,表示导致变更的
- 如果遇到current、current-item-id属性设置不生效的问题参考:[组件属性设置不生效解决办法](/vue-api?id=_4-组件属性设置不生效解决办法)
- banner图的切换效果和指示器的样式,有多种风格可自定义,可在[uni-app插件市场](https://ext.dcloud.net.cn/search?q=%E8%BD%AE%E6%92%AD)搜索
- 如需banner管理后台,参考uniCloud admin banner插件:[https://ext.dcloud.net.cn/plugin?id=4117](https://ext.dcloud.net.cn/plugin?id=4117)
- swiper在App的vue中、百度支付宝头条QQ小程序中,不支持内嵌video、map等原生组件。在微信基础库2.4.4起和App nvue2.1.5起支持内嵌原生组件。竖向的swiper内嵌视频可实现抖音、映客等视频垂直拖动切换效果。
- 同时监听 change transition,开始滑动时触发transition, 放开手后,在ios平台触发顺序为 transition... change,Android/微信小程序/支付宝为 transition... change transition...
- swiper在App的vue中,不支持内嵌video、map等原生组件。在App nvue2.1.5起支持内嵌原生组件。竖向的swiper内嵌视频可实现抖音、映客等视频垂直拖动切换效果。
- 同时监听 change transition,开始滑动时触发transition, 放开手后,在ios平台触发顺序为 transition... change,Android为 transition... change transition...
#### swiper-item
仅可放置在 ``<swiper>`` 组件中,宽高自动设置为100%。注意:宽高100%是相对于其父组件,不是相对于子组件,不能被子组件自动撑开。
......
......@@ -5,9 +5,9 @@
**属性说明**
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|:-|
|:-|:-|:-|:-|:-|
|checked|Boolean|false|是否选中||
|disabled|Boolean|false|是否禁用|字节跳动小程序不支持|
|disabled|Boolean|false|是否禁用||
|type|String|switch|样式,有效值:switch, checkbox||
|@change|EventHandle||checked 改变时触发 change 事件,event.detail={ value:checked}||
|color|Color||switch 的颜色,同 css 的 color|&nbsp;|
......@@ -62,5 +62,4 @@ export default {
预览H5效果:使用浏览器的手机模式访问[https://hellouniapp.dcloud.net.cn/pages/component/switch/switch](https://hellouniapp.dcloud.net.cn/pages/component/switch/switch)
**注意**
- switch的默认颜色,在不同平台不一样。微信小程序是绿色的,字节跳动小程序为红色,其他平台是蓝色的。更改颜色使用color属性。
- 如需调节switch大小,可通过css的scale方法调节,如缩小到70%`style="transform:scale(0.7)"`
......@@ -6,11 +6,10 @@
**属性说明**
|属性名 |类型 |默认值 |说明 |平台差异说明 |
|:-|:- |:- |:- |:- |:- |
|selectable |Boolean|false |文本是否可选 | App、H5、快手小程序 |
|user-select |Boolean|false |文本是否可选 | 微信小程序 |
|space |String | |显示连续空格 |App、H5、微信小程序 |
|decode |Boolean|false |是否解码 |App、H5、微信小程序 |
|:-|:- |:- |:- |:- |
|selectable |Boolean|false |文本是否可选 | App、H5 |
|space |String | |显示连续空格 |App、H5 |
|decode |Boolean|false |是否解码 |App、H5 |
**space 值说明**
......
......@@ -9,28 +9,23 @@
|value|String||输入框的内容||
|placeholder|String||输入框为空时占位符||
|placeholder-style|String||指定 placeholder 的样式||
|placeholder-class|String|textarea-placeholder|指定 placeholder 的样式类,注意页面或组件的style中写了scoped时,需要在类名前写/deep/|字节跳动小程序、快手小程序不支持|
|placeholder-class|String|textarea-placeholder|指定 placeholder 的样式类,注意页面或组件的style中写了scoped时,需要在类名前写/deep/||
|disabled|Boolean|false|是否禁用||
|maxlength|Number|140|最大输入长度,设置为 -1 的时候不限制最大长度||
|focus|Boolean|false|获取焦点|在 H5 平台能否聚焦以及软键盘是否跟随弹出,取决于当前浏览器本身的实现。nvue 页面不支持,需使用组件的 focus()、blur() 方法控制焦点|
|auto-height|Boolean|false|是否自动增高,设置auto-height时,style.height不生效||
|fixed|Boolean|false|如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true|微信小程序、百度小程序、字节跳动小程序、QQ小程序、快手小程序|
|cursor-spacing|Number|0|指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离|App、微信小程序、百度小程序、字节跳动小程序、QQ小程序|
|cursor|Number||指定focus时的光标位置|微信小程序、App、H5、百度小程序、字节跳动小程序、QQ小程序|
|confirm-type|String|done|设置键盘右下角按钮的文字|微信小程序基础库2.13.0+、App-vue和H5(2.9.9+,且要求设备webview内核Chrome81+、Safari13.7+)|
|show-confirm-bar|Boolean|true|是否显示键盘上方带有”完成“按钮那一栏|微信小程序、百度小程序、QQ小程序|
|selection-start|Number|-1|光标起始位置,自动聚焦时有效,需与selection-end搭配使用|微信小程序、App、H5、百度小程序、字节跳动小程序、QQ小程序|
|selection-end|Number|-1|光标结束位置,自动聚焦时有效,需与selection-start搭配使用|微信小程序、App、H5、百度小程序、字节跳动小程序、QQ小程序|
|adjust-position|Boolean|true|键盘弹起时,是否自动上推页面|App-Android(softinputMode 为 adjustResize 时无效)、微信小程序、百度小程序、QQ小程序|
|disable-default-padding|boolean|false|是否去掉 iOS 下的默认内边距|微信小程序2.10.0|
|hold-keyboard|boolean|false|focus时,点击页面的时候不收起键盘|微信小程序2.8.2|
|cursor-spacing|Number|0|指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离|App|
|cursor|Number||指定focus时的光标位置|App、H5|
|confirm-type|String|done|设置键盘右下角按钮的文字|App-vue和H5(2.9.9+,且要求设备webview内核Chrome81+、Safari13.7+)|
|selection-start|Number|-1|光标起始位置,自动聚焦时有效,需与selection-end搭配使用|App、H5|
|selection-end|Number|-1|光标结束位置,自动聚焦时有效,需与selection-start搭配使用|App、H5|
|adjust-position|Boolean|true|键盘弹起时,是否自动上推页面|App-Android(softinputMode 为 adjustResize 时无效)|
|auto-blur|boolean|false|键盘收起时,是否自动失去焦点|App-vue 3.0.0+ ,App-nvue不支持|
|@focus|EventHandle||输入框聚焦时触发,event.detail = { value, height },height 为键盘高度|仅微信小程序、App(HBuilderX 2.0+ [nvue uni-app模式](http://ask.dcloud.net.cn/article/36074)) 、QQ小程序支持 height|
|@blur|EventHandle||输入框失去焦点时触发,event.detail = {value, cursor}|快手小程序不支持|
|@linechange|EventHandle||输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0}|字节跳动小程序、快手小程序不支持,nvue ios暂不支持|
|@input|EventHandle||当键盘输入时,触发 input 事件,event.detail = {value, cursor}, @input 处理函数的返回值并不会反映到 textarea 上|快手小程序不支持|
|@confirm|EventHandle||点击完成时, 触发 confirm 事件,event.detail = {value: value}|微信小程序、百度小程序、QQ小程序|
|@keyboardheightchange|Eventhandle||键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration}|微信小程序基础库2.7.0+、App 3.1.0+|
|@focus|EventHandle||输入框聚焦时触发,event.detail = { value, height },height 为键盘高度|仅App(HBuilderX 2.0+ [nvue uni-app模式](http://ask.dcloud.net.cn/article/36074)) |
|@blur|EventHandle||输入框失去焦点时触发,event.detail = {value, cursor}||
|@linechange|EventHandle||输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0}|nvue ios暂不支持|
|@input|EventHandle||当键盘输入时,触发 input 事件,event.detail = {value, cursor}, @input 处理函数的返回值并不会反映到 textarea 上||
|@keyboardheightchange|Eventhandle||键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration}|App 3.1.0+|
**confirm-type 有效值**
......@@ -82,8 +77,6 @@ export default {
- textarea 的 blur 事件会晚于页面上的 tap 事件,如果需要在 button 的点击事件获取 textarea,可以使用 form 的 @submit。
- 如果遇到 value 属性设置不生效的问题参考:[组件属性设置不生效解决办法](/vue-api?id=_4-组件属性设置不生效解决办法)
- 微信小程序、百度小程序、字节跳动小程序中,textarea是原生组件,层级高于前端组件,请勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 组件。覆盖textarea需要使用cover-view。[详见](/component/native-component)
- 小程序端 css 动画对 textarea 组件无效。
- H5 平台只能在用户交互时修改 focus 生效。
- 如果遇到 focus 属性设置不生效的问题参考:[组件属性设置不生效解决办法](/vue-api?id=_4-组件属性设置不生效解决办法)
- 软键盘的弹出和收起逻辑,详见[input的文档](/component/input?id=app%E5%B9%B3%E5%8F%B0ios%E7%AB%AF%E8%BD%AF%E9%94%AE%E7%9B%98%E4%B8%8A%E6%96%B9%E6%A8%AA%E6%9D%A1%E5%8E%BB%E9%99%A4%E6%96%B9%E6%A1%88)
......@@ -146,6 +139,6 @@ nvue下键盘右下角按钮点击仅触发换行;如想监听该按钮事件
**富文本编辑的解决方案**
在输入框里图文混排内容,在web上该功能依赖document,而小程序和app的正常页面又没有document。
- 方式一:使用uni-app自带的`editor`组件,该组件支持App、H5、微信小程序,其他家小程序自身未提供这类解决方案
- 方式一:使用uni-app自带的`editor`组件,该组件支持App、H5。
- 方式二:采用markdown编辑器方案,输入区输入markdown语法,预览区提供预览。这种方式可以跨端。插件市场搜[富文本编辑](https://ext.dcloud.net.cn/search?q=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91),有不少插件。
- 方式三:使用web-view组件,加载html页面,此时可使用web中常见的各种富文本编辑器,插件市场也有这类插件。
......@@ -8,48 +8,38 @@
|src|String||要播放视频的资源地址||
|autoplay|Boolean|false|是否自动播放||
|loop|Boolean|false|是否循环播放||
|muted|Boolean|false|是否静音播放|字节跳动小程序不支持|
|initial-time|Number||指定视频初始播放位置,单位为秒(s)。|字节跳动小程序不支持|
|duration|Number||指定视频时长,单位为秒(s)。|字节跳动小程序、快手小程序不支持|
|controls|Boolean|true|是否显示默认播放控件(播放/暂停按钮、播放进度、时间)|快手小程序不支持|
|danmu-list|Object Array||弹幕列表|字节跳动小程序、快手小程序不支持|
|danmu-btn|Boolean|false|是否显示弹幕按钮,只在初始化时有效,不能动态变更|字节跳动小程序、快手小程序不支持|
|enable-danmu|Boolean|false|是否展示弹幕,只在初始化时有效,不能动态变更|字节跳动小程序、快手小程序不支持|
|page-gesture|Boolean|false|在非全屏模式下,是否开启亮度与音量调节手势|微信小程序、H5|
|direction|Number||设置全屏时视频的方向,不指定则根据宽高比自动判断。有效值为 0(正常竖向), 90(屏幕逆时针90度), -90(屏幕顺时针90度)|H5和字节跳动小程序、快手小程序不支持|
|show-progress|Boolean|true|若不设置,宽度大于240时才会显示|字节跳动小程序、快手小程序不支持|
|muted|Boolean|false|是否静音播放||
|initial-time|Number||指定视频初始播放位置,单位为秒(s)。||
|duration|Number||指定视频时长,单位为秒(s)。||
|controls|Boolean|true|是否显示默认播放控件(播放/暂停按钮、播放进度、时间)||
|danmu-list|Object Array||弹幕列表||
|danmu-btn|Boolean|false|是否显示弹幕按钮,只在初始化时有效,不能动态变更||
|enable-danmu|Boolean|false|是否展示弹幕,只在初始化时有效,不能动态变更||
|page-gesture|Boolean|false|在非全屏模式下,是否开启亮度与音量调节手势|H5|
|direction|Number||设置全屏时视频的方向,不指定则根据宽高比自动判断。有效值为 0(正常竖向), 90(屏幕逆时针90度), -90(屏幕顺时针90度)|H5不支持|
|show-progress|Boolean|true|若不设置,宽度大于240时才会显示||
|show-fullscreen-btn|Boolean|true|是否显示全屏按钮||
|show-play-btn|Boolean|true|是否显示视频底部控制栏的播放按钮||
|show-center-play-btn|Boolean|true|是否显示视频中间的播放按钮|字节跳动小程序不支持|
|show-center-play-btn|Boolean|true|是否显示视频中间的播放按钮||
|show-loading|Boolean|true|是否显示loading控件|仅app 2.8.12+|
|enable-progress-gesture|Boolean|true|是否开启控制进度的手势|字节跳动小程序不支持|
|object-fit|String|contain|当视频大小与 video 容器大小不一致时,视频的表现形式。contain:包含,fill:填充,cover:覆盖|微信小程序、字节跳动小程序、H5|
|enable-progress-gesture|Boolean|true|是否开启控制进度的手势||
|object-fit|String|contain|当视频大小与 video 容器大小不一致时,视频的表现形式。contain:包含,fill:填充,cover:覆盖|H5|
|poster|String||视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 poster 无效||
|show-mute-btn|Boolean|false|是否显示静音按钮|微信小程序|
|title|String||视频的标题,全屏时在顶部展示|微信小程序|
|play-btn-position|String|bottom|播放按钮的位置|微信小程序、字节跳动小程序|
|enable-play-gesture|Boolean|false|是否开启播放手势,即双击切换播放/暂停|微信小程序、快手小程序|
|auto-pause-if-navigate|Boolean|true|当跳转到其它小程序页面时,是否自动暂停本页面的视频|微信小程序|
|auto-pause-if-open-native|Boolean|true|当跳转到其它微信原生页面时,是否自动暂停本页面的视频|微信小程序|
|vslide-gesture|Boolean|false|在非全屏模式下,是否开启亮度与音量调节手势(同 page-gesture)|微信小程序、快手小程序|
|vslide-gesture-in-fullscreen|Boolean|true|在全屏模式下,是否开启亮度与音量调节手势|微信小程序、快手小程序|
|ad-unit-id|String||视频前贴广告单元ID,更多详情可参考开放能力[视频前贴广告](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/ad/video-patch-ad.html)|微信小程序|
|poster-for-crawler|String||用于给搜索等场景作为视频封面展示,建议使用无播放 icon 的视频封面图,只支持网络地址|微信小程序|
|codec|String|hardware|解码器选择,hardware:硬解码(硬解码可以增加解码算力,提高视频清晰度。少部分老旧硬件可能存在兼容性问题);software:ffmpeg 软解码;|App-Android 3.1.0+|
|http-cache|Boolean|true|是否对 http、https 视频源开启本地缓存。缓存策略:开启了此开关的视频源,在视频播放时会在本地保存缓存文件,如果本地缓存池已超过100M,在进行缓存前会清空之前的缓存(不适用于m3u8等流媒体协议)|App-Android 3.1.0+|
|play-strategy|Number|0| 播放策略,0:普通模式,适合绝大部分视频播放场景;1:平滑播放模式(降级),增加缓冲区大小,采用open sl解码音频,避免音视频脱轨的问题,可能会降低首屏展现速度、视频帧率,出现开屏音频延迟等。 适用于高码率视频的极端场景;3: M3U8优化模式,增加缓冲区大小,提升视频加载速度和流畅度,可能会降低首屏展现速度。 适用于M3U8在线播放的场景 |App-Android 3.1.0+|
|header|Object||HTTP 请求 Header|App 3.1.19+|
|@play|EventHandle||当开始/继续播放时触发play事件|字节跳动小程序不支持|
|@pause|EventHandle||当暂停播放时触发 pause 事件|字节跳动小程序不支持|
|@ended|EventHandle||当播放到末尾时触发 ended 事件|字节跳动小程序不支持|
|@timeupdate|EventHandle||播放进度变化时触发,event.detail = {currentTime, duration} 。触发频率 250ms 一次|字节跳动小程序不支持|
|@fullscreenchange|EventHandle||当视频进入和退出全屏时触发,event.detail = {fullScreen, direction},direction取为 vertical 或 horizontal|字节跳动小程序不支持|
|@waiting|EventHandle||视频出现缓冲时触发|字节跳动小程序、快手小程序不支持|
|@error|EventHandle||视频播放出错时触发|字节跳动小程序不支持|
|@progress|EventHandle||加载进度变化时触发,只支持一段加载。event.detail = {buffered},百分比|微信小程序、H5|
|@loadedmetadata|EventHandle||视频元数据加载完成时触发。event.detail = {width, height, duration}|微信小程序、H5|
|@play|EventHandle||当开始/继续播放时触发play事件||
|@pause|EventHandle||当暂停播放时触发 pause 事件||
|@ended|EventHandle||当播放到末尾时触发 ended 事件||
|@timeupdate|EventHandle||播放进度变化时触发,event.detail = {currentTime, duration} 。触发频率 250ms 一次||
|@fullscreenchange|EventHandle||当视频进入和退出全屏时触发,event.detail = {fullScreen, direction},direction取为 vertical 或 horizontal||
|@waiting|EventHandle||视频出现缓冲时触发||
|@error|EventHandle||视频播放出错时触发||
|@progress|EventHandle||加载进度变化时触发,只支持一段加载。event.detail = {buffered},百分比|H5|
|@loadedmetadata|EventHandle||视频元数据加载完成时触发。event.detail = {width, height, duration}|H5|
|@fullscreenclick|EventHandle||视频播放全屏播放时点击事件。event.detail = { screenX:"Number类型,点击点相对于屏幕左侧边缘的 X 轴坐标", screenY:"Number类型,点击点相对于屏幕顶部边缘的 Y 轴坐标", screenWidth:"Number类型,屏幕总宽度", screenHeight:"Number类型,屏幕总高度"}|App 2.6.3+|
|@controlstoggle|EventHandle||切换 controls 显示隐藏时触发。event.detail = {show}|微信小程序2.9.5|
`<video>` 默认宽度 300px、高度 225px,可通过 css 设置宽高。
......@@ -72,14 +62,6 @@
|cover|覆盖|
##### play-btn-position 的合法值
|值|说明|
|:-|:-|
|bottom|controls bar上|
|center|视频中间|
**示例** [查看示例](https://hellouniapp.dcloud.net.cn/pages/component/video/video)
```html
......@@ -169,20 +151,18 @@ export default {
- 视频播放格式说明:
* H5平台:支持的视频格式视浏览器而定,一般通用的都支持:mp4、webm 和 ogg。(``<video/>`` 组件编译到 H5 时会替换为标准 html 的 video 标签)。H5端也可以自行在条件编译里使用video.js等三方库,这些库可以自动判断环境兼容以决定使用标准video或flash来播放。
* 小程序平台:各小程序平台支持程度不同,详见各家文档:[微信小程序视频组件文档](https://developers.weixin.qq.com/miniprogram/dev/component/video.html)[支付宝小程序video组件](https://docs.alipay.com/mini/component/video)[百度小程序视频组件文档](https://smartprogram.baidu.com/docs/develop/component/media/#video/)[字节跳动小程序视频组件文档](https://developer.toutiao.com/dev/cn/mini-app/develop/component/media-component/video)[QQ小程序视频组件文档](https://q.qq.com/wiki/develop/miniprogram/component/media/camera.html)[华为快应用视频组件文档](https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/webview-component-video)
* App平台: 支持本地视频(mp4/flv)、网络视频地址(mp4/flv/m3u8)及流媒体(rtmp/hls/rtsp)。
- video**全屏**后,如何自行绘制界面?比如加个标题、加个分享按钮
* 微信基础库 2.4.0 以上可通过cover-view来绘制界面覆盖元素
* app端 2.1.5 以上nvue页面的video也可以通过cover-view来绘制界面覆盖元素
* H5端可通过通用h5做法实现
* 其他端无法全屏后自行绘制内容
- 如何实现抖音、映客等全屏视频垂直滑动切换效果?
* 微信基础库 2.4.0 和 app端nvue 2.1.5 以上,可通过在垂直的swiper中内嵌video来实现。原生导航栏设置为custom,视频长宽设为手机屏幕大小,通过cover-view覆盖视频内容。插件市场有相关[示例](https://ext.dcloud.net.cn/search?q=%E6%8A%96%E9%9F%B3)
* app端nvue 2.1.5 以上,可通过在垂直的swiper中内嵌video来实现。原生导航栏设置为custom,视频长宽设为手机屏幕大小,通过cover-view覆盖视频内容。插件市场有相关[示例](https://ext.dcloud.net.cn/search?q=%E6%8A%96%E9%9F%B3)
- `<video/>` 组件在非H5端是原生组件,层级高于普通前端组件,覆盖其需要使用[cover-view](https://uniapp.dcloud.io/component/cover-view?id=cover-view)组件或plus.nativeObj.view、subNVue。微信基础库 2.4.0+和字节跳动小程序 已支持 video 组件的同层渲染,也就是video在非全屏时,可以被前端元素通过调节z-index来遮挡,但video全屏时,仍需要cover-view覆盖。
-微信基础库 2.4.0+ 和 字节跳动小程序 和 app-nvue 2.1.5+,其他情况下非H5的video不能放入scroll-view和swiper。注意参考 [原生组件使用限制](/component/native-component)
- `<video/>` 组件在非H5端是原生组件,层级高于普通前端组件,覆盖其需要使用[cover-view](https://uniapp.dcloud.io/component/cover-view?id=cover-view)组件或plus.nativeObj.view、subNVue。
- 除 app-nvue 2.1.5+,其他情况下非H5的video不能放入scroll-view和swiper。注意参考 [原生组件使用限制](/component/native-component)
- 你也可以尝试换个设计思路,如:列表中的视频组件是通过图片与icon模拟的,点击后播放全屏播放视频的方案。详情[【video组件会覆盖页面其他非原生组件的设计替代方案示例】](https://ext.dcloud.net.cn/plugin?id=3549)
- App平台:使用 `<video/>` 组件,打包 App 时必须勾选 manifest.json->App 模块权限配置->VideoPlayer 模块。此模块体积较大,非默认内置。
......
......@@ -11,7 +11,7 @@
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
|hover-class|String|none|指定按下去的样式类。当 hover-class="none" 时,没有点击态效果|
|hover-stop-propagation|Boolean|false|指定是否阻止本节点的祖先节点出现点击态,App、H5、支付宝小程序、百度小程序不支持(支付宝小程序、百度小程序文档中都有此属性,实测未支持)|
|hover-stop-propagation|Boolean|false|指定是否阻止本节点的祖先节点出现点击态,App、H5|
|hover-start-time|Number|50|按住后多久出现点击态,单位毫秒|
|hover-stay-time|Number|400|手指松开后点击态保留时间,单位毫秒|
......
......@@ -2,16 +2,11 @@
渲染一个“元组件”为动态组件。依 `is` 的值,来决定哪个组件被渲染。[详见](https://cn.vuejs.org/v2/api/#component)
**平台差异说明**
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |字节跳动小程序 |QQ小程序 |快应用 |360小程序 |快手小程序|
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|√ |√ |x |x |x |x |x |x |x |x |
|App|H5 |
|:-:|:-:|
|√ |√ |
### template
......@@ -25,14 +20,12 @@
**平台差异说明**
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |字节跳动小程序 |QQ小程序 |快应用 |360小程序 |快手小程序|
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|√ |√ |√ |√ |√ |√ |√ |√ |√ |√ |
|App|H5 |
|:-:|:-:|
|√ |√ |
**代码示例**
```html
<template>
<view>
......@@ -76,11 +69,9 @@
**平台差异说明**
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |字节跳动小程序 |QQ小程序 |快应用 |360小程序 |快手小程序|
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|x |√ |x |x |x |x |x |x |x |x |
|App|H5 |
|:-:|:-:|
|x |√ |
### transition-group
......@@ -91,11 +82,9 @@
**平台差异说明**
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |字节跳动小程序 |QQ小程序 |快应用 |360小程序 |快手小程序|
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|x |√ |x |x |x |x |x |x |x |x |
|App|H5 |
|:-:|:-:|
|x |√ |
### keep-alive
......@@ -105,9 +94,9 @@
**平台差异说明**
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |字节跳动小程序 |QQ小程序 |快应用 |360小程序 |快手小程序|
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|x |√ |x |x |x |x |x |x |x |x |
|App|H5 |
|:-:|:-:|
|x |√ |
......@@ -120,7 +109,7 @@
**平台差异说明**
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |字节跳动小程序 |QQ小程序 |快应用 |360小程序 |快手小程序|
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|√ |√ |√ |√ |√ |√ |√ |√ |√ |√ |
|App|H5 |
|:-:|:-:|
|√ |√ |
......@@ -4,7 +4,7 @@ app端nvue专用组件。
`<waterfall>` 组件是提供瀑布流布局的核心组件。瀑布流,又称瀑布流式布局是比较流行的一种页面布局,视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动,这种布局还可以不断加载数据块并附加至当前尾部。
在nvue中,使用普通view做瀑布流,无法实现重用和不可见渲染资源释放。使用<waterfall>组件,指定cell后,原生引擎会自动优化性能。
在nvue中,使用普通view做瀑布流,无法实现重用和不可见渲染资源释放。使用waterfall组件,指定cell后,原生引擎会自动优化性能。
```
<template>
......
......@@ -17,10 +17,10 @@
**src**
|来源|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快应用|360小程序|快手小程序|
|:-|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|网络|√|√|√|√|√|√|√|√|√|√|
|本地|√|√|x|x|x|x|x|x|x|x|
|来源|App|H5|
|:-|:-:|:-:|
|网络|√|√|
|本地|√|√|
**webview-styles**
......@@ -61,9 +61,8 @@
```
注意:
- 小程序仅支持加载网络网页,不支持本地html
- 补充说明:app-vue下web-view组件不支持自定义样式,而v-show的本质是改变组件的样式。即组件支持v-if而不是支持v-show。
- 小程序端 web-view 组件一定有原生导航栏,下面一定是全屏的 web-view 组件,navigationStyle: custom 对 web-view 组件无效。
- App 端使用 `自定义组件模式` 时,uni.web-view.js 的最低版为 [uni.webview.1.5.2.js](https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js)
- App 平台同时支持网络网页和本地网页,但本地网页及相关资源(js、css等文件)必须放在 `uni-app 项目根目录->hybrid->html` 文件夹下或者 `static` 目录下,如下为一个加载本地网页的`uni-app`项目文件目录示例:
- nvue `web-view` 必须指定样式宽高
......@@ -111,8 +110,8 @@
|uni.reLaunch|[reLaunch](/api/router?id=relaunch)||
|uni.switchTab|[switchTab](/api/router?id=switchtab)||
|uni.navigateBack|[navigateBack](/api/router?id=navigateback)||
|uni.postMessage|向应用发送消息|字节跳动小程序不支持、H5 暂不支持(可以直接使用 [window.postMessage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage))|
|uni.getEnv|获取当前环境|字节跳动小程序不支持|
|uni.postMessage|向应用发送消息|H5 暂不支持(可以直接使用 [window.postMessage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage))|
|uni.getEnv|获取当前环境||
##### uni.postMessage(OBJECT)
网页向应用发送消息,在 `<web-view>``message` 事件回调 `event.detail.data` 中接收消息。
......@@ -129,9 +128,7 @@
|属性|类型|说明|
|:-|:-|:-|
|plus|Boolean|App|
|miniprogram|Boolean|微信小程序|
|smartprogram|Boolean|百度小程序|
|miniprogram|Boolean|支付宝小程序|
**示例**
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册