mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
refactor: 架构升级
This commit is contained in:
小莫唐尼
@@ -0,0 +1,174 @@
|
||||
# UniApp API 参考文档
|
||||
|
||||
本文档提供 uni-app 所有 API 的完整参考信息。
|
||||
|
||||
## API 分类索引
|
||||
|
||||
### 1. 网络请求（Network）
|
||||
|
||||
- [uni.request](./network.md#uni-request) - 发起网络请求
|
||||
- [uni.uploadFile](./network.md#uni-uploadfile) - 上传文件
|
||||
- [uni.downloadFile](./network.md#uni-downloadfile) - 下载文件
|
||||
- [uni.connectSocket](./network.md#uni-connectsocket) - 创建 WebSocket 连接
|
||||
- [uni.onSocketOpen](./network.md#uni-onsocketopen) - 监听 WebSocket 连接打开事件
|
||||
- [uni.onSocketError](./network.md#uni-onsocketerror) - 监听 WebSocket 错误事件
|
||||
- [uni.sendSocketMessage](./network.md#uni-sendsocketmessage) - 通过 WebSocket 发送数据
|
||||
- [uni.onSocketMessage](./network.md#uni-onsocketmessage) - 监听 WebSocket 接受到服务器的消息事件
|
||||
- [uni.closeSocket](./network.md#uni-closesocket) - 关闭 WebSocket 连接
|
||||
- [uni.onSocketClose](./network.md#uni-onsocketclose) - 监听 WebSocket 连接关闭事件
|
||||
|
||||
### 2. 数据存储（Storage）
|
||||
|
||||
- [uni.setStorage](./storage.md#uni-setstorage) - 将数据存储在本地缓存中指定的 key 中
|
||||
- [uni.setStorageSync](./storage.md#uni-setstoragesync) - 同步将数据存储在本地缓存中指定的 key 中
|
||||
- [uni.getStorage](./storage.md#uni-getstorage) - 从本地缓存中异步获取指定 key 的内容
|
||||
- [uni.getStorageSync](./storage.md#uni-getstoragesync) - 从本地缓存中同步获取指定 key 的内容
|
||||
- [uni.getStorageInfo](./storage.md#uni-getstorageinfo) - 异步获取当前 storage 的相关信息
|
||||
- [uni.getStorageInfoSync](./storage.md#uni-getstorageinfosync) - 同步获取当前 storage 的相关信息
|
||||
- [uni.removeStorage](./storage.md#uni-removestorage) - 从本地缓存中异步移除指定 key
|
||||
- [uni.removeStorageSync](./storage.md#uni-removestoragesync) - 从本地缓存中同步移除指定 key
|
||||
- [uni.clearStorage](./storage.md#uni-clearstorage) - 清理本地数据缓存
|
||||
- [uni.clearStorageSync](./storage.md#uni-clearstoragesync) - 同步清理本地数据缓存
|
||||
|
||||
### 3. 设备信息（Device）
|
||||
|
||||
- [uni.getSystemInfo](./device.md#uni-getsysteminfo) - 获取系统信息
|
||||
- [uni.getSystemInfoSync](./device.md#uni-getsysteminfosync) - 同步获取系统信息
|
||||
- [uni.getNetworkType](./device.md#uni-getnetworktype) - 获取网络类型
|
||||
- [uni.onNetworkStatusChange](./device.md#uni-onnetworkstatuschange) - 监听网络状态变化
|
||||
- [uni.getBatteryInfo](./device.md#uni-getbatteryinfo) - 获取设备电量信息
|
||||
- [uni.getBatteryInfoSync](./device.md#uni-getbatteryinfosync) - 同步获取设备电量信息
|
||||
- [uni.setScreenBrightness](./device.md#uni-setscreenbrightness) - 设置屏幕亮度
|
||||
- [uni.getScreenBrightness](./device.md#uni-getscreenbrightness) - 获取屏幕亮度
|
||||
- [uni.setKeepScreenOn](./device.md#uni-setkeepscreenon) - 设置是否保持屏幕常亮
|
||||
|
||||
### 4. 界面交互（UI）
|
||||
|
||||
- [uni.showToast](./ui.md#uni-showtoast) - 显示消息提示框
|
||||
- [uni.showLoading](./ui.md#uni-showloading) - 显示加载提示框
|
||||
- [uni.hideToast](./ui.md#uni-hidetoast) - 隐藏消息提示框
|
||||
- [uni.hideLoading](./ui.md#uni-hideloading) - 隐藏加载提示框
|
||||
- [uni.showModal](./ui.md#uni-showmodal) - 显示模态弹窗
|
||||
- [uni.showActionSheet](./ui.md#uni-showactionsheet) - 显示操作菜单
|
||||
- [uni.setNavigationBarTitle](./ui.md#uni-setnavigationbartitle) - 设置当前页面标题
|
||||
- [uni.setNavigationBarColor](./ui.md#uni-setnavigationbarcolor) - 设置页面导航栏颜色
|
||||
- [uni.showNavigationBarLoading](./ui.md#uni-shownavigationbarloading) - 显示导航栏加载动画
|
||||
- [uni.hideNavigationBarLoading](./ui.md#uni-hidenavigationbarloading) - 隐藏导航栏加载动画
|
||||
- [uni.setTabBarBadge](./ui.md#uni-settabbarbadge) - 为 tabBar 某一项的右上角添加文本
|
||||
- [uni.removeTabBarBadge](./ui.md#uni-removetabbarbadge) - 移除 tabBar 某一项右上角的文本
|
||||
- [uni.showTabBarRedDot](./ui.md#uni-showtabbarreddot) - 显示 tabBar 某一项的右上角的红点
|
||||
- [uni.hideTabBarRedDot](./ui.md#uni-hidetabbarreddot) - 隐藏 tabBar 某一项的右上角的红点
|
||||
- [uni.setTabBarStyle](./ui.md#uni-settabbarstyle) - 动态设置 tabBar 的整体样式
|
||||
- [uni.setTabBarItem](./ui.md#uni-settabbaritem) - 动态设置 tabBar 某一项的内容
|
||||
|
||||
### 5. 位置服务（Location）
|
||||
|
||||
- [uni.getLocation](./location.md#uni-getlocation) - 获取当前地理位置
|
||||
- [uni.openLocation](./location.md#uni-openlocation) - 使用微信内置地图查看位置
|
||||
- [uni.chooseLocation](./location.md#uni-chooselocation) - 打开地图选择位置
|
||||
|
||||
### 6. 媒体处理（Media）
|
||||
|
||||
- [uni.chooseImage](./media.md#uni-chooseimage) - 从本地相册选择图片或使用相机拍照
|
||||
- [uni.previewImage](./media.md#uni-previewimage) - 预览图片
|
||||
- [uni.getImageInfo](./media.md#uni-getimageinfo) - 获取图片信息
|
||||
- [uni.saveImageToPhotosAlbum](./media.md#uni-saveimagetophotosalbum) - 保存图片到系统相册
|
||||
- [uni.chooseVideo](./media.md#uni-choosevideo) - 从本地相册选择视频或使用相机拍摄视频
|
||||
- [uni.saveVideoToPhotosAlbum](./media.md#uni-savevideotophotosalbum) - 保存视频到系统相册
|
||||
- [uni.chooseMedia](./media.md#uni-choosemedia) - 拍摄或从手机相册中选择图片或视频
|
||||
- [uni.chooseFile](./media.md#uni-choosefile) - 从本地选择文件
|
||||
|
||||
### 7. 页面路由（Navigation）
|
||||
|
||||
- [uni.navigateTo](./navigation.md#uni-navigateto) - 保留当前页面，跳转到应用内的某个页面
|
||||
- [uni.redirectTo](./navigation.md#uni-redirectto) - 关闭当前页面，跳转到应用内的某个页面
|
||||
- [uni.reLaunch](./navigation.md#uni-relaunch) - 关闭所有页面，打开到应用内的某个页面
|
||||
- [uni.switchTab](./navigation.md#uni-switchtab) - 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
|
||||
- [uni.navigateBack](./navigation.md#uni-navigateback) - 关闭当前页面，返回上一页面或多级页面
|
||||
|
||||
### 8. 文件操作（File）
|
||||
|
||||
- [uni.saveFile](./file.md#uni-savefile) - 保存文件到本地
|
||||
- [uni.getFileInfo](./file.md#uni-getfileinfo) - 获取文件信息
|
||||
- [uni.getSavedFileList](./file.md#uni-getsavedfilelist) - 获取已保存的文件列表
|
||||
- [uni.getSavedFileInfo](./file.md#uni-getsavedfileinfo) - 获取已保存的文件信息
|
||||
- [uni.removeSavedFile](./file.md#uni-removesavedfile) - 删除已保存的文件
|
||||
|
||||
### 9. 支付（Payment）
|
||||
|
||||
- [uni.requestPayment](./payment.md#uni-requestpayment) - 发起支付
|
||||
|
||||
### 10. 分享（Share）
|
||||
|
||||
- [uni.share](./share.md#uni-share) - 分享内容
|
||||
|
||||
### 11. 其他 API（Other）
|
||||
|
||||
- [uni.canIUse](./other.md#uni-caniuse) - 判断应用的版本是否支持某个 API
|
||||
- [uni.getProvider](./other.md#uni-getprovider) - 获取服务供应商
|
||||
- [uni.login](./other.md#uni-login) - 登录
|
||||
- [uni.getUserInfo](./other.md#uni-getuserinfo) - 获取用户信息
|
||||
- [uni.checkSession](./other.md#uni-checksession) - 检查登录状态是否过期
|
||||
- [uni.authorize](./other.md#uni-authorize) - 提前向用户发起授权请求
|
||||
- [uni.openSetting](./other.md#uni-opensetting) - 调起客户端小程序设置页面
|
||||
- [uni.getSetting](./other.md#uni-getsetting) - 获取用户的当前设置
|
||||
|
||||
## API 调用规范
|
||||
|
||||
### 回调函数
|
||||
|
||||
uni-app API 支持两种调用方式：
|
||||
|
||||
1. **回调函数方式**：
|
||||
```javascript
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log(res.data)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error(err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
2. **Promise 方式**（部分 API 支持）：
|
||||
```javascript
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data'
|
||||
}).then(res => {
|
||||
console.log(res.data)
|
||||
}).catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
```
|
||||
|
||||
### 同步 API
|
||||
|
||||
部分 API 提供同步版本（以 Sync 结尾），如：
|
||||
- `uni.getStorageSync()` - 同步获取存储
|
||||
- `uni.setStorageSync()` - 同步设置存储
|
||||
- `uni.getSystemInfoSync()` - 同步获取系统信息
|
||||
|
||||
### 平台兼容性
|
||||
|
||||
每个 API 的详细平台支持情况见对应 API 的文档。使用前请检查平台兼容性，必要时使用条件编译：
|
||||
|
||||
```javascript
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
// 微信小程序支付
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
uni.requestPayment({
|
||||
// App 支付
|
||||
})
|
||||
// #endif
|
||||
```
|
||||
|
||||
## 参考资源
|
||||
|
||||
- [uni-app API 文档](https://doc.dcloud.net.cn/uni-app-x/api/)
|
||||
- [uni-app 条件编译](https://uniapp.dcloud.net.cn/tutorial/platform.html)
|
||||
@@ -0,0 +1,63 @@
|
||||
# 设备信息 API
|
||||
|
||||
## 概述
|
||||
|
||||
设备信息 API 用于获取设备系统信息、网络状态等。
|
||||
|
||||
## API 列表
|
||||
|
||||
### uni.getSystemInfo
|
||||
|
||||
获取系统信息。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/system/system-info.html#getsysteminfo
|
||||
|
||||
**返回值**：
|
||||
- `brand` - 手机品牌
|
||||
- `model` - 手机型号
|
||||
- `pixelRatio` - 设备像素比
|
||||
- `screenWidth` - 屏幕宽度
|
||||
- `screenHeight` - 屏幕高度
|
||||
- `windowWidth` - 可使用窗口宽度
|
||||
- `windowHeight` - 可使用窗口高度
|
||||
- `statusBarHeight` - 状态栏的高度
|
||||
- `language` - 应用设置的语言
|
||||
- `version` - 版本号
|
||||
- `platform` - 平台
|
||||
|
||||
**示例**：
|
||||
```javascript
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
console.log('屏幕宽度', res.screenWidth)
|
||||
console.log('屏幕高度', res.screenHeight)
|
||||
console.log('状态栏高度', res.statusBarHeight)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### uni.getSystemInfoSync
|
||||
|
||||
同步获取系统信息。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/system/system-info.html#getsysteminfosync
|
||||
|
||||
### uni.getNetworkType
|
||||
|
||||
获取网络类型。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/system/network.html#getnetworktype
|
||||
|
||||
**返回值**：
|
||||
- `networkType` - 网络类型（wifi、2g、3g、4g、unknown、none）
|
||||
|
||||
### uni.onNetworkStatusChange
|
||||
|
||||
监听网络状态变化。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/system/network.html#onnetworkstatuschange
|
||||
|
||||
## 参考资源
|
||||
|
||||
- [uni-app 系统信息文档](https://doc.dcloud.net.cn/uni-app-x/api/system/system-info.html)
|
||||
- [uni-app 网络状态文档](https://doc.dcloud.net.cn/uni-app-x/api/system/network.html)
|
||||
@@ -0,0 +1,35 @@
|
||||
# 文件操作 API
|
||||
|
||||
## 概述
|
||||
|
||||
文件操作 API 用于保存文件、获取文件信息等。
|
||||
|
||||
## API 列表
|
||||
|
||||
### uni.saveFile
|
||||
|
||||
保存文件到本地。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/file/file.html#savefile
|
||||
|
||||
### uni.getFileInfo
|
||||
|
||||
获取文件信息。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/file/file.html#getfileinfo
|
||||
|
||||
### uni.getSavedFileList
|
||||
|
||||
获取已保存的文件列表。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/file/file.html#getsavedfilelist
|
||||
|
||||
### uni.removeSavedFile
|
||||
|
||||
删除已保存的文件。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/file/file.html#removesavedfile
|
||||
|
||||
## 参考资源
|
||||
|
||||
- [uni-app 文件文档](https://doc.dcloud.net.cn/uni-app-x/api/file/file.html)
|
||||
@@ -0,0 +1,59 @@
|
||||
# 位置服务 API
|
||||
|
||||
## 概述
|
||||
|
||||
位置服务 API 用于获取地理位置、打开地图等。
|
||||
|
||||
## API 列表
|
||||
|
||||
### uni.getLocation
|
||||
|
||||
获取当前地理位置。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/location/location.html#getlocation
|
||||
|
||||
**参数**：
|
||||
- `type` (String) - 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 uni.openLocation 的坐标
|
||||
- `altitude` (Boolean) - 传入 true 会返回高度信息
|
||||
- `geocode` (Boolean) - 默认 false，传入 true 会解析地址信息
|
||||
|
||||
**返回值**：
|
||||
- `latitude` - 纬度
|
||||
- `longitude` - 经度
|
||||
- `speed` - 速度
|
||||
- `accuracy` - 位置的精确度
|
||||
- `altitude` - 高度
|
||||
- `verticalAccuracy` - 垂直精度
|
||||
- `horizontalAccuracy` - 水平精度
|
||||
|
||||
**示例**：
|
||||
```javascript
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
console.log('当前位置', res.latitude, res.longitude)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### uni.openLocation
|
||||
|
||||
使用微信内置地图查看位置。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/location/open-location.html#openlocation
|
||||
|
||||
**参数**：
|
||||
- `latitude` (Number) - 纬度
|
||||
- `longitude` (Number) - 经度
|
||||
- `name` (String) - 位置名称
|
||||
- `address` (String) - 地址的详细说明
|
||||
|
||||
### uni.chooseLocation
|
||||
|
||||
打开地图选择位置。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/location/choose-location.html#chooselocation
|
||||
|
||||
## 参考资源
|
||||
|
||||
- [uni-app 位置服务文档](https://doc.dcloud.net.cn/uni-app-x/api/location/location.html)
|
||||
@@ -0,0 +1,67 @@
|
||||
# 媒体处理 API
|
||||
|
||||
## 概述
|
||||
|
||||
媒体处理 API 用于选择图片、预览图片、选择视频等。
|
||||
|
||||
## API 列表
|
||||
|
||||
### uni.chooseImage
|
||||
|
||||
从本地相册选择图片或使用相机拍照。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#chooseimage
|
||||
|
||||
**参数**：
|
||||
- `count` (Number) - 最多可以选择的图片张数，默认 9
|
||||
- `sizeType` (Array) - 所选的图片的尺寸（original、compressed）
|
||||
- `sourceType` (Array) - 选择图片的来源（album、camera）
|
||||
|
||||
**返回值**：
|
||||
- `tempFilePaths` - 图片的本地文件路径列表
|
||||
- `tempFiles` - 图片的本地文件列表
|
||||
|
||||
**示例**：
|
||||
```javascript
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
console.log('选择的图片', res.tempFilePaths)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### uni.previewImage
|
||||
|
||||
预览图片。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#previewimage
|
||||
|
||||
**参数**：
|
||||
- `urls` (Array) - 需要预览的图片 http 链接列表
|
||||
- `current` (Number) - 当前显示图片的索引
|
||||
|
||||
### uni.getImageInfo
|
||||
|
||||
获取图片信息。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#getimageinfo
|
||||
|
||||
### uni.saveImageToPhotosAlbum
|
||||
|
||||
保存图片到系统相册。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#saveimagetophotosalbum
|
||||
|
||||
### uni.chooseVideo
|
||||
|
||||
从本地相册选择视频或使用相机拍摄视频。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/media/video.html#choosevideo
|
||||
|
||||
## 参考资源
|
||||
|
||||
- [uni-app 图片文档](https://doc.dcloud.net.cn/uni-app-x/api/media/image.html)
|
||||
- [uni-app 视频文档](https://doc.dcloud.net.cn/uni-app-x/api/media/video.html)
|
||||
@@ -0,0 +1,60 @@
|
||||
# 页面路由 API
|
||||
|
||||
## 概述
|
||||
|
||||
页面路由 API 用于页面跳转和导航。
|
||||
|
||||
## API 列表
|
||||
|
||||
### uni.navigateTo
|
||||
|
||||
保留当前页面，跳转到应用内的某个页面。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/router.html#navigateto
|
||||
|
||||
**参数**：
|
||||
- `url` (String) - 需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数
|
||||
- `success` (Function) - 接口调用成功的回调函数
|
||||
- `fail` (Function) - 接口调用失败的回调函数
|
||||
- `complete` (Function) - 接口调用结束的回调函数
|
||||
|
||||
**示例**：
|
||||
```javascript
|
||||
uni.navigateTo({
|
||||
url: '/pages/detail/detail?id=123&name=test',
|
||||
success: () => {
|
||||
console.log('跳转成功')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### uni.redirectTo
|
||||
|
||||
关闭当前页面，跳转到应用内的某个页面。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/router.html#redirectto
|
||||
|
||||
### uni.reLaunch
|
||||
|
||||
关闭所有页面，打开到应用内的某个页面。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/router.html#relaunch
|
||||
|
||||
### uni.switchTab
|
||||
|
||||
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/router.html#switchtab
|
||||
|
||||
### uni.navigateBack
|
||||
|
||||
关闭当前页面，返回上一页面或多级页面。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/router.html#navigateback
|
||||
|
||||
**参数**：
|
||||
- `delta` (Number) - 返回的页面数，如果 delta 大于现有页面数，则返回到首页
|
||||
|
||||
## 参考资源
|
||||
|
||||
- [uni-app 路由文档](https://doc.dcloud.net.cn/uni-app-x/api/router.html)
|
||||
@@ -0,0 +1,276 @@
|
||||
# 网络请求 API
|
||||
|
||||
## uni.request
|
||||
|
||||
发起网络请求。
|
||||
|
||||
### 参数
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 | 平台差异说明 |
|
||||
|--------|------|------|------|--------------|
|
||||
| url | String | 是 | 开发者服务器接口地址 | - |
|
||||
| data | Object/String/ArrayBuffer | 否 | 请求的参数 | - |
|
||||
| header | Object | 否 | 设置请求的 header，header 中不能设置 Referer | - |
|
||||
| method | String | 否 | HTTP 请求方法，默认为 GET | - |
|
||||
| timeout | Number | 否 | 超时时间，单位为 ms，默认为 60000 | - |
|
||||
| dataType | String | 否 | 如果设为 json，会尝试对返回的数据做一次 JSON.parse | - |
|
||||
| responseType | String | 否 | 设置响应的数据类型，默认为 text | - |
|
||||
| sslVerify | Boolean | 否 | 验证 ssl 证书 | App |
|
||||
| withCredentials | Boolean | 否 | 跨域请求时是否携带凭证（cookies） | H5 |
|
||||
| firstIpv4 | Boolean | 否 | DNS 解析时优先使用 ipv4 | App |
|
||||
|
||||
### 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| data | Object/String/ArrayBuffer | 服务器返回的数据 |
|
||||
| statusCode | Number | HTTP 状态码 |
|
||||
| header | Object | 服务器返回的 header |
|
||||
| cookies | Array | 服务器返回的 cookies |
|
||||
|
||||
### 平台支持
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
### 示例
|
||||
|
||||
```javascript
|
||||
// GET 请求
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
method: 'GET',
|
||||
data: {
|
||||
id: 123
|
||||
},
|
||||
success: (res) => {
|
||||
console.log(res.data)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error(err)
|
||||
}
|
||||
})
|
||||
|
||||
// POST 请求
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
method: 'POST',
|
||||
data: {
|
||||
name: 'John',
|
||||
age: 30
|
||||
},
|
||||
header: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
success: (res) => {
|
||||
console.log(res.data)
|
||||
}
|
||||
})
|
||||
|
||||
// 使用 Promise
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data'
|
||||
}).then(res => {
|
||||
console.log(res.data)
|
||||
}).catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
```
|
||||
|
||||
## uni.uploadFile
|
||||
|
||||
上传文件。
|
||||
|
||||
### 参数
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 | 平台差异说明 |
|
||||
|--------|------|------|------|--------------|
|
||||
| url | String | 是 | 开发者服务器 url | - |
|
||||
| filePath | String | 是 | 要上传文件资源的路径 | - |
|
||||
| name | String | 是 | 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容 | - |
|
||||
| header | Object | 否 | HTTP 请求 Header，header 中不能设置 Referer | - |
|
||||
| formData | Object | 否 | HTTP 请求中其他额外的 form data | - |
|
||||
| timeout | Number | 否 | 超时时间，单位为 ms，默认为 60000 | - |
|
||||
|
||||
### 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| data | String | 服务器返回的数据 |
|
||||
| statusCode | Number | HTTP 状态码 |
|
||||
|
||||
### 平台支持
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ❌ |
|
||||
|
||||
### 示例
|
||||
|
||||
```javascript
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const tempFilePaths = res.tempFilePaths
|
||||
uni.uploadFile({
|
||||
url: 'https://api.example.com/upload',
|
||||
filePath: tempFilePaths[0],
|
||||
name: 'file',
|
||||
formData: {
|
||||
'user': 'test'
|
||||
},
|
||||
success: (uploadRes) => {
|
||||
console.log(uploadRes.data)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error(err)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## uni.downloadFile
|
||||
|
||||
下载文件。
|
||||
|
||||
### 参数
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 | 平台差异说明 |
|
||||
|--------|------|------|------|--------------|
|
||||
| url | String | 是 | 下载资源的 url | - |
|
||||
| header | Object | 否 | HTTP 请求 Header，header 中不能设置 Referer | - |
|
||||
| timeout | Number | 否 | 超时时间，单位为 ms，默认为 60000 | - |
|
||||
|
||||
### 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| tempFilePath | String | 临时文件路径，下载后的文件会存储到一个临时文件 |
|
||||
| statusCode | Number | HTTP 状态码 |
|
||||
|
||||
### 平台支持
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ❌ |
|
||||
|
||||
### 示例
|
||||
|
||||
```javascript
|
||||
uni.downloadFile({
|
||||
url: 'https://example.com/file.pdf',
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
console.log('下载成功', res.tempFilePath)
|
||||
// 可以调用 uni.openDocument 打开文件
|
||||
uni.openDocument({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
console.log('打开文档成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('下载失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## uni.connectSocket
|
||||
|
||||
创建 WebSocket 连接。
|
||||
|
||||
### 参数
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 | 平台差异说明 |
|
||||
|--------|------|------|------|--------------|
|
||||
| url | String | 是 | 服务器接口地址，必须是 wss 协议，且域名必须是后台配置的合法域名 | - |
|
||||
| header | Object | 否 | HTTP Header，header 中不能设置 Referer | - |
|
||||
| protocols | Array | 否 | 子协议数组 | H5 |
|
||||
| method | String | 否 | 请求方法 | App |
|
||||
|
||||
### 平台支持
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ❌ |
|
||||
|
||||
### 示例
|
||||
|
||||
```javascript
|
||||
// 创建 WebSocket 连接
|
||||
uni.connectSocket({
|
||||
url: 'wss://example.com/websocket',
|
||||
success: () => {
|
||||
console.log('连接成功')
|
||||
}
|
||||
})
|
||||
|
||||
// 监听 WebSocket 连接打开事件
|
||||
uni.onSocketOpen((res) => {
|
||||
console.log('WebSocket 连接已打开')
|
||||
})
|
||||
|
||||
// 监听 WebSocket 错误事件
|
||||
uni.onSocketError((res) => {
|
||||
console.error('WebSocket 错误', res)
|
||||
})
|
||||
|
||||
// 发送数据
|
||||
uni.sendSocketMessage({
|
||||
data: JSON.stringify({
|
||||
type: 'message',
|
||||
content: 'Hello'
|
||||
})
|
||||
})
|
||||
|
||||
// 监听接收消息
|
||||
uni.onSocketMessage((res) => {
|
||||
console.log('收到消息', res.data)
|
||||
})
|
||||
|
||||
// 关闭连接
|
||||
uni.closeSocket()
|
||||
```
|
||||
|
||||
## 参考资源
|
||||
|
||||
- [uni-app 网络请求文档](https://doc.dcloud.net.cn/uni-app-x/api/network/request.html)
|
||||
- [uni-app 文件上传文档](https://doc.dcloud.net.cn/uni-app-x/api/network/upload.html)
|
||||
- [uni-app 文件下载文档](https://doc.dcloud.net.cn/uni-app-x/api/network/download.html)
|
||||
- [uni-app WebSocket 文档](https://doc.dcloud.net.cn/uni-app-x/api/network/websocket.html)
|
||||
@@ -0,0 +1,58 @@
|
||||
# 其他 API
|
||||
|
||||
## 概述
|
||||
|
||||
其他 API 包括工具类 API、登录 API 等。
|
||||
|
||||
## API 列表
|
||||
|
||||
### uni.canIUse
|
||||
|
||||
判断应用的版本是否支持某个 API。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/system/info.html#caniuse
|
||||
|
||||
**示例**：
|
||||
```javascript
|
||||
if (uni.canIUse('getSystemInfo')) {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### uni.login
|
||||
|
||||
登录。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/login/login.html#login
|
||||
|
||||
### uni.getUserInfo
|
||||
|
||||
获取用户信息。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/login/login.html#getuserinfo
|
||||
|
||||
### uni.authorize
|
||||
|
||||
提前向用户发起授权请求。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/authorize.html#authorize
|
||||
|
||||
### uni.openSetting
|
||||
|
||||
调起客户端小程序设置页面。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/setting/open-setting.html#opensetting
|
||||
|
||||
### uni.getSetting
|
||||
|
||||
获取用户的当前设置。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/setting/get-setting.html#getsetting
|
||||
|
||||
## 参考资源
|
||||
|
||||
- [uni-app API 文档](https://doc.dcloud.net.cn/uni-app-x/api/)
|
||||
@@ -0,0 +1,43 @@
|
||||
# 支付 API
|
||||
|
||||
## 概述
|
||||
|
||||
支付 API 用于发起支付。
|
||||
|
||||
## API 列表
|
||||
|
||||
### uni.requestPayment
|
||||
|
||||
发起支付。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/payment/payment.html#requestpayment
|
||||
|
||||
**参数**（微信小程序）：
|
||||
- `provider` (String) - 支付服务提供商（wxpay）
|
||||
- `timeStamp` (String) - 时间戳
|
||||
- `nonceStr` (String) - 随机字符串
|
||||
- `package` (String) - 统一下单接口返回的 prepay_id 参数值
|
||||
- `signType` (String) - 签名算法
|
||||
- `paySign` (String) - 签名
|
||||
|
||||
**示例**：
|
||||
```javascript
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay',
|
||||
timeStamp: String(Date.now()),
|
||||
nonceStr: 'nonceStr',
|
||||
package: 'prepay_id=xxx',
|
||||
signType: 'MD5',
|
||||
paySign: 'paySign',
|
||||
success: (res) => {
|
||||
console.log('支付成功', res)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('支付失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 参考资源
|
||||
|
||||
- [uni-app 支付文档](https://doc.dcloud.net.cn/uni-app-x/api/payment/payment.html)
|
||||
@@ -0,0 +1,25 @@
|
||||
# 分享 API
|
||||
|
||||
## 概述
|
||||
|
||||
分享 API 用于分享内容。
|
||||
|
||||
## API 列表
|
||||
|
||||
### uni.share
|
||||
|
||||
分享内容。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/share/share.html#share
|
||||
|
||||
**参数**：
|
||||
- `provider` (String) - 分享服务提供商（weixin、sinaweibo、qq）
|
||||
- `type` (Number) - 分享类型（0-图文、1-纯文字、2-纯图片、3-音乐、4-视频、5-小程序）
|
||||
- `href` (String) - 分享链接
|
||||
- `title` (String) - 分享标题
|
||||
- `summary` (String) - 分享摘要
|
||||
- `imageUrl` (String) - 分享图片
|
||||
|
||||
## 参考资源
|
||||
|
||||
- [uni-app 分享文档](https://doc.dcloud.net.cn/uni-app-x/api/share/share.html)
|
||||
@@ -0,0 +1,65 @@
|
||||
# 数据存储 API
|
||||
|
||||
## 概述
|
||||
|
||||
数据存储 API 用于在本地存储和获取数据。
|
||||
|
||||
## API 列表
|
||||
|
||||
### uni.setStorage
|
||||
|
||||
将数据存储在本地缓存中指定的 key 中。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstorage
|
||||
|
||||
**参数**：
|
||||
- `key` (String) - 本地缓存中指定的 key
|
||||
- `data` (Any) - 需要存储的内容
|
||||
- `success` (Function) - 接口调用成功的回调函数
|
||||
- `fail` (Function) - 接口调用失败的回调函数
|
||||
- `complete` (Function) - 接口调用结束的回调函数
|
||||
|
||||
**示例**：
|
||||
```javascript
|
||||
uni.setStorage({
|
||||
key: 'userInfo',
|
||||
data: { name: 'John', age: 30 },
|
||||
success: () => {
|
||||
console.log('存储成功')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### uni.getStorage
|
||||
|
||||
从本地缓存中异步获取指定 key 的内容。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstorage
|
||||
|
||||
### uni.removeStorage
|
||||
|
||||
从本地缓存中异步移除指定 key。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#removestorage
|
||||
|
||||
### uni.clearStorage
|
||||
|
||||
清理本地数据缓存。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#clearstorage
|
||||
|
||||
### uni.setStorageSync
|
||||
|
||||
同步将数据存储在本地缓存中指定的 key 中。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstoragesync
|
||||
|
||||
### uni.getStorageSync
|
||||
|
||||
从本地缓存中同步获取指定 key 的内容。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstoragesync
|
||||
|
||||
## 参考资源
|
||||
|
||||
- [uni-app 数据存储文档](https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html)
|
||||
@@ -0,0 +1,75 @@
|
||||
# 界面交互 API
|
||||
|
||||
## 概述
|
||||
|
||||
界面交互 API 用于显示提示、对话框、操作菜单等。
|
||||
|
||||
## API 列表
|
||||
|
||||
### uni.showToast
|
||||
|
||||
显示消息提示框。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showtoast
|
||||
|
||||
**参数**：
|
||||
- `title` (String) - 提示的内容
|
||||
- `icon` (String) - 图标类型（success、error、loading、none）
|
||||
- `image` (String) - 自定义图标的本地路径
|
||||
- `duration` (Number) - 提示的延迟时间，默认 2000
|
||||
- `mask` (Boolean) - 是否显示透明蒙层，防止触摸穿透
|
||||
|
||||
**示例**：
|
||||
```javascript
|
||||
uni.showToast({
|
||||
title: '操作成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
```
|
||||
|
||||
### uni.showModal
|
||||
|
||||
显示模态弹窗。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showmodal
|
||||
|
||||
**参数**：
|
||||
- `title` (String) - 提示的标题
|
||||
- `content` (String) - 提示的内容
|
||||
- `showCancel` (Boolean) - 是否显示取消按钮
|
||||
- `cancelText` (String) - 取消按钮的文字
|
||||
- `confirmText` (String) - 确认按钮的文字
|
||||
|
||||
**返回值**：
|
||||
- `confirm` (Boolean) - 为 true 时，表示用户点击了确定按钮
|
||||
- `cancel` (Boolean) - 为 true 时，表示用户点击了取消按钮
|
||||
|
||||
### uni.showActionSheet
|
||||
|
||||
显示操作菜单。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showactionsheet
|
||||
|
||||
### uni.showLoading
|
||||
|
||||
显示加载提示框。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showloading
|
||||
|
||||
### uni.hideLoading
|
||||
|
||||
隐藏加载提示框。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#hideloading
|
||||
|
||||
### uni.setNavigationBarTitle
|
||||
|
||||
设置当前页面标题。
|
||||
|
||||
**详细文档**：https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#setnavigationbartitle
|
||||
|
||||
## 参考资源
|
||||
|
||||
- [uni-app 界面交互文档](https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html)
|
||||
- [uni-app 导航栏文档](https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html)
|
||||
@@ -0,0 +1,48 @@
|
||||
# Components Index | 组件索引
|
||||
|
||||
## 官方文档
|
||||
|
||||
https://doc.dcloud.net.cn/uni-app-x/component/
|
||||
|
||||
## 内置组件列表
|
||||
|
||||
- ad
|
||||
- ad-draw
|
||||
- audio
|
||||
- button
|
||||
- camera
|
||||
- canvas
|
||||
- checkbox
|
||||
- cover-image
|
||||
- cover-view
|
||||
- custom-tab-bar
|
||||
- editor
|
||||
- form
|
||||
- icon
|
||||
- image
|
||||
- input
|
||||
- label
|
||||
- live-player
|
||||
- live-pusher
|
||||
- map
|
||||
- match-media
|
||||
- movable-area
|
||||
- movable-view
|
||||
- navigation-bar
|
||||
- navigator
|
||||
- page-meta
|
||||
- picker
|
||||
- picker-view
|
||||
- progress
|
||||
- radio
|
||||
- rich-text
|
||||
- scroll-view
|
||||
- slider
|
||||
- swiper
|
||||
- switch
|
||||
- text
|
||||
- textarea
|
||||
- unicloud-db
|
||||
- video
|
||||
- view
|
||||
- web-view
|
||||
@@ -0,0 +1,32 @@
|
||||
# ad-draw
|
||||
|
||||
## Instructions
|
||||
|
||||
也称为Draw视频信息流广告
|
||||
|
||||
沉浸视频流广告为媒体提供了竖屏视频信息流广告样式，适合在全屏的竖屏视频中使用。支持app-nvue页面使用。
|
||||
|
||||
类抖音的竖版视频流，来电秀、直播间等全屏观看的视频。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<ad-draw />`（或 `<ad-draw></ad-draw>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
See official docs for full properties list: `https://doc.dcloud.net.cn/uni-app-x/component/ad-draw.html`
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://doc.dcloud.net.cn/uni-app-x/component/ad-draw.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/ad-draw.html`
|
||||
|
||||
### Examples
|
||||
|
||||
Examples are available in the official docs: `https://doc.dcloud.net.cn/uni-app-x/component/ad-draw.html`
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/ad-draw.html)
|
||||
@@ -0,0 +1,32 @@
|
||||
# ad
|
||||
|
||||
## Instructions
|
||||
|
||||
应用内展示的广告组件，可用于banner或信息流。
|
||||
|
||||
Banner或信息流广告展现场景非常灵活，常见的展现场景为：文章顶部，详情页面顶部，第一屏中部等。建议信息流广告不要放置在底部
|
||||
|
||||
平台差异说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<ad />`（或 `<ad></ad>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
See official docs for full properties list: `https://doc.dcloud.net.cn/uni-app-x/component/ad.html`
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://doc.dcloud.net.cn/uni-app-x/component/ad.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/ad.html`
|
||||
|
||||
### Examples
|
||||
|
||||
Examples are available in the official docs: `https://doc.dcloud.net.cn/uni-app-x/component/ad.html`
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/ad.html)
|
||||
@@ -0,0 +1,112 @@
|
||||
# audio
|
||||
|
||||
## Instructions
|
||||
|
||||
音频。
|
||||
|
||||
平台差异说明
|
||||
|
||||
注意： 微信小程序平台自基础库 1.6.0 版本开始，不再维护 audio 组件，推荐使用API方式而不是组件方式来播放音频。API见 uni.createInnerAudioContext 替代。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<audio />`（或 `<audio></audio>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| id | String | | audio 组件的唯一标识符 |
|
||||
| src | String | | 要播放音频的资源地址 |
|
||||
| loop | Boolean | false | 是否循环播放 |
|
||||
| controls | Boolean | false | 是否显示默认控件 |
|
||||
| poster | String | | 默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效 |
|
||||
| name | String | 未知音频 | 默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效 |
|
||||
| author | String | 未知作者 | 默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @error | EventHandle | | 当发生错误时触发 error 事件，detail = {errMsg: MediaError.code} |
|
||||
| @play | EventHandle | | 当开始/继续播放时触发play事件 |
|
||||
| @pause | EventHandle | | 当暂停播放时触发 pause 事件 |
|
||||
| @timeupdate | EventHandle | | 当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration} |
|
||||
| @ended | EventHandle | | 当播放到末尾时触发 ended 事件 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/audio.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="page-body">
|
||||
<view class="page-section page-section-gap" style="text-align: center;">
|
||||
<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<view class="page-body">
|
||||
<view class="page-section page-section-gap" style="text-align: center;">
|
||||
<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: {
|
||||
poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
|
||||
name: '致爱丽丝',
|
||||
author: '暂无',
|
||||
src: 'https://web-ext-storage.dcloud.net.cn/doc/uniapp/ForElise.mp3',
|
||||
},
|
||||
audioAction: {
|
||||
method: 'pause'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: {
|
||||
poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
|
||||
name: '致爱丽丝',
|
||||
author: '暂无',
|
||||
src: 'https://web-ext-storage.dcloud.net.cn/doc/uniapp/ForElise.mp3',
|
||||
},
|
||||
audioAction: {
|
||||
method: 'pause'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/audio.html)
|
||||
@@ -0,0 +1,240 @@
|
||||
# button
|
||||
|
||||
## Instructions
|
||||
|
||||
按钮。
|
||||
|
||||
属性说明
|
||||
|
||||
button组件也支持style中通过css定义文字大小。 见下
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<button />`（或 `<button></button>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 生效时机 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| 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" 时，没有点击态效果 | | 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"时有效 | | 微信小程序 |
|
||||
| group-id | String | | 打开群资料卡时，传递的群号 | open-type="openGroupProfile" | QQ小程序 |
|
||||
| guild-id | String | | 打开频道页面时，传递的频道号 | open-type="openGuildProfile" | QQ小程序 |
|
||||
| public-id | String | | 打开公众号资料卡时，传递的号码 | open-type="openPublicProfile" | QQ小程序 |
|
||||
| data-im-id | String | | 客服的抖音号 | open-type="im" | 抖音小程序2.68.0版本+ |
|
||||
| data-im-type | String | | IM卡片类型 | open-type="im" | 抖音小程序2.80.0版本+ |
|
||||
| data-goods-id | String | | 商品的id，仅支持泛知识课程库和生活服务商品库中的商品 | open-type="im" | 抖音小程序2.80.0版本+ |
|
||||
| data-order-id | String | | 订单的id，仅支持交易2.0订单 | open-type="im" | 抖音小程序2.80.0版本+ |
|
||||
| data-biz-line | String | | 商品类型，“1”代表生活服务，“2”代表泛知识。 | open-type="im" | 抖音小程序2.80.0版本+ |
|
||||
| contact-type | String | | 客服类型，默认值 seller | | 小红书小程序 |
|
||||
| contact-id | String | | contact-type 对应的key。contact-type 为 seller 时非必传；goods 时第三方商品 id；order时第三方订单 id。open-type=contact时有效 | | 小红书小程序 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 生效时机 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| @getphonenumber | Handler | | 获取用户手机号回调 | open-type="getPhoneNumber" | 微信、支付宝、百度、抖音、快手、京东小程序、小红书小程序 |
|
||||
| @getuserinfo | Handler | | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo | open-type="getUserInfo" | 微信、QQ、百度、快手、京东小程序、小红书小程序 |
|
||||
| @error | Handler | | 当使用开放能力时，发生错误的回调 | open-type="launchApp" | 微信、QQ、快手、京东小程序 |
|
||||
| @opensetting | Handler | | 在打开授权设置页并关闭后回调 | open-type="openSetting" | 微信、QQ、百度、快手、京东小程序、小红书小程序 |
|
||||
| @launchapp | Handler | | 从小程序打开 App 成功的回调 | open-type="launchApp" | 微信、QQ、快手、京东小程序 |
|
||||
| @contact | Handler | | 客服消息回调 | open-type="contact" | 微信、QQ、百度、快手小程序 |
|
||||
| @chooseavatar | Handler | | 获取用户头像回调 | open-type="chooseAvatar" | 微信、支付宝小程序 |
|
||||
| @agreeprivacyauthorization | Handler | | 用户同意隐私协议事件回调，open-type="agreePrivacyAuthorization"时有效 | open-type="agreeprivacyauthorization" | 微信小程序2.32.3 |
|
||||
| @addgroupapp | Handler | | 添加群应用的回调 | open-type="addGroupApp" | QQ小程序 |
|
||||
| @chooseaddress | Handler | | 调起用户编辑并选择收货地址的回调 | open-type="chooseAddress" | 百度小程序 |
|
||||
| @chooseinvoicetitle | Handler | | 用户选择发票抬头的回调 | open-type="chooseInvoiceTitle" | 百度小程序 |
|
||||
| @subscribe | Handler | | 订阅消息授权回调 | open-type="subscribe" | 百度小程序 |
|
||||
| @login | Handler | | 登录回调 | open-type="login" | 百度小程序 |
|
||||
| @im | Handler | | 监听跳转IM的成功回调 | open-type="im" | 抖音小程序2.68.0版本+ |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
| 值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- |
|
||||
| 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.32.3版本+ |
|
||||
| uploadDouyinVideo | 发布抖音视频 | 抖音小程序2.65.0版本+ |
|
||||
| im | 跳转到抖音IM客服 | 抖音小程序2.80.0版本+ |
|
||||
| getAuthorize | 支持小程序授权 | 支付宝小程序 |
|
||||
| lifestyle | 关注生活号 | 支付宝小程序 |
|
||||
| contactShare | 分享到通讯录好友 | 支付宝小程序基础库1.11.0版本+ |
|
||||
| openGroupProfile | 呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest.json中必须配置groupIdList | QQ小程序基础库1.4.7版本+ |
|
||||
| openGuildProfile | 呼起频道页面，可以通过guild-id属性设定需要打开的频道ID | QQ小程序基础库1.46.8版本+ |
|
||||
| openPublicProfile | 打开公众号资料卡，可以通过public-id属性设定需要打开的公众号资料卡的号码，同时manifest.json中必须配置publicIdList | QQ小程序基础库1.12.0版本+ |
|
||||
| shareMessageToFriend | 在自定义开放数据域组件中,向指定好友发起分享据 | QQ小程序基础库1.17.0版本+ |
|
||||
| addFriend | 添加好友， 对方需要通过该小程序进行授权，允许被加好友后才能调用成功用户授权 | QQ小程序 |
|
||||
| addColorSign | 添加彩签，点击后添加状态有用户提示，无回调 | QQ小程序基础库1.10.0版本+ |
|
||||
| addGroupApp | 添加群应用（只有管理员或群主有权操作），添加后给button绑定@addgroupapp事件接收回调数据 | QQ小程序基础库1.16.0版本+ |
|
||||
| addToFavorites | 收藏当前页面，点击按钮后会触发Page.onAddToFavorites方法 | QQ小程序基础库1.19.0版本+ |
|
||||
| chooseAddress | 选择用户收货地址，可以从@chooseaddress回调中获取到用户选择的地址信息 | 百度小程序3.160.3版本+ |
|
||||
| chooseInvoiceTitle | 选择用户发票抬头，可以从@chooseinvoicetitle回调中获取到用户选择发票抬头信息 | 百度小程序3.160.3版本+ |
|
||||
| login | 登录，可以从@login回调中确认是否登录成功 | 百度小程序3.230.1版本+ |
|
||||
| subscribe | 订阅类模板消息，需要用户授权才可发送 | 百度小程序 |
|
||||
| favorite | 触发用户收藏 | 快手小程序 |
|
||||
| watchLater | 触发用户稍后再看 | 快手小程序 |
|
||||
| openProfile | 触发打开用户主页 | 快手小程序 |
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<button size="default" type="default"
|
||||
style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19"
|
||||
hover-class="is-hover">按钮</button>
|
||||
</template>
|
||||
<style>
|
||||
.is-hover {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
background-color: #179b16;
|
||||
border-color: #179b16;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<button size="default" type="default"
|
||||
style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19"
|
||||
hover-class="is-hover">按钮</button>
|
||||
</template>
|
||||
<style>
|
||||
.is-hover {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
background-color: #179b16;
|
||||
border-color: #179b16;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<navigator url="/pages/about/about"><button type="default">通过navigator组件跳转到about页面</button></navigator>
|
||||
<button type="default" @click="goto('/pages/about/about')">通过方法跳转到about页面</button>
|
||||
<button type="default" @click="navigateTo('/pages/about/about')">跳转到about页面</button><!-- 这种写法只有h5平台支持，不跨端，不推荐使用 -->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goto(url) {
|
||||
uni.navigateTo({
|
||||
url:url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<navigator url="/pages/about/about"><button type="default">通过navigator组件跳转到about页面</button></navigator>
|
||||
<button type="default" @click="goto('/pages/about/about')">通过方法跳转到about页面</button>
|
||||
<button type="default" @click="navigateTo('/pages/about/about')">跳转到about页面</button><!-- 这种写法只有h5平台支持，不跨端，不推荐使用 -->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goto(url) {
|
||||
uni.navigateTo({
|
||||
url:url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<button type="primary">页面主操作 Normal</button>
|
||||
<button type="primary" loading="true">页面主操作 Loading</button>
|
||||
<button type="primary" disabled="true">页面主操作 Disabled</button>
|
||||
<button type="default">页面次要操作 Normal</button>
|
||||
<button type="default" disabled="true">页面次要操作 Disabled</button>
|
||||
<button type="warn">警告类操作 Normal</button>
|
||||
<button type="warn" disabled="true">警告类操作 Disabled</button>
|
||||
<view class="button-sp-area">
|
||||
<button type="primary" plain="true">按钮</button>
|
||||
<button type="primary" disabled="true" plain="true">不可点击的按钮</button>
|
||||
<button type="default" plain="true">按钮</button>
|
||||
<button type="default" disabled="true" plain="true">按钮</button>
|
||||
<button class="mini-btn" type="primary" size="mini">按钮</button>
|
||||
<button class="mini-btn" type="default" size="mini">按钮</button>
|
||||
<button class="mini-btn" type="warn" size="mini">按钮</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<button type="primary">页面主操作 Normal</button>
|
||||
<button type="primary" loading="true">页面主操作 Loading</button>
|
||||
<button type="primary" disabled="true">页面主操作 Disabled</button>
|
||||
<button type="default">页面次要操作 Normal</button>
|
||||
<button type="default" disabled="true">页面次要操作 Disabled</button>
|
||||
<button type="warn">警告类操作 Normal</button>
|
||||
<button type="warn" disabled="true">警告类操作 Disabled</button>
|
||||
<view class="button-sp-area">
|
||||
<button type="primary" plain="true">按钮</button>
|
||||
<button type="primary" disabled="true" plain="true">不可点击的按钮</button>
|
||||
<button type="default" plain="true">按钮</button>
|
||||
<button type="default" disabled="true" plain="true">按钮</button>
|
||||
<button class="mini-btn" type="primary" size="mini">按钮</button>
|
||||
<button class="mini-btn" type="default" size="mini">按钮</button>
|
||||
<button class="mini-btn" type="warn" size="mini">按钮</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/button.html)
|
||||
@@ -0,0 +1,121 @@
|
||||
# camera
|
||||
|
||||
## Instructions
|
||||
|
||||
页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。
|
||||
|
||||
平台差异说明
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<camera />`（或 `<camera></camera>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| mode | String | normal | 应用模式，有效值为 normal(相机模式), scanCode(扫码模式)，不支持动态修改 | |
|
||||
| resolution | string | medium | 分辨率，有效值为low, medium, high，不支持动态修改 | 微信小程序2.10.0、抖音小程序、飞书小程序 |
|
||||
| device-position | String | back | 前置或后置摄像头，值为front, back | |
|
||||
| flash | String | auto | 闪光灯，值为auto, on, off, torch | |
|
||||
| frame-size | string | medium | 指定期望的相机帧数据尺寸，值为small, medium, large | 微信小程序2.7.0、快应用、支付宝小程序、抖音小程序 |
|
||||
| output-dimension | String | 720P | 相机拍照，录制的分辨率。有效值为 360P、540P、720P、1080P、max。 | 支付宝小程序1.23.0 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @stop | EventHandle | | 摄像头在非正常终止时触发，如退出后台等情况 | |
|
||||
| @error | EventHandle | | 用户不允许使用摄像头时触发 | |
|
||||
| @initdone | eventhandle | | 相机初始化完成时触发，e.detail = {maxZoom} | 微信小程序2.7.0、抖音小程序1.78.0、飞书小程序、快手小程序 |
|
||||
| @ready | EventHandle | | 相机初始化成功时触发。event.detail = {maxZoom} | 支付宝小程序1.24.3 |
|
||||
| @scancode | EventHandle | | 在扫码识别成功时触发，仅在 mode="scanCode" 时生效 | 微信小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/camera.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
|
||||
<button type="primary" @click="takePhoto">拍照</button>
|
||||
<view>预览</view>
|
||||
<image mode="widthFix" :src="src"></image>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
|
||||
<button type="primary" @click="takePhoto">拍照</button>
|
||||
<view>预览</view>
|
||||
<image mode="widthFix" :src="src"></image>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src:""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
takePhoto() {
|
||||
const ctx = uni.createCameraContext();
|
||||
ctx.takePhoto({
|
||||
quality: 'high',
|
||||
success: (res) => {
|
||||
this.src = res.tempImagePath
|
||||
}
|
||||
});
|
||||
},
|
||||
error(e) {
|
||||
console.log(e.detail);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src:""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
takePhoto() {
|
||||
const ctx = uni.createCameraContext();
|
||||
ctx.takePhoto({
|
||||
quality: 'high',
|
||||
success: (res) => {
|
||||
this.src = res.tempImagePath
|
||||
}
|
||||
});
|
||||
},
|
||||
error(e) {
|
||||
console.log(e.detail);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/camera.html)
|
||||
@@ -0,0 +1,99 @@
|
||||
# canvas
|
||||
|
||||
## Instructions
|
||||
|
||||
画布
|
||||
|
||||
属性说明
|
||||
|
||||
注意事项：
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<canvas />`（或 `<canvas></canvas>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| type | String | | 指定 canvas 类型，支持 2d 和 webgl | 微信小程序2.7.0+ 、抖音小程序1.78.0+、支付宝小程序2.7.0+ |
|
||||
| canvas-id | String | | canvas 组件的唯一标识符 | |
|
||||
| disable-scroll | Boolean | false | 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 | 抖音小程序与飞书小程序不支持 |
|
||||
| hidpi | Boolean | true | 是否启用高清处理 | H5 (HBuilder X 3.4.0+)、App-vue (HBuilder X 3.4.0+) |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @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'} | 抖音小程序与飞书小程序不支持 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/canvas.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
|
||||
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" id="secondCanvas"></canvas>
|
||||
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" id="secondCanvas" @error="canvasIdErrorCallback"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
|
||||
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" id="secondCanvas"></canvas>
|
||||
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" id="secondCanvas" @error="canvasIdErrorCallback"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
onReady: function (e) {
|
||||
var context = uni.createCanvasContext('firstCanvas')
|
||||
context.setStrokeStyle("#00ff00")
|
||||
context.setLineWidth(5)
|
||||
context.rect(0, 0, 200, 200)
|
||||
context.stroke()
|
||||
context.setStrokeStyle("#ff0000")
|
||||
context.setLineWidth(2)
|
||||
context.moveTo(160, 100)
|
||||
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
|
||||
context.moveTo(140, 100)
|
||||
context.arc(100, 100, 40, 0, Math.PI, false)
|
||||
context.moveTo(85, 80)
|
||||
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
|
||||
context.moveTo(125, 80)
|
||||
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
|
||||
context.stroke()
|
||||
context.draw()
|
||||
},
|
||||
methods: {
|
||||
canvasIdErrorCallback: function (e) {
|
||||
console.error(e.detail.errMsg)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/canvas.html)
|
||||
@@ -0,0 +1,198 @@
|
||||
# checkbox
|
||||
|
||||
## Instructions
|
||||
|
||||
多选框组
|
||||
|
||||
属性说明
|
||||
|
||||
多选项。在1组check-group中可选择多个
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<checkbox />`（或 `<checkbox></checkbox>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
See official docs for full properties list: `https://doc.dcloud.net.cn/uni-app-x/component/checkbox.html`
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @change | EventHandle | | <checkbox-group> 中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/checkbox.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">默认样式</view>
|
||||
<view>
|
||||
<checkbox-group>
|
||||
<label>
|
||||
<checkbox value="cb" :checked="true" />选中
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="cb" />未选中
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
|
||||
<view>
|
||||
<checkbox-group>
|
||||
<label>
|
||||
<checkbox value="cb" :checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title uni-common-mt">
|
||||
推荐展示样式
|
||||
<text>\n使用 uni-list 布局</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-list">
|
||||
<checkbox-group @change="checkboxChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
|
||||
<view>
|
||||
<checkbox :value="item.value" :checked="item.checked" />
|
||||
</view>
|
||||
<view>{{item.name}}</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">默认样式</view>
|
||||
<view>
|
||||
<checkbox-group>
|
||||
<label>
|
||||
<checkbox value="cb" :checked="true" />选中
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="cb" />未选中
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
|
||||
<view>
|
||||
<checkbox-group>
|
||||
<label>
|
||||
<checkbox value="cb" :checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title uni-common-mt">
|
||||
推荐展示样式
|
||||
<text>\n使用 uni-list 布局</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-list">
|
||||
<checkbox-group @change="checkboxChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
|
||||
<view>
|
||||
<checkbox :value="item.value" :checked="item.checked" />
|
||||
</view>
|
||||
<view>{{item.name}}</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'checkbox 复选框',
|
||||
items: [{
|
||||
value: 'USA',
|
||||
name: '美国'
|
||||
},
|
||||
{
|
||||
value: 'CHN',
|
||||
name: '中国',
|
||||
checked: 'true'
|
||||
},
|
||||
{
|
||||
value: 'BRA',
|
||||
name: '巴西'
|
||||
},
|
||||
{
|
||||
value: 'JPN',
|
||||
name: '日本'
|
||||
},
|
||||
{
|
||||
value: 'ENG',
|
||||
name: '英国'
|
||||
},
|
||||
{
|
||||
value: 'FRA',
|
||||
name: '法国'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkboxChange: function (e) {
|
||||
var items = this.items,
|
||||
values = e.detail.value;
|
||||
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
||||
const item = items[i]
|
||||
if(values.includes(item.value)){
|
||||
this.$set(item,'checked',true)
|
||||
}else{
|
||||
this.$set(item,'checked',false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<style>
|
||||
.uni-list-cell {
|
||||
justify-content: flex-start
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/checkbox.html)
|
||||
@@ -0,0 +1,138 @@
|
||||
# cover-image
|
||||
|
||||
## Instructions
|
||||
|
||||
覆盖在原生组件上的图片视图。可覆盖的原生组件同 cover-view ，支持嵌套在 cover-view 里。
|
||||
|
||||
平台差异说明
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<cover-image />`（或 `<cover-image></cover-image>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| src | String | | 图标路径。支持本地路径、网络路径。不支持 base64 格式。 | |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @load | eventhandle | | 图片加载成功时触发 | 微信小程序 2.1.0、百度小程序、QQ小程序、快手小程序、京东小程序 |
|
||||
| @error | eventhandle | | 图片加载失败时触发 | 微信小程序 2.1.0、百度小程序、QQ小程序、快手小程序、京东小程序 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/cover-image.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view class="page">
|
||||
<video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="true" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v">
|
||||
<cover-view class="controls-title">简单的自定义 controls</cover-view>
|
||||
<cover-image class="controls-play img" @click="play" src="/static/play.png"></cover-image>
|
||||
<cover-image class="controls-pause img" @click="pause" src="/static/pause.png"></cover-image>
|
||||
</video>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view class="page">
|
||||
<video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="true" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v">
|
||||
<cover-view class="controls-title">简单的自定义 controls</cover-view>
|
||||
<cover-image class="controls-play img" @click="play" src="/static/play.png"></cover-image>
|
||||
<cover-image class="controls-pause img" @click="pause" src="/static/pause.png"></cover-image>
|
||||
</video>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
this.videoCtx = uni.createVideoContext('demoVideo')
|
||||
},
|
||||
methods: {
|
||||
play(event) {
|
||||
this.videoCtx.play();
|
||||
uni.showToast({
|
||||
title: '开始播放',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
pause(event) {
|
||||
this.videoCtx.pause();
|
||||
uni.showToast({
|
||||
title: '暂停播放',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<style>
|
||||
.page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.video {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
cover-view,
|
||||
cover-image {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.img {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
top: 50%;
|
||||
margin-top: -50rpx;
|
||||
}
|
||||
|
||||
.controls-play {
|
||||
left: 50rpx;
|
||||
}
|
||||
|
||||
.controls-pause {
|
||||
right: 50rpx;
|
||||
}
|
||||
|
||||
.controls-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/cover-image.html)
|
||||
@@ -0,0 +1,34 @@
|
||||
# cover-view
|
||||
|
||||
## Instructions
|
||||
|
||||
覆盖在原生组件上的文本视图。
|
||||
|
||||
app-vue和小程序框架，渲染引擎是webview的。但为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。为了能正常覆盖原生组件，设计了cover-view。
|
||||
|
||||
平台差异说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<cover-view />`（或 `<cover-view></cover-view>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| scroll-top | number/string | | 设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效 | 支付宝小程序不支持 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://doc.dcloud.net.cn/uni-app-x/component/cover-view.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/cover-view.html`
|
||||
|
||||
### Examples
|
||||
|
||||
Examples are available in the official docs: `https://doc.dcloud.net.cn/uni-app-x/component/cover-view.html`
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/cover-view.html)
|
||||
@@ -0,0 +1,58 @@
|
||||
# custom-tab-bar
|
||||
|
||||
## Instructions
|
||||
|
||||
自定义tabBar组件。
|
||||
|
||||
在小程序和App端，为提升性能，在 pages.json 里配置固定的原生tabBar。但在H5端，这一设计并不会提升性能。
|
||||
|
||||
同时，H5端尤其是PC宽屏，对tabBar的位置和样式有更灵活的需求，tabBar作为一级导航，更多的时候是在PC网页顶部而不是底部。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<custom-tab-bar />`（或 `<custom-tab-bar></custom-tab-bar>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| direction | String | horizontal | 选项的排列方向 可选值：horizontal，vertical |
|
||||
| show-icon | Boolean | false | 是否显示icon |
|
||||
| selected | Number | 0 | 选中的tabBar选项索引值 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| onTabItemTap | EventHandle | | 点击事件，参数为Object，具体见下表 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/custom-tab-bar.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中的 top-window 查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<custom-tab-bar direction="horizontal" :show-icon="false" :selected="selected" @onTabItemTap="onTabItemTap" />
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中的 top-window 查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<custom-tab-bar direction="horizontal" :show-icon="false" :selected="selected" @onTabItemTap="onTabItemTap" />
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/custom-tab-bar.html)
|
||||
@@ -0,0 +1,252 @@
|
||||
# editor
|
||||
|
||||
## Instructions
|
||||
|
||||
富文本编辑器，可以对图片、文字格式进行编辑和混排。
|
||||
|
||||
在web开发时，可以使用 contenteditable 来实现内容编辑。但这是一个dom API，在非H5平台无法使用。于是微信小程序和uni-app的App-vue提供了 editor 组件来实现这个功能，并且在uni-app的H5平台也提供了兼容。从技术本质来讲，这个组件仍然运行在视图层webview中，利用的也是浏览器的 contenteditable 功能。
|
||||
|
||||
编辑器导出内容支持带标签的 html 和纯文本的 text ，编辑器内部采用 delta 格式进行存储。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<editor />`（或 `<editor></editor>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| read-only | boolean | false | 否 | 设置编辑器为只读 |
|
||||
| placeholder | string | | 否 | 提示信息 |
|
||||
| show-img-size | boolean | false | 否 | 点击图片时显示图片大小控件 |
|
||||
| show-img-toolbar | boolean | false | 否 | 点击图片时显示工具栏控件 |
|
||||
| show-img-resize | boolean | false | 否 | 点击图片时显示修改尺寸控件 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 必填 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @ready | eventhandle | | 否 | 编辑器初始化完成时触发 |
|
||||
| @focus | eventhandle | | 否 | 编辑器聚焦时触发，event.detail = {html, text, delta} |
|
||||
| @blur | eventhandle | | 否 | 编辑器失去焦点时触发，detail = {html, text, delta} |
|
||||
| @input | eventhandle | | 否 | 编辑器内容改变时触发，detail = {html, text, delta} |
|
||||
| @statuschange | eventhandle | | 否 | 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/editor.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<head>
|
||||
<script src="/static/quill-1.3.7.min.js"></script>
|
||||
<script src="/static/image-resize-3.0.1.min.js"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<head>
|
||||
<script src="/static/quill-1.3.7.min.js"></script>
|
||||
<script src="/static/image-resize-3.0.1.min.js"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
// #ifdef H5
|
||||
import quill from "quill";
|
||||
window.Quill = quill;
|
||||
// #endif
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
// #ifdef H5
|
||||
import quill from "quill";
|
||||
window.Quill = quill;
|
||||
// #endif
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="page-body">
|
||||
<view class='wrapper'>
|
||||
<view class='toolbar' @tap="format" style="height: 120px;overflow-y: auto;">
|
||||
<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold">
|
||||
</view>
|
||||
<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic">
|
||||
</view>
|
||||
<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
|
||||
data-name="underline"></view>
|
||||
<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
|
||||
data-name="strike"></view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
|
||||
data-name="align" data-value="left"></view>
|
||||
<!-- #endif -->
|
||||
<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
|
||||
data-name="align" data-value="center"></view>
|
||||
<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
|
||||
data-name="align" data-value="right"></view>
|
||||
<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"
|
||||
data-name="align" data-value="justify"></view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height"
|
||||
data-name="lineHeight" data-value="2"></view>
|
||||
<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing"
|
||||
data-name="letterSpacing" data-value="2em"></view>
|
||||
<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju"
|
||||
data-name="marginTop" data-value="20px"></view>
|
||||
<view :class="formats.marginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju"
|
||||
data-name="marginBottom" data-value="20px"></view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
|
||||
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
|
||||
data-name="fontFamily" data-value="Pacifico"></view>
|
||||
<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize"
|
||||
data-name="fontSize" data-value="24px"></view>
|
||||
<!-- #endif -->
|
||||
<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color"
|
||||
data-name="color" data-value="#0000ff"></view>
|
||||
<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
|
||||
class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view>
|
||||
<view class="iconfont icon-date" @tap="insertDate"></view>
|
||||
<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
|
||||
<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
|
||||
data-name="list" data-value="ordered"></view>
|
||||
<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
|
||||
data-name="list" data-value="bullet"></view>
|
||||
|
||||
<view class="iconfont icon-undo" @tap="undo"></view>
|
||||
<view class="iconfont icon-redo" @tap="redo"></view>
|
||||
|
||||
<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
|
||||
<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
|
||||
<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
|
||||
<view class="iconfont icon-charutupian" @tap="insertImage"></view>
|
||||
<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1"
|
||||
data-name="header" :data-value="1"></view>
|
||||
<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao"
|
||||
data-name="script" data-value="sub"></view>
|
||||
<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao"
|
||||
data-name="script" data-value="super"></view>
|
||||
|
||||
<view class="iconfont icon-shanchu" @tap="clear"></view>
|
||||
|
||||
<view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl"
|
||||
data-name="direction" data-value="rtl"></view>
|
||||
</view>
|
||||
|
||||
<view class="editor-wrapper">
|
||||
<editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size show-img-toolbar
|
||||
show-img-resize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady">
|
||||
</editor>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="page-body">
|
||||
<view class='wrapper'>
|
||||
<view class='toolbar' @tap="format" style="height: 120px;overflow-y: auto;">
|
||||
<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold">
|
||||
</view>
|
||||
<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic">
|
||||
</view>
|
||||
<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
|
||||
data-name="underline"></view>
|
||||
<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
|
||||
data-name="strike"></view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
|
||||
data-name="align" data-value="left"></view>
|
||||
<!-- #endif -->
|
||||
<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
|
||||
data-name="align" data-value="center"></view>
|
||||
<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
|
||||
data-name="align" data-value="right"></view>
|
||||
<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"
|
||||
data-name="align" data-value="justify"></view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height"
|
||||
data-name="lineHeight" data-value="2"></view>
|
||||
<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing"
|
||||
data-name="letterSpacing" data-value="2em"></view>
|
||||
<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju"
|
||||
data-name="marginTop" data-value="20px"></view>
|
||||
<view :class="formats.marginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju"
|
||||
data-name="marginBottom" data-value="20px"></view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
|
||||
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
|
||||
data-name="fontFamily" data-value="Pacifico"></view>
|
||||
<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize"
|
||||
data-name="fontSize" data-value="24px"></view>
|
||||
<!-- #endif -->
|
||||
<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color"
|
||||
data-name="color" data-value="#0000ff"></view>
|
||||
<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
|
||||
class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view>
|
||||
<view class="iconfont icon-date" @tap="insertDate"></view>
|
||||
<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
|
||||
<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
|
||||
data-name="list" data-value="ordered"></view>
|
||||
<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
|
||||
data-name="list" data-value="bullet"></view>
|
||||
|
||||
<view class="iconfont icon-undo" @tap="undo"></view>
|
||||
<view class="iconfont icon-redo" @tap="redo"></view>
|
||||
|
||||
<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
|
||||
<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
|
||||
<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
|
||||
<view class="iconfont icon-charutupian" @tap="insertImage"></view>
|
||||
<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1"
|
||||
data-name="header" :data-value="1"></view>
|
||||
<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao"
|
||||
data-name="script" data-value="sub"></view>
|
||||
<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao"
|
||||
data-name="script" data-value="super"></view>
|
||||
|
||||
<view class="iconfont icon-shanchu" @tap="clear"></view>
|
||||
|
||||
<view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl"
|
||||
data-name="direction" data-value="rtl"></view>
|
||||
</view>
|
||||
|
||||
<view class="editor-wrapper">
|
||||
<editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size show-img-toolbar
|
||||
show-img-resize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady">
|
||||
</editor>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/editor.html)
|
||||
@@ -0,0 +1,238 @@
|
||||
# form
|
||||
|
||||
## Instructions
|
||||
|
||||
表单，将组件内的用户输入的 <switch> <input> <checkbox> <slider> <radio> <picker> 提交。
|
||||
|
||||
当点击 <form> 表单中 formType 为 submit 的 <button> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<form />`（或 `<form></form>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| report-submit | Boolean | 是否返回 formId 用于发送 模板消息 | 微信小程序、支付宝小程序 |
|
||||
| report-submit-timeout | number | 等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId | 微信小程序2.6.2 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @submit | EventHandle | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}，report-submit 为 true 时才会返回 formId | |
|
||||
| @reset | EventHandle | 表单重置时会触发 reset 事件 | |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/form.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view>
|
||||
<form @submit="formSubmit" @reset="formReset">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">switch</view>
|
||||
<view>
|
||||
<switch name="switch" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">radio</view>
|
||||
<radio-group name="radio">
|
||||
<label>
|
||||
<radio value="radio1" /><text>选项一</text>
|
||||
</label>
|
||||
<label>
|
||||
<radio value="radio2" /><text>选项二</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">checkbox</view>
|
||||
<checkbox-group name="checkbox">
|
||||
<label>
|
||||
<checkbox value="checkbox1" /><text>选项一</text>
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="checkbox2" /><text>选项二</text>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">slider</view>
|
||||
<slider value="50" name="slider" show-value></slider>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">input</view>
|
||||
<input class="uni-input" name="input" placeholder="这是一个输入框" />
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button form-type="submit">Submit</button>
|
||||
<button type="default" form-type="reset">Reset</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view>
|
||||
<form @submit="formSubmit" @reset="formReset">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">switch</view>
|
||||
<view>
|
||||
<switch name="switch" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">radio</view>
|
||||
<radio-group name="radio">
|
||||
<label>
|
||||
<radio value="radio1" /><text>选项一</text>
|
||||
</label>
|
||||
<label>
|
||||
<radio value="radio2" /><text>选项二</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">checkbox</view>
|
||||
<checkbox-group name="checkbox">
|
||||
<label>
|
||||
<checkbox value="checkbox1" /><text>选项一</text>
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="checkbox2" /><text>选项二</text>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">slider</view>
|
||||
<slider value="50" name="slider" show-value></slider>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">input</view>
|
||||
<input class="uni-input" name="input" placeholder="这是一个输入框" />
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button form-type="submit">Submit</button>
|
||||
<button type="default" form-type="reset">Reset</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formSubmit: function(e) {
|
||||
console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
|
||||
var formdata = e.detail.value
|
||||
uni.showModal({
|
||||
content: '表单数据内容：' + JSON.stringify(formdata),
|
||||
showCancel: false
|
||||
});
|
||||
},
|
||||
formReset: function(e) {
|
||||
console.log('清空数据')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<style>
|
||||
.uni-form-item .title {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<!-- /pages/index/index.vue -->
|
||||
<template>
|
||||
<view class="content">
|
||||
<form @submit="onSubmit">
|
||||
<compInput name="test" v-model="testValue"></compInput>
|
||||
<button form-type="submit">Submit</button>
|
||||
</form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
testValue: 'Hello'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit(e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<!-- /pages/index/index.vue -->
|
||||
<template>
|
||||
<view class="content">
|
||||
<form @submit="onSubmit">
|
||||
<compInput name="test" v-model="testValue"></compInput>
|
||||
<button form-type="submit">Submit</button>
|
||||
</form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
testValue: 'Hello'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit(e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/form.html)
|
||||
@@ -0,0 +1,99 @@
|
||||
# icon
|
||||
|
||||
## Instructions
|
||||
|
||||
图标。
|
||||
|
||||
平台差异说明
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<icon />`（或 `<icon></icon>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| type | String | | icon的类型 |
|
||||
| size | Number | 23 | icon的大小，单位px |
|
||||
| color | Color | | icon的颜色，同css的color |
|
||||
| view-box | number | 1024 | 小红书小程序 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://doc.dcloud.net.cn/uni-app-x/component/icon.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/icon.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<view class="item" v-for="(value,index) in iconType" :key="index">
|
||||
<icon :type="value" size="26"/>
|
||||
<text>{{value}}</text>
|
||||
</view>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<view class="item" v-for="(value,index) in iconType" :key="index">
|
||||
<icon :type="value" size="26"/>
|
||||
<text>{{value}}</text>
|
||||
</view>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
iconType: ['success']
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef APP-PLUS|| MP-WEIXIN
|
||||
this.iconType = ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search','clear']
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
this.iconType = ['info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear', 'success', 'success_no_circle', 'loading']
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU
|
||||
this.iconType = ['success', 'info', 'warn', 'waiting', 'success_no_circle', 'clear', 'search', 'personal', 'setting', 'top', 'close', 'cancel', 'download', 'checkboxSelected', 'radioSelected', 'radioUnselect']
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
iconType: ['success']
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef APP-PLUS|| MP-WEIXIN
|
||||
this.iconType = ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search','clear']
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
this.iconType = ['info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear', 'success', 'success_no_circle', 'loading']
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU
|
||||
this.iconType = ['success', 'info', 'warn', 'waiting', 'success_no_circle', 'clear', 'search', 'personal', 'setting', 'top', 'close', 'cancel', 'download', 'checkboxSelected', 'radioSelected', 'radioUnselect']
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/icon.html)
|
||||
@@ -0,0 +1,133 @@
|
||||
# # image
|
||||
|
||||
## Instructions
|
||||
|
||||
图片需要上传？推荐 uni-cdn ，帮你节省至少30%的 CDN 费用！ 详情 。
|
||||
|
||||
HarmonyOS
|
||||
|
||||
图片组件。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<image />`（或 `<image></image>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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、抖音小程序2.90.0 |
|
||||
| show-menu-by-longpress | boolean | false | 开启长按图片显示识别小程序码菜单 | 微信小程序2.7.0 |
|
||||
| draggable | boolean | false | 是否能拖动图片 | H5 3.1.1+、App（iOS15+） |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @error | HandleEvent | | 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'} | |
|
||||
| @load | HandleEvent | | 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'} | |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/image.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="image-list">
|
||||
<view class="image-item" v-for="(item,index) in array" :key="index">
|
||||
<view class="image-content">
|
||||
<image style="width: 200px; height: 200px; background-color: #eeeeee;" :mode="item.mode" :src="src"
|
||||
@error="imageError"></image>
|
||||
</view>
|
||||
<view class="image-title">{{item.text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="image-list">
|
||||
<view class="image-item" v-for="(item,index) in array" :key="index">
|
||||
<view class="image-content">
|
||||
<image style="width: 200px; height: 200px; background-color: #eeeeee;" :mode="item.mode" :src="src"
|
||||
@error="imageError"></image>
|
||||
</view>
|
||||
<view class="image-title">{{item.text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
array: [{
|
||||
mode: 'scaleToFill',
|
||||
text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
|
||||
}, {
|
||||
mode: 'aspectFit',
|
||||
text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
|
||||
}, {
|
||||
mode: 'aspectFill',
|
||||
text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
|
||||
}, {
|
||||
mode: 'top',
|
||||
text: 'top：不缩放图片，只显示图片的顶部区域'
|
||||
}, {
|
||||
mode: 'bottom',
|
||||
text: 'bottom：不缩放图片，只显示图片的底部区域'
|
||||
}, {
|
||||
mode: 'center',
|
||||
text: 'center：不缩放图片，只显示图片的中间区域'
|
||||
}, {
|
||||
mode: 'left',
|
||||
text: 'left：不缩放图片，只显示图片的左边区域'
|
||||
}, {
|
||||
mode: 'right',
|
||||
text: 'right：不缩放图片，只显示图片的右边边区域'
|
||||
}, {
|
||||
mode: 'top left',
|
||||
text: 'top left：不缩放图片，只显示图片的左上边区域'
|
||||
}, {
|
||||
mode: 'top right',
|
||||
text: 'top right：不缩放图片，只显示图片的右上边区域'
|
||||
}, {
|
||||
mode: 'bottom left',
|
||||
text: 'bottom left：不缩放图片，只显示图片的左下边区域'
|
||||
}, {
|
||||
mode: 'bottom right',
|
||||
text: 'bottom right：不缩放图片，只显示图片的右下边区域'
|
||||
}],
|
||||
src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
imageError: function(e) {
|
||||
console.error('image发生error事件，携带值为' + e.detail.errMsg)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/image.html)
|
||||
@@ -0,0 +1,133 @@
|
||||
# input
|
||||
|
||||
## Instructions
|
||||
|
||||
单行输入框。
|
||||
|
||||
html规范中input不仅是输入框，还有radio、checkbox、时间、日期、文件选择功能。在uni-app规范中，input仅仅是输入框。其他功能uni-app有单独的组件或API： radio组件 、 checkbox组件 、 时间选择 、 日期选择 、 图片选择 、 视频选择 、 多媒体文件选择(含图片视频) 、 通用文件选择 。
|
||||
|
||||
注意事项
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<input />`（或 `<input></input>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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+ |
|
||||
| ignoreCompositionEvent | Boolean | true | 是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件 | App-vue (3.4.4+)、H5 (3.4.4+)、App-nvue不支持 |
|
||||
| always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | 微信小程序 2.10.4+ |
|
||||
| hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | 微信小程序 2.8.2+ |
|
||||
| safe-password-cert-path | String | | 安全键盘加密公钥的路径，只支持包内路径 | 微信小程序 2.18.0+ |
|
||||
| safe-password-length | Number | | 安全键盘输入密码长度 | 微信小程序 2.18.0+ |
|
||||
| safe-password-time-stamp | Number | | 安全键盘加密时间戳 | 微信小程序 2.18.0+ |
|
||||
| safe-password-nonce | String | | 安全键盘加密盐值 | 微信小程序 2.18.0+ |
|
||||
| safe-password-salt | String | | 安全键盘计算 hash 盐值，若指定custom-hash 则无效 | 微信小程序 2.18.0+ |
|
||||
| safe-password-custom-hash | String | | 安全键盘计算 hash 的算法表达式，如 md5(sha1('foo' + sha256(sm3(password + 'bar')))) | 微信小程序 2.18.0+ |
|
||||
| random-number | Boolean | false | 当 type 为 number, digit, idcard 数字键盘是否随机排列 | 支付宝小程序 1.9.0+ |
|
||||
| controlled | Boolean | false | 是否为受控组件。为 true 时，value 内容会完全受 setData 控制 | 支付宝小程序 1.9.0+ |
|
||||
| always-system | Boolean | false | 是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效 | 支付宝小程序 2.7.3+ |
|
||||
| inputmode | String | "text" | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。 有效值 | H5（3.6.16+）、App-vue（3.6.16+） |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @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} | |
|
||||
| @keyboardheightchange | eventhandle | | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} | 微信小程序基础库2.7.0+、App 3.1.0+ |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
| 值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- |
|
||||
| text | 文本输入键盘 | |
|
||||
| number | 数字输入键盘 | 均支持，App平台、H5平台 3.1.22 以下版本 vue 页面在 iOS 平台显示的键盘包含负数和小数。 |
|
||||
| idcard | 身份证输入键盘 | 微信、支付宝、百度、QQ小程序、快手小程序、京东小程序 |
|
||||
| digit | 带小数点的数字键盘 | 均支持，App平台、H5平台 vue 页面在 iOS 平台显示的键盘包含负数（原生键盘不支持负号）。 |
|
||||
| tel | 电话输入键盘 | 小红书小程序不支持 |
|
||||
| safe-password | 密码安全输入键盘 | 微信小程序 |
|
||||
| nickname | 昵称输入键盘 | 微信小程序 |
|
||||
| none | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 | H5 (5.0+)、App (5.0+) |
|
||||
| decimal | 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键 | H5 (5.0+)、App (5.0+) |
|
||||
| numeric | 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 | H5 (5.0+)、App (5.0+) |
|
||||
| search | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 | H5 (5.0+)、App (5.0+) |
|
||||
| email | 为邮件地址输入优化的虚拟键盘，通常包含""符号和其他优化。表单里面的邮件地址输入应该使用 。 | H5 (5.0+)、App (5.0+) |
|
||||
| url | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 。 | H5 (5.0+)、App (5.0+) |
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
"app-plus": {
|
||||
"softinputNavBar": "none"
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```javascript
|
||||
"app-plus": {
|
||||
"softinputNavBar": "none"
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
this.$scope.$getAppWebview().setStyle({
|
||||
softinputNavBar: 'none'
|
||||
})
|
||||
//this.$scope.$getAppWebview()相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
this.$scope.$getAppWebview().setStyle({
|
||||
softinputNavBar: 'none'
|
||||
})
|
||||
//this.$scope.$getAppWebview()相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
"app-plus": {
|
||||
"softinputMode": "adjustResize"
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```javascript
|
||||
"app-plus": {
|
||||
"softinputMode": "adjustResize"
|
||||
}
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/input.html)
|
||||
@@ -0,0 +1,201 @@
|
||||
# label
|
||||
|
||||
## Instructions
|
||||
|
||||
用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。
|
||||
|
||||
for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
|
||||
|
||||
目前可以绑定的控件有： <button> , <checkbox> , <radio> , <switch> 。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<label />`（或 `<label></label>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| for | String | 绑定控件的 id |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://doc.dcloud.net.cn/uni-app-x/component/label.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/label.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-common-mt">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">表单组件在label内</view>
|
||||
<checkbox-group class="uni-list" @change="checkboxChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in checkboxItems" :key="item.name">
|
||||
<view>
|
||||
<checkbox :value="item.name" :checked="item.checked"></checkbox>
|
||||
</view>
|
||||
<view>{{item.value}}</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">label用for标识表单组件</view>
|
||||
<radio-group class="uni-list" @change="radioChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index">
|
||||
<view>
|
||||
<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
|
||||
</view>
|
||||
<view>
|
||||
<label class="label-2-text" :for="item.name">
|
||||
<text>{{item.value}}</text>
|
||||
</label>
|
||||
</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">label内有多个时选中第一个</view>
|
||||
<checkbox-group class="uni-list" @change="checkboxChange">
|
||||
<label class="label-3">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<checkbox class="checkbox-3">选项一</checkbox>
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<checkbox class="checkbox-3">选项二</checkbox>
|
||||
</view>
|
||||
<view class="uni-link uni-center" style="margin-top:20rpx;">点击该label下的文字默认选中第一个checkbox</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-common-mt">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">表单组件在label内</view>
|
||||
<checkbox-group class="uni-list" @change="checkboxChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in checkboxItems" :key="item.name">
|
||||
<view>
|
||||
<checkbox :value="item.name" :checked="item.checked"></checkbox>
|
||||
</view>
|
||||
<view>{{item.value}}</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">label用for标识表单组件</view>
|
||||
<radio-group class="uni-list" @change="radioChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index">
|
||||
<view>
|
||||
<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
|
||||
</view>
|
||||
<view>
|
||||
<label class="label-2-text" :for="item.name">
|
||||
<text>{{item.value}}</text>
|
||||
</label>
|
||||
</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">label内有多个时选中第一个</view>
|
||||
<checkbox-group class="uni-list" @change="checkboxChange">
|
||||
<label class="label-3">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<checkbox class="checkbox-3">选项一</checkbox>
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<checkbox class="checkbox-3">选项二</checkbox>
|
||||
</view>
|
||||
<view class="uni-link uni-center" style="margin-top:20rpx;">点击该label下的文字默认选中第一个checkbox</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkboxItems: [{
|
||||
name: 'USA',
|
||||
value: '美国'
|
||||
},
|
||||
{
|
||||
name: 'CHN',
|
||||
value: '中国',
|
||||
checked: 'true'
|
||||
}
|
||||
],
|
||||
radioItems: [{
|
||||
name: 'USA',
|
||||
value: '美国'
|
||||
},
|
||||
{
|
||||
name: 'CHN',
|
||||
value: '中国',
|
||||
checked: 'true'
|
||||
}
|
||||
],
|
||||
hidden: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkboxChange: function(e) {
|
||||
console.log(e)
|
||||
var checked = e.target.value
|
||||
var changed = {}
|
||||
for (var i = 0; i < this.checkboxItems.length; i++) {
|
||||
if (checked.indexOf(this.checkboxItems[i].name) !== -1) {
|
||||
changed['checkboxItems[' + i + '].checked'] = true
|
||||
} else {
|
||||
changed['checkboxItems[' + i + '].checked'] = false
|
||||
}
|
||||
}
|
||||
},
|
||||
radioChange: function(e) {
|
||||
var checked = e.target.value
|
||||
var changed = {}
|
||||
for (var i = 0; i < this.radioItems.length; i++) {
|
||||
if (checked.indexOf(this.radioItems[i].name) !== -1) {
|
||||
changed['radioItems[' + i + '].checked'] = true
|
||||
} else {
|
||||
changed['radioItems[' + i + '].checked'] = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/label.html)
|
||||
@@ -0,0 +1,104 @@
|
||||
# live-player
|
||||
|
||||
## Instructions
|
||||
|
||||
推荐 uni直播 ，官方内置，使用简单，且价格便宜，更具高性价比！ 详情 。
|
||||
|
||||
实时音视频播放，也称直播拉流。
|
||||
|
||||
使用live-player 组件需注意：如果发布到小程序，需要先通过各家小程序的审核。指定类目的小程序才能使用（ 微信小程序类目 、 百度小程序类目 ），审核通过后在各家小程序管理后台自助开通该组件权限。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<live-player />`（或 `<live-player></live-player>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| id | String | | live-player 属性的唯一标志符 | |
|
||||
| src | String | | 音视频地址。百度小程序支持 m3u8 格式；微信小程序支持 flv, rtmp 格式 | |
|
||||
| mode | String | live | live（直播），RTC（实时通话，该模式时延更低） | 微信小程序 |
|
||||
| autoplay | Boolean | false | 自动播放 | |
|
||||
| muted | Boolean | false | 是否静音 | |
|
||||
| orientation | String | vertical | 画面方向，可选值有 vertical，horizontal | |
|
||||
| object-fit | String | contain | 填充模式，可选值:contain、fillCrop | |
|
||||
| background-mute | Boolean | false | 进入后台时是否静音 | |
|
||||
| sound-mode | string | speaker | 声音输出方式;可选值speaker、ear | 微信小程序、QQ小程序1.5.0（仅支持speaker） |
|
||||
| min-cache | Number | 1 | 最小缓冲区，单位s | |
|
||||
| max-cache | Number | 3 | 最大缓冲区，单位s | |
|
||||
| picture-in-picture-mode | string/Array | 3 | 设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： ["push", "pop"]） | 微信小程序（2.10.3） |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @statechange | EventHandle | | 播放状态变化事件，detail = {code} | |
|
||||
| @netstatus | EventHandle | | 网络状态通知，detail = {info} | |
|
||||
| @fullscreenchange | EventHandle | | 全屏变化事件，detail = {direction, fullScreen}。 | |
|
||||
| @audiovolumenotify | EventHandle | | 播放音量大小通知，detail = {} | 微信小程序（2.10.0） |
|
||||
| @enterpictureinpicture | EventHandle | | 播放器进入小窗 | 微信小程序（2.11.0） |
|
||||
| @leavepictureinpicture | EventHandle | | 播放器退出小窗 | 2.11.0 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/live-player.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<live-player
|
||||
src="https://domain/pull_stream"
|
||||
autoplay
|
||||
@statechange="statechange"
|
||||
@error="error"
|
||||
style="width: 300px; height: 225px;"
|
||||
/>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<live-player
|
||||
src="https://domain/pull_stream"
|
||||
autoplay
|
||||
@statechange="statechange"
|
||||
@error="error"
|
||||
style="width: 300px; height: 225px;"
|
||||
/>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
methods:{
|
||||
statechange(e){
|
||||
console.log('live-player code:', e.detail.code)
|
||||
},
|
||||
error(e){
|
||||
console.error('live-player error:', e.detail.errMsg)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods:{
|
||||
statechange(e){
|
||||
console.log('live-player code:', e.detail.code)
|
||||
},
|
||||
error(e){
|
||||
console.error('live-player error:', e.detail.errMsg)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/live-player.html)
|
||||
@@ -0,0 +1,280 @@
|
||||
# live-pusher
|
||||
|
||||
## Instructions
|
||||
|
||||
推荐 uni直播 ，官方内置，使用简单，且价格便宜，更具高性价比！ 详情 。
|
||||
|
||||
实时音视频录制，也称直播推流。
|
||||
|
||||
平台差异说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<live-pusher />`（或 `<live-pusher></live-pusher>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性 | 类型 | 默认值 | 必填 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| url | string | | 是 | 推流地址，支持RTMP协议。 | |
|
||||
| mode | string | SD | 否 | 推流视频模式，可取值：SD（标清）, HD（高清）, FHD（超清）。 | |
|
||||
| aspect | string | 3:2 | 否 | 视频宽高比例 | |
|
||||
| muted | Boolean | false | 否 | 是否静音。 | |
|
||||
| enable-camera | Boolean | true | 否 | 开启摄像头。 | |
|
||||
| auto-focus | Boolean | true | 否 | 自动聚集。 | |
|
||||
| beauty | Number | 0 | 否 | 美颜，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。 | |
|
||||
| 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 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 参数 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| code | Number | |
|
||||
| message | string | |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/live-pusher.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<live-pusher id='livePusher' ref="livePusher" class="livePusher" url=""
|
||||
mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2"
|
||||
aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error"
|
||||
></live-pusher>
|
||||
<button class="btn" @click="start">开始推流</button>
|
||||
<button class="btn" @click="pause">暂停推流</button>
|
||||
<button class="btn" @click="resume">resume</button>
|
||||
<button class="btn" @click="stop">停止推流</button>
|
||||
<button class="btn" @click="snapshot">快照</button>
|
||||
<button class="btn" @click="startPreview">开启摄像头预览</button>
|
||||
<button class="btn" @click="stopPreview">关闭摄像头预览</button>
|
||||
<button class="btn" @click="switchCamera">切换摄像头</button>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<live-pusher id='livePusher' ref="livePusher" class="livePusher" url=""
|
||||
mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2"
|
||||
aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error"
|
||||
></live-pusher>
|
||||
<button class="btn" @click="start">开始推流</button>
|
||||
<button class="btn" @click="pause">暂停推流</button>
|
||||
<button class="btn" @click="resume">resume</button>
|
||||
<button class="btn" @click="stop">停止推流</button>
|
||||
<button class="btn" @click="snapshot">快照</button>
|
||||
<button class="btn" @click="startPreview">开启摄像头预览</button>
|
||||
<button class="btn" @click="stopPreview">关闭摄像头预览</button>
|
||||
<button class="btn" @click="switchCamera">切换摄像头</button>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onReady() {
|
||||
// 注意：需要在onReady中 或 onLoad 延时
|
||||
this.context = uni.createLivePusherContext("livePusher", this);
|
||||
},
|
||||
methods: {
|
||||
statechange(e) {
|
||||
console.log("statechange:" + JSON.stringify(e));
|
||||
},
|
||||
netstatus(e) {
|
||||
console.log("netstatus:" + JSON.stringify(e));
|
||||
},
|
||||
error(e) {
|
||||
console.log("error:" + JSON.stringify(e));
|
||||
},
|
||||
start: function() {
|
||||
this.context.start({
|
||||
success: (a) => {
|
||||
console.log("livePusher.start:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
close: function() {
|
||||
this.context.close({
|
||||
success: (a) => {
|
||||
console.log("livePusher.close:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
snapshot: function() {
|
||||
this.context.snapshot({
|
||||
success: (e) => {
|
||||
console.log(JSON.stringify(e));
|
||||
}
|
||||
});
|
||||
},
|
||||
resume: function() {
|
||||
this.context.resume({
|
||||
success: (a) => {
|
||||
console.log("livePusher.resume:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
pause: function() {
|
||||
this.context.pause({
|
||||
success: (a) => {
|
||||
console.log("livePusher.pause:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
stop: function() {
|
||||
this.context.stop({
|
||||
success: (a) => {
|
||||
console.log(JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
switchCamera: function() {
|
||||
this.context.switchCamera({
|
||||
success: (a) => {
|
||||
console.log("livePusher.switchCamera:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
startPreview: function() {
|
||||
this.context.startPreview({
|
||||
success: (a) => {
|
||||
console.log("livePusher.startPreview:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
stopPreview: function() {
|
||||
this.context.stopPreview({
|
||||
success: (a) => {
|
||||
console.log("livePusher.stopPreview:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onReady() {
|
||||
// 注意：需要在onReady中 或 onLoad 延时
|
||||
this.context = uni.createLivePusherContext("livePusher", this);
|
||||
},
|
||||
methods: {
|
||||
statechange(e) {
|
||||
console.log("statechange:" + JSON.stringify(e));
|
||||
},
|
||||
netstatus(e) {
|
||||
console.log("netstatus:" + JSON.stringify(e));
|
||||
},
|
||||
error(e) {
|
||||
console.log("error:" + JSON.stringify(e));
|
||||
},
|
||||
start: function() {
|
||||
this.context.start({
|
||||
success: (a) => {
|
||||
console.log("livePusher.start:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
close: function() {
|
||||
this.context.close({
|
||||
success: (a) => {
|
||||
console.log("livePusher.close:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
snapshot: function() {
|
||||
this.context.snapshot({
|
||||
success: (e) => {
|
||||
console.log(JSON.stringify(e));
|
||||
}
|
||||
});
|
||||
},
|
||||
resume: function() {
|
||||
this.context.resume({
|
||||
success: (a) => {
|
||||
console.log("livePusher.resume:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
pause: function() {
|
||||
this.context.pause({
|
||||
success: (a) => {
|
||||
console.log("livePusher.pause:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
stop: function() {
|
||||
this.context.stop({
|
||||
success: (a) => {
|
||||
console.log(JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
switchCamera: function() {
|
||||
this.context.switchCamera({
|
||||
success: (a) => {
|
||||
console.log("livePusher.switchCamera:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
startPreview: function() {
|
||||
this.context.startPreview({
|
||||
success: (a) => {
|
||||
console.log("livePusher.startPreview:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
stopPreview: function() {
|
||||
this.context.stopPreview({
|
||||
success: (a) => {
|
||||
console.log("livePusher.stopPreview:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/live-pusher.html)
|
||||
@@ -0,0 +1,128 @@
|
||||
# map
|
||||
|
||||
## Instructions
|
||||
|
||||
地图组件。
|
||||
|
||||
地图组件用于展示地图，而定位API只是获取坐标，请勿混淆两者。
|
||||
|
||||
平台差异说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<map />`（或 `<map></map>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| longitude | Number | | 中心经度 | |
|
||||
| latitude | Number | | 中心纬度 | |
|
||||
| scale | Number | 16 | 缩放级别，取值范围为3-20 | 高德地图缩放比例与微信小程序不同 |
|
||||
| theme | String | normal | 主题（satellite 或 normal）只在初始化时有效，不能动态变更（仅Android支持） | 京东小程序 |
|
||||
| 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/String | 1 | 个性化地图 | App-nvue 3.1.0+、微信小程序2.13+、小红书小程序 |
|
||||
| markers | Array | | 标记点 | |
|
||||
| polyline | Array | | 路线 | 飞书小程序、小红书小程序不支持 |
|
||||
| circles | Array | | 圆 | 小红书小程序不支持 |
|
||||
| controls | Array | | 控件 | 小红书小程序不支持 |
|
||||
| include-points | Array | | 缩放视野以包含所有给定的坐标点 | App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序、京东小程序 |
|
||||
| zIndex | number | false | 显示层级 | 微信小程序2.3.0 |
|
||||
| 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、小红书小程序 |
|
||||
| rotate | Number | 0 | 旋转角度(范围0-360)地图正北和设备 y 轴角度的夹角 | 微信小程序2.5.0、支付宝小程序、抖音小程序、QQ小程序、小红书小程序 |
|
||||
| skew | Number | 0 | 倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角 | 微信小程序2.5.0、支付宝小程序、抖音小程序、QQ小程序、小红书小程序 |
|
||||
| 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 |
|
||||
| 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（支付宝为: polygon） | Array. <polygon> | | 多边形 | App-nvue 2.1.5+、App-vue 3.4.3+、H5 3.4.3+、微信小程序、百度小程序、支付宝小程序、元服务 |
|
||||
| enable-indoorMap | Boolean | false | 是否展示室内地图 | App-nvue 3.1.0+ |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @markertap | EventHandle | | 点击标记点时触发，e.detail = {markerId} | App-nvue 2.3.3+、H5、微信小程序、支付宝小程序 （App和H5平台需要指定 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-nvue、微信小程序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+ |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/map.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="page-body">
|
||||
<view class="page-section page-section-gap">
|
||||
<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
|
||||
</map>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="page-body">
|
||||
<view class="page-section page-section-gap">
|
||||
<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
|
||||
</map>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id:0, // 使用 marker点击事件 需要填写id
|
||||
title: 'map',
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
covers: [{
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
iconPath: '../../../static/location.png'
|
||||
}, {
|
||||
latitude: 39.90,
|
||||
longitude: 116.39,
|
||||
iconPath: '../../../static/location.png'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/map.html)
|
||||
@@ -0,0 +1,70 @@
|
||||
# match-media
|
||||
|
||||
## Instructions
|
||||
|
||||
media query 匹配检测节点。
|
||||
|
||||
类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。
|
||||
|
||||
例如在match-media组件中放置一个侧边栏，媒体查询规则设置为宽屏才显示，就可以实现在PC宽屏显示该侧边栏，而在手机窄屏中不显示侧边栏的效果。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<match-media />`（或 `<match-media></match-media>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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 ） |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://doc.dcloud.net.cn/uni-app-x/component/match-media.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/match-media.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<match-media :min-width="375" :max-width="800" >
|
||||
<view>当页面最小宽度 375px， 页面宽度最大 800px 时显示</view>
|
||||
</match-media>
|
||||
|
||||
<match-media :min-height="400" :orientation="landscape">
|
||||
<view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
|
||||
</match-media>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<match-media :min-width="375" :max-width="800" >
|
||||
<view>当页面最小宽度 375px， 页面宽度最大 800px 时显示</view>
|
||||
</match-media>
|
||||
|
||||
<match-media :min-height="400" :orientation="landscape">
|
||||
<view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
|
||||
</match-media>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/match-media.html)
|
||||
@@ -0,0 +1,34 @@
|
||||
# movable-area
|
||||
|
||||
## Instructions
|
||||
|
||||
可拖动区域
|
||||
|
||||
由于app和小程序的架构是逻辑层与视图层分离，使用js监听拖动时会引发逻辑层和视图层的频繁通讯，影响性能。为了方便高性能的实现拖动，平台特封装了 movable-area 组件。
|
||||
|
||||
movable-area 指代可拖动的范围，在其中内嵌 movable-view 组件用于指示可拖动的区域。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<movable-area />`（或 `<movable-area></movable-area>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| scale-area | Boolean | false | 当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://doc.dcloud.net.cn/uni-app-x/component/movable-area.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/movable-area.html`
|
||||
|
||||
### Examples
|
||||
|
||||
Examples are available in the official docs: `https://doc.dcloud.net.cn/uni-app-x/component/movable-area.html`
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/movable-area.html)
|
||||
@@ -0,0 +1,138 @@
|
||||
# movable-view
|
||||
|
||||
## Instructions
|
||||
|
||||
可移动的视图容器，在页面中可以拖拽滑动或双指缩放。
|
||||
|
||||
movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。
|
||||
|
||||
平台差异说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<movable-view />`（或 `<movable-view></movable-view>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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.1/0.5 | 定义缩放倍数最小值 | 0.1 倍需要 App(4.51+)、H5(4.51+)、微信小程序(4.51+) |
|
||||
| scale-max | Number | 10 | 定义缩放倍数最大值 | |
|
||||
| scale-value | Number | 1 | 定义缩放倍数，取值范围为 0.1/0.5 - 10 | 0.1 倍需要 App(4.51+)、H5(4.51+)、微信小程序(4.51+) |
|
||||
| animation | Boolean | true | 是否使用动画 | |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @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}， | |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/movable-view.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 1
|
||||
<text>\nmovable-view 区域小于 movable-area</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
|
||||
</movable-area>
|
||||
<view @tap="tap" class="uni-link uni-center uni-common-mt">
|
||||
点击这里移动至 (30px, 30px)
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 2
|
||||
<text>\nmovable-view区域大于movable-area</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view class="max" direction="all">text</movable-view>
|
||||
</movable-area>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 1
|
||||
<text>\nmovable-view 区域小于 movable-area</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
|
||||
</movable-area>
|
||||
<view @tap="tap" class="uni-link uni-center uni-common-mt">
|
||||
点击这里移动至 (30px, 30px)
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 2
|
||||
<text>\nmovable-view区域大于movable-area</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view class="max" direction="all">text</movable-view>
|
||||
</movable-area>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0,
|
||||
old: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tap: function(e) {
|
||||
this.x = this.old.x
|
||||
this.y = this.old.y
|
||||
this.$nextTick(function() {
|
||||
this.x = 30
|
||||
this.y = 30
|
||||
})
|
||||
},
|
||||
onChange: function(e) {
|
||||
this.old.x = e.detail.x
|
||||
this.old.y = e.detail.y
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/movable-view.html)
|
||||
@@ -0,0 +1,131 @@
|
||||
# navigation-bar
|
||||
|
||||
## Instructions
|
||||
|
||||
页面导航条配置节点，用于指定导航栏的一些属性。只能是 page-meta 组件内的第一个节点，需要配合它一同使用。
|
||||
|
||||
平台差异说明
|
||||
|
||||
从HBuilderX 2.9.3起，编译到所有平台均支持 navigation-bar ，但编译到微信时，受微信基础库版本限制；编译到其他平台不受平台版本限制。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<navigation-bar />`（或 `<navigation-bar></navigation-bar>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| title | string | | 否 | 导航条标题 | 微信基础库 2.9.0 |
|
||||
| title-icon | string | | 否 | 标题图标，图标路径如"./img/t.png"，仅支持本地文件路径， 相对路径，相对于当前页面的host位置，固定宽高为逻辑像素值"34px"。 要求图片的宽高相同。 注意：设置标题图标后标题将居左显示。 | App 2.6.7+ |
|
||||
| title-icon-radius | string | 无圆角 | 否 | 标题图标圆角，取值格式为"XXpx"，其中XX为像素值（逻辑像素），如"10px"表示10像素半径圆角。 | App 2.6.7+ |
|
||||
| subtitle-text | string | | 否 | 副标题文字内容，设置副标后将显示两行标题，副标显示在主标题（titleText）下方。 注意：设置副标题后将居左显示 | App 2.6.7+ |
|
||||
| subtitle-size | string | "auto" | 否 | 副标题文字字体大小，字体大小单位为像素，如"14px"表示字体大小为14像素，默认值为12像素。 | App 2.6.7+ |
|
||||
| subtitle-color | string | | 否 | 副标题文字颜色，颜色值格式为"#RRGGBB"和"rgba(R,G,B,A)"，如"#FF0000"表示标题文字颜色为红色。 默认值与主标题文字颜色一致 | App 2.6.7+ |
|
||||
| subtitle-overflow | string | "ellipsis" | 否 | 标题文字超出显示区域时处理方式，可取值： "clip" - 超出显示区域时内容裁剪； "ellipsis" - 超出显示区域时尾部显示省略标记（...）。 | App 2.6.7+ |
|
||||
| title-align | string | "auto" | 否 | 可取值： "center"-居中对齐； "left"-居左对齐； "auto"-根据平台自动选择（Android平台居左对齐，iOS平台居中对齐） | App 2.6.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 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://doc.dcloud.net.cn/uni-app-x/component/navigation-bar.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/navigation-bar.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<page-meta>
|
||||
<navigation-bar
|
||||
:title="nbTitle"
|
||||
:title-icon="titleIcon"
|
||||
:title-icon-radius="titleIconRadius"
|
||||
:subtitle-text="subtitleText"
|
||||
:subtitle-color="nbFrontColor"
|
||||
:loading="nbLoading"
|
||||
:front-color="nbFrontColor"
|
||||
:background-color="nbBackgroundColor"
|
||||
:color-animation-duration="2000"
|
||||
color-animation-timing-func="easeIn"
|
||||
/>
|
||||
</page-meta>
|
||||
<view class="content"></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nbTitle: '标题',
|
||||
titleIcon: '/static/logo.png',
|
||||
titleIconRadius: '20px',
|
||||
subtitleText: 'subtitleText',
|
||||
nbLoading: false,
|
||||
nbFrontColor: '#000000',
|
||||
nbBackgroundColor: '#ffffff'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<page-meta>
|
||||
<navigation-bar
|
||||
:title="nbTitle"
|
||||
:title-icon="titleIcon"
|
||||
:title-icon-radius="titleIconRadius"
|
||||
:subtitle-text="subtitleText"
|
||||
:subtitle-color="nbFrontColor"
|
||||
:loading="nbLoading"
|
||||
:front-color="nbFrontColor"
|
||||
:background-color="nbBackgroundColor"
|
||||
:color-animation-duration="2000"
|
||||
color-animation-timing-func="easeIn"
|
||||
/>
|
||||
</page-meta>
|
||||
<view class="content"></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nbTitle: '标题',
|
||||
titleIcon: '/static/logo.png',
|
||||
titleIconRadius: '20px',
|
||||
subtitleText: 'subtitleText',
|
||||
nbLoading: false,
|
||||
nbFrontColor: '#000000',
|
||||
nbBackgroundColor: '#ffffff'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/navigation-bar.html)
|
||||
@@ -0,0 +1,141 @@
|
||||
# navigator
|
||||
|
||||
## Instructions
|
||||
|
||||
页面跳转。
|
||||
|
||||
该组件类似HTML中的 <a> 组件，但只能跳转本地页面。目标页面必须在pages.json中注册。
|
||||
|
||||
除了组件方式，API方式也可以实现页面跳转，另见： https://uniapp.dcloud.io/api/router?id=navigateto
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<navigator />`（或 `<navigator></navigator>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://doc.dcloud.net.cn/uni-app-x/component/navigator.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
| 值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- |
|
||||
| navigate | 对应 uni.navigateTo 的功能，保留当前页面，跳转到应用内的某个页面 | |
|
||||
| redirect | 对应 uni.redirectTo 的功能，关闭当前页面，跳转到应用内的某个页面 | |
|
||||
| switchTab | 对应 uni.switchTab 的功能，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 | |
|
||||
| reLaunch | 对应 uni.reLaunch 的功能，关闭所有页面，打开到应用内的某个页面 | 抖音小程序与飞书小程序不支持 |
|
||||
| navigateBack | 对应 uni.navigateBack 的功能，关闭当前页面，返回上一页面或多级页面 | |
|
||||
| exit | 退出小程序，target="miniProgram"时生效 | 微信2.1.0+、百度2.5.2+、QQ1.4.7+、小红书小程序 |
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="page-body">
|
||||
<view class="btn-area">
|
||||
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
|
||||
<button type="default">跳转到新页面</button>
|
||||
</navigator>
|
||||
<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
|
||||
<button type="default">在当前页打开</button>
|
||||
</navigator>
|
||||
<navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
|
||||
<button type="default">跳转tab页面</button>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// navigate.vue页面接受参数
|
||||
export default {
|
||||
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
|
||||
console.log(option.id); //打印出上个页面传递的参数。
|
||||
console.log(option.name); //打印出上个页面传递的参数。
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<view class="page-body">
|
||||
<view class="btn-area">
|
||||
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
|
||||
<button type="default">跳转到新页面</button>
|
||||
</navigator>
|
||||
<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
|
||||
<button type="default">在当前页打开</button>
|
||||
</navigator>
|
||||
<navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
|
||||
<button type="default">跳转tab页面</button>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// navigate.vue页面接受参数
|
||||
export default {
|
||||
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
|
||||
console.log(option.id); //打印出上个页面传递的参数。
|
||||
console.log(option.name); //打印出上个页面传递的参数。
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
// navigate.vue页面接受参数
|
||||
onLoad: function (option) {
|
||||
const item = JSON.parse(decodeURIComponent(option.item));
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```javascript
|
||||
// navigate.vue页面接受参数
|
||||
onLoad: function (option) {
|
||||
const item = JSON.parse(decodeURIComponent(option.item));
|
||||
}
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/navigator.html)
|
||||
@@ -0,0 +1,214 @@
|
||||
# page-meta
|
||||
|
||||
## Instructions
|
||||
|
||||
页面属性配置节点，用于指定页面的一些属性、监听页面事件。可部分替代pages.json的功能。
|
||||
|
||||
从微信基础库2.9.0开始，新增了 page-meta 组件，它是一个特殊的标签，有点类似html里的header标签。页面的背景色、原生导航栏的参数，都可以写在 page-meta 里。HBuilderX 2.6.3+ 支持了这个组件，并且全平台都实现了。
|
||||
|
||||
从某种意义讲， page-meta 对pages.json有一定替代作用，可以让页面的配置和页面内容代码写在一个vue文件中。它还可以实现通过变量绑定来控制页面配置。但它的性能不如pages.json的配置，在新页面加载时，渲染速度还是pages.json方式的写法更快。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<page-meta />`（或 `<page-meta></page-meta>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性 | 类型 | 默认值 | 必填 | 说明 | 版本要求/平台差异说明 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| 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、H5 3.7.0、App-vue 3.7.0 |
|
||||
| scroll-duration | number | 300 | 否 | 滚动动画时长 | 微信基础库 2.9.0 |
|
||||
| page-style | string | "" | 否 | 页面根节点样式，页面根节点是所有页面节点的祖先节点，相当于 HTML 中的 body 节点 | 微信基础库 2.9.0 |
|
||||
| root-font-size | string | "" | 否 | 页面的根字体大小，页面中的所有 rem 单位，将使用这个字体大小作为参考值，即 1rem 等于这个字体大小 | 微信基础库 2.9.0 |
|
||||
| enable-pull-down-refresh | Boolean | "" | 否 | 是否开启下拉刷新 | App 2.6.7 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 必填 | 说明 | 版本要求/平台差异说明 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| @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 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/page-meta.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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"
|
||||
>
|
||||
<head>
|
||||
// 仅vue3 ssr支持，此节点下的元素会被拷贝到h5页面的head标签下，可以利用此特性进行seo优化
|
||||
<meta name="keyword" :content="title" />
|
||||
</head>
|
||||
</page-meta>
|
||||
<view class="content"> </view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
};
|
||||
},
|
||||
serverPrefetch() {
|
||||
// 仅vue3版本支持
|
||||
this.keyword = "ServerKeyword";
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<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"
|
||||
>
|
||||
<head>
|
||||
// 仅vue3 ssr支持，此节点下的元素会被拷贝到h5页面的head标签下，可以利用此特性进行seo优化
|
||||
<meta name="keyword" :content="title" />
|
||||
</head>
|
||||
</page-meta>
|
||||
<view class="content"> </view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
};
|
||||
},
|
||||
serverPrefetch() {
|
||||
// 仅vue3版本支持
|
||||
this.keyword = "ServerKeyword";
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<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"
|
||||
>
|
||||
<navigation-bar
|
||||
:title="nbTitle"
|
||||
:loading="nbLoading"
|
||||
:front-color="nbFrontColor"
|
||||
:background-color="nbBackgroundColor"
|
||||
/>
|
||||
</page-meta>
|
||||
<view class="content">
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgTextStyle: 'dark',
|
||||
scrollTop: '200rpx',
|
||||
bgColor: '#ff0000',
|
||||
bgColorTop: '#00ff00',
|
||||
bgColorBottom: '#0000ff',
|
||||
nbTitle: '标题',
|
||||
nbLoading: false,
|
||||
nbFrontColor: '#000000',
|
||||
nbBackgroundColor: '#ffffff'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<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"
|
||||
>
|
||||
<navigation-bar
|
||||
:title="nbTitle"
|
||||
:loading="nbLoading"
|
||||
:front-color="nbFrontColor"
|
||||
:background-color="nbBackgroundColor"
|
||||
/>
|
||||
</page-meta>
|
||||
<view class="content">
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgTextStyle: 'dark',
|
||||
scrollTop: '200rpx',
|
||||
bgColor: '#ff0000',
|
||||
bgColorTop: '#00ff00',
|
||||
bgColorBottom: '#0000ff',
|
||||
nbTitle: '标题',
|
||||
nbLoading: false,
|
||||
nbFrontColor: '#000000',
|
||||
nbBackgroundColor: '#ffffff'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/page-meta.html)
|
||||
@@ -0,0 +1,154 @@
|
||||
# picker-view
|
||||
|
||||
## Instructions
|
||||
|
||||
嵌入页面的滚动选择器。
|
||||
|
||||
相对于 picker 组件， picker-view 拥有更强的灵活性。当需要对自定义选择的弹出方式和UI表现时，往往需要使用 picker-view 。
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<picker-view />`（或 `<picker-view></picker-view>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 平台差异说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| value | Array＜Number＞ | 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。 | |
|
||||
| indicator-style | String | 设置选择器中间选中框的样式 | |
|
||||
| indicator-class | String | 设置选择器中间选中框的类名，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ | app-nvue与抖音小程序与飞书小程序不支持 |
|
||||
| mask-style | String | 设置蒙层的样式 | |
|
||||
| mask-top-style | String | 设置蒙层上半部分的样式（使用 background-image 覆盖） | 仅 app-nvue（3.6.7+） 支持 |
|
||||
| mask-bottom-style | String | 设置蒙层下半部分的样式（使用 background-image 覆盖） | 仅 app-nvue（3.6.7+） 支持 |
|
||||
| mask-class | String | 设置蒙层的类名 | app-nvue与抖音小程序与飞书小程序不支持 |
|
||||
| immediate-change | Boolean | 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。 | 微信小程序 2.21.1 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 平台差异说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @change | EventHandle | 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始） | |
|
||||
| @pickstart | eventhandle | 当滚动选择开始时候触发事件 | 微信小程序2.3.1、快手小程序、小红书小程序 |
|
||||
| @pickend | eventhandle | 当滚动选择结束时候触发事件 | 微信小程序2.3.1、快手小程序、小红书小程序 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/picker-view.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">日期：{{year}}年{{month}}月{{day}}日</view>
|
||||
</view>
|
||||
<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">日期：{{year}}年{{month}}月{{day}}日</view>
|
||||
</view>
|
||||
<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data: function () {
|
||||
const date = new Date()
|
||||
const years = []
|
||||
const year = date.getFullYear()
|
||||
const months = []
|
||||
const month = date.getMonth() + 1
|
||||
const days = []
|
||||
const day = date.getDate()
|
||||
for (let i = 1990; i <= date.getFullYear(); i++) {
|
||||
years.push(i)
|
||||
}
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
months.push(i)
|
||||
}
|
||||
for (let i = 1; i <= 31; i++) {
|
||||
days.push(i)
|
||||
}
|
||||
return {
|
||||
title: 'picker-view',
|
||||
years,
|
||||
year,
|
||||
months,
|
||||
month,
|
||||
days,
|
||||
day,
|
||||
value: [9999, month - 1, day - 1],
|
||||
visible: true,
|
||||
indicatorStyle: `height: 50px;`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bindChange: function (e) {
|
||||
const val = e.detail.value
|
||||
this.year = this.years[val[0]]
|
||||
this.month = this.months[val[1]]
|
||||
this.day = this.days[val[2]]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<style>
|
||||
.picker-view {
|
||||
width: 750rpx;
|
||||
height: 600rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.item {
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/picker-view.html)
|
||||
@@ -0,0 +1,197 @@
|
||||
# picker
|
||||
|
||||
## Instructions
|
||||
|
||||
从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。
|
||||
|
||||
mode = selector
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<picker />`（或 `<picker></picker>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| range | Array / Array<Object> | [] | mode为 selector 或 multiSelector 时，range 有效 | |
|
||||
| range-key | String | | 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 | |
|
||||
| value | Number | 0 | value 的值表示选择了 range 中的第几个（下标从 0 开始） | |
|
||||
| selector-type | String | auto | UI类型,仅大屏时该属性生效，支持 picker、select、auto，默认在 iPad 以 picker 样式展示而在 PC 以 select 样式展示 | H5 2.9.9+ |
|
||||
| disabled | Boolean | false | 是否禁用 | 快手小程序不支持 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @change | EventHandle | | value 改变时触发 change 事件，event.detail = {value: value} | |
|
||||
| @cancel | EventHandle | | 取消选择或点遮罩层收起 picker 时触发 | 快手小程序不支持 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/picker.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-title uni-common-pl">地区选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker @change="bindPickerChange" :value="index" :range="array">
|
||||
<view class="uni-input">{{array[index]}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-pl">时间选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
|
||||
<view class="uni-input">{{time}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-pl">日期选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
|
||||
<view class="uni-input">{{date}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-title uni-common-pl">地区选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker @change="bindPickerChange" :value="index" :range="array">
|
||||
<view class="uni-input">{{array[index]}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-pl">时间选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
|
||||
<view class="uni-input">{{time}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-pl">日期选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
|
||||
<view class="uni-input">{{date}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const currentDate = this.getDate({
|
||||
format: true
|
||||
})
|
||||
return {
|
||||
title: 'picker',
|
||||
array: ['中国', '美国', '巴西', '日本'],
|
||||
index: 0,
|
||||
date: currentDate,
|
||||
time: '12:01'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
startDate() {
|
||||
return this.getDate('start');
|
||||
},
|
||||
endDate() {
|
||||
return this.getDate('end');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bindPickerChange: function(e) {
|
||||
console.log('picker发送选择改变，携带值为', e.detail.value)
|
||||
this.index = e.detail.value
|
||||
},
|
||||
bindDateChange: function(e) {
|
||||
this.date = e.detail.value
|
||||
},
|
||||
bindTimeChange: function(e) {
|
||||
this.time = e.detail.value
|
||||
},
|
||||
getDate(type) {
|
||||
const date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
|
||||
if (type === 'start') {
|
||||
year = year - 10;
|
||||
} else if (type === 'end') {
|
||||
year = year + 10;
|
||||
}
|
||||
month = month > 9 ? month : '0' + month;
|
||||
day = day > 9 ? day : '0' + day;
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/picker.html)
|
||||
@@ -0,0 +1,147 @@
|
||||
# progress
|
||||
|
||||
## Instructions
|
||||
|
||||
进度条。
|
||||
|
||||
属性说明
|
||||
|
||||
示例 查看演示
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<progress />`（或 `<progress></progress>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| percent | Number | 无 | 百分比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小程序、京东小程序、小红书小程序 |
|
||||
| stroke-width | Number/String | 6 | 进度条线的宽度，接受 px 和 rpx 值 | |
|
||||
| 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+、App-Vue 3.1.11+、快手小程序、京东小程序、小红书小程序 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @activeend | EventHandle | | 动画完成事件 | 微信小程序、京东小程序、小红书小程序 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/progress.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[0]" show-info stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[1]" stroke-width="3" />
|
||||
<uni-icons type="close" class="progress-cancel" color="#dd524d"></uni-icons>
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[2]" stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[3]" activeColor="#10AEFF" stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-control">
|
||||
<button type="primary" @click="setProgress">设置进度</button>
|
||||
<button type="warn" @click="clearProgress">清除进度</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[0]" show-info stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[1]" stroke-width="3" />
|
||||
<uni-icons type="close" class="progress-cancel" color="#dd524d"></uni-icons>
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[2]" stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[3]" activeColor="#10AEFF" stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-control">
|
||||
<button type="primary" @click="setProgress">设置进度</button>
|
||||
<button type="warn" @click="clearProgress">清除进度</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pgList: [0, 0, 0, 0]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setProgress() {
|
||||
this.pgList = [20, 40, 60, 80]
|
||||
},
|
||||
clearProgress() {
|
||||
this.pgList = [0, 0, 0, 0]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<style>
|
||||
.progress-box {
|
||||
display: flex;
|
||||
height: 50rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.uni-icon {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.progress-cancel {
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
|
||||
.progress-control button {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/progress.html)
|
||||
@@ -0,0 +1,138 @@
|
||||
# radio
|
||||
|
||||
## Instructions
|
||||
|
||||
单项选择器，内部由多个 <radio> 组成。通过把多个 radio 包裹在一个 radio-group 下，实现这些 radio 的单选。
|
||||
|
||||
属性说明
|
||||
|
||||
单选项目。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<radio />`（或 `<radio></radio>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
See official docs for full properties list: `https://doc.dcloud.net.cn/uni-app-x/component/radio.html`
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @change | EventHandle | | <radio-group> 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/radio.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">默认样式</view>
|
||||
<view>
|
||||
<label class="radio"><radio value="r1" :checked="true" />选中</label>
|
||||
<label class="radio"><radio value="r2" />未选中</label>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt uni-common-pl">推荐展示样式</view>
|
||||
<view class="uni-list">
|
||||
<radio-group @change="radioChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
|
||||
<view>
|
||||
<radio :value="item.value" :checked="index === current" />
|
||||
</view>
|
||||
<view>{{item.name}}</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">默认样式</view>
|
||||
<view>
|
||||
<label class="radio"><radio value="r1" :checked="true" />选中</label>
|
||||
<label class="radio"><radio value="r2" />未选中</label>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt uni-common-pl">推荐展示样式</view>
|
||||
<view class="uni-list">
|
||||
<radio-group @change="radioChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
|
||||
<view>
|
||||
<radio :value="item.value" :checked="index === current" />
|
||||
</view>
|
||||
<view>{{item.name}}</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [{
|
||||
value: 'USA',
|
||||
name: '美国',
|
||||
checked: 'true'
|
||||
},
|
||||
{
|
||||
value: 'CHN',
|
||||
name: '中国'
|
||||
},
|
||||
{
|
||||
value: 'BRA',
|
||||
name: '巴西'
|
||||
},
|
||||
{
|
||||
value: 'JPN',
|
||||
name: '日本'
|
||||
},
|
||||
{
|
||||
value: 'ENG',
|
||||
name: '英国'
|
||||
},
|
||||
{
|
||||
value: 'FRA',
|
||||
name: '法国'
|
||||
},
|
||||
],
|
||||
current: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
radioChange: function(evt) {
|
||||
for (let i = 0; i < this.items.length; i++) {
|
||||
if (this.items[i].value === evt.detail.value) {
|
||||
this.current = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/radio.html)
|
||||
@@ -0,0 +1,117 @@
|
||||
# rich-text
|
||||
|
||||
## Instructions
|
||||
|
||||
富文本。
|
||||
|
||||
支持默认事件，包括：click、touchstart、touchmove、touchcancel、touchend、longpress。
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<rich-text />`（或 `<rich-text></rich-text>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台兼容 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| nodes | Array / String | [] | 节点列表 / HTML String | |
|
||||
| space | string | | 显示连续空格 | App、H5、微信基础库2.4.1+ 详见 、QQ小程序、抖音小程序、快手小程序 详见 |
|
||||
| selectable | Boolean | true | 富文本是否可以长按选中，可用于复制，粘贴等场景 | 百度小程序（仅真机支持，基础库 3.150.1 以下版本默认为 false） |
|
||||
| image-menu-prevent | Boolean | false | 阻止长按图片时弹起默认菜单（将该属性设置为image-menu-prevent或image-menu-prevent="true"），只在初始化时有效，不能动态变更；若不想阻止弹起默认菜单，则不需要设置此属性 | 百度小程序 |
|
||||
| preview | Boolean | | 富文本中的图片是否可点击预览。在不设置的情况下，若 rich-text 未监听点击事件，则默认开启。未显示设置 preview 时会进行点击默认预览判断，建议显示设置 preview | 百度小程序 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台兼容 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @itemclick | EventHandle | | 拦截点击事件（只支持 a 、 img 标签），返回当前node信息 event.detail={node} | H5 (3.2.13+)、App-Vue (3.2.13+) |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/rich-text.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view class="content">
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title uni-common-mt">
|
||||
数组类型
|
||||
<text>\nnodes属性为Array</text>
|
||||
</view>
|
||||
<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
|
||||
<rich-text :nodes="nodes"></rich-text>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
字符串类型
|
||||
<text>\nnodes属性为String</text>
|
||||
</view>
|
||||
<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
|
||||
<rich-text :nodes="strings"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view class="content">
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title uni-common-mt">
|
||||
数组类型
|
||||
<text>\nnodes属性为Array</text>
|
||||
</view>
|
||||
<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
|
||||
<rich-text :nodes="nodes"></rich-text>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
字符串类型
|
||||
<text>\nnodes属性为String</text>
|
||||
</view>
|
||||
<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
|
||||
<rich-text :nodes="strings"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodes: [{
|
||||
name: 'div',
|
||||
attrs: {
|
||||
class: 'div-class',
|
||||
style: 'line-height: 60px; color: red; text-align:center;'
|
||||
},
|
||||
children: [{
|
||||
type: 'text',
|
||||
text: 'Hello uni-app!'
|
||||
}]
|
||||
}],
|
||||
strings: '<div style="text-align:center;"><img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/></div>'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/rich-text.html)
|
||||
@@ -0,0 +1,228 @@
|
||||
# scroll-view
|
||||
|
||||
## Instructions
|
||||
|
||||
可滚动视图区域。用于区域滚动。
|
||||
|
||||
需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。
|
||||
|
||||
使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给 <scroll-view> 添加 white-space: nowrap; 样式。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<scroll-view />`（或 `<scroll-view></scroll-view>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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 | true | 控制是否出现滚动条 | 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 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @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+ |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/scroll-view.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
Vertical Scroll
|
||||
<text>\n纵向滚动</text>
|
||||
</view>
|
||||
<view>
|
||||
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
|
||||
@scrolltolower="lower" @scroll="scroll">
|
||||
<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
|
||||
<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
|
||||
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view @tap="goTop" class="uni-link uni-center uni-common-mt">
|
||||
点击这里返回顶部
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
Horizontal Scroll
|
||||
<text>\n横向滚动</text>
|
||||
</view>
|
||||
<view>
|
||||
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
|
||||
<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
|
||||
<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
|
||||
<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="uni-common-pb"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
Vertical Scroll
|
||||
<text>\n纵向滚动</text>
|
||||
</view>
|
||||
<view>
|
||||
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
|
||||
@scrolltolower="lower" @scroll="scroll">
|
||||
<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
|
||||
<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
|
||||
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view @tap="goTop" class="uni-link uni-center uni-common-mt">
|
||||
点击这里返回顶部
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
Horizontal Scroll
|
||||
<text>\n横向滚动</text>
|
||||
</view>
|
||||
<view>
|
||||
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
|
||||
<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
|
||||
<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
|
||||
<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="uni-common-pb"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
old: {
|
||||
scrollTop: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upper: function(e) {
|
||||
console.log(e)
|
||||
},
|
||||
lower: function(e) {
|
||||
console.log(e)
|
||||
},
|
||||
scroll: function(e) {
|
||||
console.log(e)
|
||||
this.old.scrollTop = e.detail.scrollTop
|
||||
},
|
||||
goTop: function(e) {
|
||||
// 解决view层不同步的问题
|
||||
this.scrollTop = this.old.scrollTop
|
||||
this.$nextTick(function() {
|
||||
this.scrollTop = 0
|
||||
});
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "纵向滚动 scrollTop 值已被修改为 0"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<style>
|
||||
.scroll-Y {
|
||||
height: 300rpx;
|
||||
}
|
||||
.scroll-view_H {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
.scroll-view-item {
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.scroll-view-item_H {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<scroll-view style="height: 300px;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
|
||||
:refresher-threshold="100" refresher-background="lightgreen" @refresherpulling="onPulling"
|
||||
@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort"></scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<scroll-view style="height: 300px;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
|
||||
:refresher-threshold="100" refresher-background="lightgreen" @refresherpulling="onPulling"
|
||||
@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort"></scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/scroll-view.html)
|
||||
@@ -0,0 +1,130 @@
|
||||
# slider
|
||||
|
||||
## Instructions
|
||||
|
||||
滑动选择器。
|
||||
|
||||
属性说明
|
||||
|
||||
示例 查看演示
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<slider />`（或 `<slider></slider>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| min | Number | 0 | 最小值 |
|
||||
| max | Number | 100 | 最大值 |
|
||||
| step | Number | 1 | 步长，取值必须大于 0，并且可被(max - min)整除 |
|
||||
| disabled | Boolean | false | 是否禁用 |
|
||||
| value | Number | 0 | 当前取值 |
|
||||
| activeColor | Color | 各个平台不同，详见下 | 滑块左侧已选择部分的线条颜色 |
|
||||
| backgroundColor | Color | #e9e9e9 | 滑块右侧背景条的颜色 |
|
||||
| block-size | Number | 28 | 滑块的大小，取值范围为 12 - 28 |
|
||||
| block-color | Color | #ffffff | 滑块的颜色 |
|
||||
| show-value | Boolean | false | 是否显示当前 value |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @change | EventHandle | | 完成一次拖动后触发的事件，event.detail = {value: value} |
|
||||
| @changing | EventHandle | | 拖动过程中触发的事件，event.detail = {value: value} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/slider.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">设置step</view>
|
||||
<view>
|
||||
<slider value="60" @change="sliderChange" step="5" />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">显示当前value</view>
|
||||
<view>
|
||||
<slider value="50" @change="sliderChange" show-value />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">设置最小/最大值</view>
|
||||
<view>
|
||||
<slider value="100" @change="sliderChange" min="50" max="200" show-value />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">不同颜色和大小的滑块</view>
|
||||
<view>
|
||||
<slider value="50" @change="sliderChange" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
sliderChange(e) {
|
||||
console.log('value 发生变化：' + e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">设置step</view>
|
||||
<view>
|
||||
<slider value="60" @change="sliderChange" step="5" />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">显示当前value</view>
|
||||
<view>
|
||||
<slider value="50" @change="sliderChange" show-value />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">设置最小/最大值</view>
|
||||
<view>
|
||||
<slider value="100" @change="sliderChange" min="50" max="200" show-value />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">不同颜色和大小的滑块</view>
|
||||
<view>
|
||||
<slider value="50" @change="sliderChange" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
sliderChange(e) {
|
||||
console.log('value 发生变化：' + e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/slider.html)
|
||||
@@ -0,0 +1,219 @@
|
||||
# swiper
|
||||
|
||||
## Instructions
|
||||
|
||||
滑块视图容器。
|
||||
|
||||
一般用于左右滑动或上下滑动，比如banner轮播图。
|
||||
|
||||
注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<swiper />`（或 `<swiper></swiper>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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+、支付宝小程序 |
|
||||
| easing-function | String | default | 指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic | 微信小程序、快手小程序、京东小程序 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @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} | 抖音小程序、飞书小程序与小红书小程序不支持 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/swiper.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-margin-wrap">
|
||||
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
|
||||
:duration="duration">
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-red">A</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-green">B</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-blue">C</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<view class="swiper-list">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">指示点</view>
|
||||
<switch :checked="indicatorDots" @change="changeIndicatorDots" />
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">自动播放</view>
|
||||
<switch :checked="autoplay" @change="changeAutoplay" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-common-mt">
|
||||
<text>幻灯片切换时长(ms)</text>
|
||||
<text class="info">{{duration}}</text>
|
||||
</view>
|
||||
<slider @change="durationChange" :value="duration" min="500" max="2000" />
|
||||
<view class="uni-common-mt">
|
||||
<text>自动播放间隔时长(ms)</text>
|
||||
<text class="info">{{interval}}</text>
|
||||
</view>
|
||||
<slider @change="intervalChange" :value="interval" min="2000" max="10000" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-margin-wrap">
|
||||
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
|
||||
:duration="duration">
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-red">A</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-green">B</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-blue">C</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<view class="swiper-list">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">指示点</view>
|
||||
<switch :checked="indicatorDots" @change="changeIndicatorDots" />
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">自动播放</view>
|
||||
<switch :checked="autoplay" @change="changeAutoplay" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-common-mt">
|
||||
<text>幻灯片切换时长(ms)</text>
|
||||
<text class="info">{{duration}}</text>
|
||||
</view>
|
||||
<slider @change="durationChange" :value="duration" min="500" max="2000" />
|
||||
<view class="uni-common-mt">
|
||||
<text>自动播放间隔时长(ms)</text>
|
||||
<text class="info">{{interval}}</text>
|
||||
</view>
|
||||
<slider @change="intervalChange" :value="interval" min="2000" max="10000" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
background: ['color1', 'color2', 'color3'],
|
||||
indicatorDots: true,
|
||||
autoplay: true,
|
||||
interval: 2000,
|
||||
duration: 500
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeIndicatorDots(e) {
|
||||
this.indicatorDots = !this.indicatorDots
|
||||
},
|
||||
changeAutoplay(e) {
|
||||
this.autoplay = !this.autoplay
|
||||
},
|
||||
intervalChange(e) {
|
||||
this.interval = e.target.value
|
||||
},
|
||||
durationChange(e) {
|
||||
this.duration = e.target.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<style>
|
||||
.uni-margin-wrap {
|
||||
width: 690rpx;
|
||||
width: 100%;
|
||||
}
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
}
|
||||
.swiper-item {
|
||||
display: block;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.swiper-list {
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.uni-common-mt {
|
||||
margin-top: 60rpx;
|
||||
position: relative;
|
||||
}
|
||||
.info {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
}
|
||||
.uni-padding-wrap {
|
||||
width: 550rpx;
|
||||
padding: 0 100rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/swiper.html)
|
||||
@@ -0,0 +1,121 @@
|
||||
# switch
|
||||
|
||||
## Instructions
|
||||
|
||||
开关选择器。
|
||||
|
||||
属性说明
|
||||
|
||||
示例 查看演示
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<switch />`（或 `<switch></switch>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| checked | Boolean | false | 是否选中 | |
|
||||
| disabled | Boolean | false | 是否禁用 | 抖音小程序与飞书小程序不支持 |
|
||||
| type | String | switch | 样式，有效值：switch, checkbox | |
|
||||
| color | Color | - | switch 的颜色，同 css 的 color | |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @change | EventHandle | - | checked 改变时触发 change 事件，event.detail={ value:checked} | |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/switch.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">默认样式</view>
|
||||
<view>
|
||||
<switch checked @change="switch1Change" />
|
||||
<switch @change="switch2Change" />
|
||||
</view>
|
||||
<view class="uni-title">不同颜色和尺寸的switch</view>
|
||||
<view>
|
||||
<switch checked color="#FFCC33" style="transform:scale(0.7)"/>
|
||||
<switch color="#FFCC33" style="transform:scale(0.7)"/>
|
||||
</view>
|
||||
<view class="uni-title">推荐展示样式</view>
|
||||
</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">开启中</view>
|
||||
<switch checked />
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">关闭</view>
|
||||
<switch />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">默认样式</view>
|
||||
<view>
|
||||
<switch checked @change="switch1Change" />
|
||||
<switch @change="switch2Change" />
|
||||
</view>
|
||||
<view class="uni-title">不同颜色和尺寸的switch</view>
|
||||
<view>
|
||||
<switch checked color="#FFCC33" style="transform:scale(0.7)"/>
|
||||
<switch color="#FFCC33" style="transform:scale(0.7)"/>
|
||||
</view>
|
||||
<view class="uni-title">推荐展示样式</view>
|
||||
</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">开启中</view>
|
||||
<switch checked />
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">关闭</view>
|
||||
<switch />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
switch1Change: function (e) {
|
||||
console.log('switch1 发生 change 事件，携带值为', e.detail.value)
|
||||
},
|
||||
switch2Change: function (e) {
|
||||
console.log('switch2 发生 change 事件，携带值为', e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/switch.html)
|
||||
@@ -0,0 +1,121 @@
|
||||
# text
|
||||
|
||||
## Instructions
|
||||
|
||||
文本组件。用于包裹文本内容。
|
||||
|
||||
在app-uvue和app-nvue中，文本只能写在text中，而不能写在view的text区域。
|
||||
|
||||
虽然app-uvue中写在view的text区域的文字，也会被编译器自动包裹一层text组件，看起来也可以使用。但这样会造成无法修改该text文字的样式，详见uvue的 样式不继承 章节
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<text />`（或 `<text></text>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| selectable | Boolean | false | 文本是否可选 | 小红书小程序不支持 |
|
||||
| user-select | Boolean | false | 文本是否可选 | 微信小程序 |
|
||||
| space | String | | 显示连续空格 | 钉钉小程序不支持 |
|
||||
| decode | Boolean | false | 是否解码 | 百度、钉钉小程序不支持 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://doc.dcloud.net.cn/uni-app-x/component/text.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/text.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="text-box" scroll-y="true">
|
||||
<text>{{text}}</text>
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button type="primary" :disabled="!canAdd" @click="add">add line</button>
|
||||
<button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="text-box" scroll-y="true">
|
||||
<text>{{text}}</text>
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button type="primary" :disabled="!canAdd" @click="add">add line</button>
|
||||
<button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
texts: [
|
||||
'HBuilder，900万开发者选择的IDE',
|
||||
'MUI，轻巧、漂亮的前端开源框架',
|
||||
'wap2app，M站快速转换原生体验的App',
|
||||
'5+Runtime，为HTML5插上原生的翅膀',
|
||||
'HBuilderX，轻巧、极速，极客编辑器',
|
||||
'uni-app，终极跨平台方案',
|
||||
'HBuilder，900万开发者选择的IDE',
|
||||
'MUI，轻巧、漂亮的前端开源框架',
|
||||
'wap2app，M站快速转换原生体验的App',
|
||||
'5+Runtime，为HTML5插上原生的翅膀',
|
||||
'HBuilderX，轻巧、极速，极客编辑器',
|
||||
'uni-app，终极跨平台方案',
|
||||
'......'
|
||||
],
|
||||
text: '',
|
||||
canAdd: true,
|
||||
canRemove: false,
|
||||
extraLine: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add: function(e) {
|
||||
this.extraLine.push(this.texts[this.extraLine.length % 12]);
|
||||
this.text = this.extraLine.join('\n');
|
||||
this.canAdd = this.extraLine.length < 12;
|
||||
this.canRemove = this.extraLine.length > 0;
|
||||
},
|
||||
remove: function(e) {
|
||||
if (this.extraLine.length > 0) {
|
||||
this.extraLine.pop();
|
||||
this.text = this.extraLine.join('\n');
|
||||
this.canAdd = this.extraLine.length < 12;
|
||||
this.canRemove = this.extraLine.length > 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/text.html)
|
||||
@@ -0,0 +1,230 @@
|
||||
# textarea
|
||||
|
||||
## Instructions
|
||||
|
||||
多行输入框。
|
||||
|
||||
属性说明
|
||||
|
||||
confirm-type 有效值
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<textarea />`（或 `<textarea></textarea>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| value | String | | 输入框的内容 | |
|
||||
| placeholder | String | | 输入框为空时占位符 | |
|
||||
| placeholder-style | String | | 指定 placeholder 的样式 | |
|
||||
| placeholder-class | String | textarea-placeholder | 指定 placeholder 的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ | 抖音小程序、飞书小程序、快手小程序不支持 |
|
||||
| disabled | Boolean | false | 是否禁用 | |
|
||||
| maxlength | Number | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 | |
|
||||
| focus | Boolean | false | 获取焦点 | 在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点 |
|
||||
| auto-focus | Boolean | false | 自动聚焦，拉起键盘 | 京东小程序、小红书小程序 |
|
||||
| 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小程序、京东小程序、小红书小程序 |
|
||||
| cursor-color | String | | 光标颜色 | H5(4.0+)、App-Vue(4.0+) |
|
||||
| confirm-type | String | done | 设置键盘右下角按钮的文字 | 微信小程序(2.13.0+)、支付宝小程序(2.7.23+)、App-vue和H5(2.9.9+，且要求设备webview内核Chrome81+、Safari13.7+) |
|
||||
| confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | App(3.3.7+)、H5 (3.3.7+)、微信小程序 (基础库 2.16.0+)、百度小程序 (基础库 3.130.1+)、快手小程序 |
|
||||
| show-confirm-bar | Boolean | true | 是否显示键盘上方带有”完成“按钮那一栏 | App-iOS、微信小程序、百度小程序、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、飞书小程序 3.46 |
|
||||
| hold-keyboard | boolean | false | focus时，点击页面的时候不收起键盘 | 微信小程序2.8.2 |
|
||||
| auto-blur | boolean | false | 键盘收起时，是否自动失去焦点 | App-vue 3.0.0+ ，App-nvue不支持 |
|
||||
| ignoreCompositionEvent | boolean | true | 是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件 | App-vue (3.4.4+)、H5 (3.4.4+)、App-nvue不支持 |
|
||||
| inputmode | String | "text" | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。 有效值 | H5（3.7.0+）、App-vue（3.7.0+） |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @focus | EventHandle | | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 | 仅微信小程序、京东小程序、App（HBuilderX 2.0+ nvue uni-app模式 ） 、QQ小程序支持 height |
|
||||
| @blur | EventHandle | | 输入框失去焦点时触发，event.detail = {value, cursor} | 快手小程序不支持 cursor |
|
||||
| @linechange | EventHandle | | 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} | 飞书小程序、快手小程序不支持 |
|
||||
| @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+ |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/textarea.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-title uni-common-pl">输入区域高度自适应，不会出现滚动条</view>
|
||||
<view class="uni-textarea">
|
||||
<textarea @blur="bindTextAreaBlur" auto-height />
|
||||
</view>
|
||||
<view class="uni-title uni-common-pl">占位符字体是红色的textarea</view>
|
||||
<view class="uni-textarea">
|
||||
<textarea placeholder-style="color:#F76260" placeholder="占位符字体是红色的"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
bindTextAreaBlur: function (e) {
|
||||
console.log(e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-title uni-common-pl">输入区域高度自适应，不会出现滚动条</view>
|
||||
<view class="uni-textarea">
|
||||
<textarea @blur="bindTextAreaBlur" auto-height />
|
||||
</view>
|
||||
<view class="uni-title uni-common-pl">占位符字体是红色的textarea</view>
|
||||
<view class="uni-textarea">
|
||||
<textarea placeholder-style="color:#F76260" placeholder="占位符字体是红色的"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
bindTextAreaBlur: function (e) {
|
||||
console.log(e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="content">
|
||||
<textarea class="textarea" v-model="txt"></textarea>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
"txt":"hello world！\n textarea多行输入框"
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="content">
|
||||
<textarea class="textarea" v-model="txt"></textarea>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
"txt":"hello world！\n textarea多行输入框"
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="content">
|
||||
<textarea class="textarea" v-model="txt"></textarea>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
txt:"txt"
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
txt(txt) {
|
||||
if( txt.indexOf('\n') != -1 ){ //敲了回车键了
|
||||
uni.hideKeyboard() //收起软键盘
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.textarea{
|
||||
border: solid 1px red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="content">
|
||||
<textarea class="textarea" v-model="txt"></textarea>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
txt:"txt"
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
txt(txt) {
|
||||
if( txt.indexOf('\n') != -1 ){ //敲了回车键了
|
||||
uni.hideKeyboard() //收起软键盘
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.textarea{
|
||||
border: solid 1px red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/textarea.html)
|
||||
@@ -0,0 +1,101 @@
|
||||
# unicloud-db
|
||||
|
||||
## Instructions
|
||||
|
||||
<unicloud-db> ç»ä»¶æ¯ä¸ä¸ªæ°æ®åºæ¥è¯¢ç»ä»¶ï¼å®æ¯å¯¹ clientDB çjsåºçåå°è£ ã
|
||||
|
||||
å端éè¿ç»ä»¶æ¹å¼ç´æ¥è·åuniCloudçäºç«¯æ°æ®åºä¸çæ°æ®ï¼å¹¶ç»å®å¨çé¢ä¸è¿è¡æ¸²æã
|
||||
|
||||
å¨ä¼ ç»å¼åä¸ï¼å¼åè éè¦å¨å端å®ä¹dataãéè¿requestèç½è·åæ¥å£æ°æ®ãç¶åèµå¼ç»dataãåæ¶å端è¿éè¦åæ¥å£æ¥æ¥åºååé¦æ°æ®ã
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<unicloud-db />`（或 `<unicloud-db></unicloud-db>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
See official docs for full properties list: `https://doc.dcloud.net.cn/uniCloud/unicloud-db`
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://doc.dcloud.net.cn/uniCloud/unicloud-db`
|
||||
|
||||
#### Slots
|
||||
|
||||
| å±æ§ | ç±»å | æè¿° |
|
||||
| --- | --- | --- |
|
||||
| data | Array|Object | æ¥è¯¢ç»æï¼é»è®¤å¼ä¸º Array , å½ getone æå®ä¸º true æ¶ï¼å¼ä¸ºæ°ç»ä¸ç¬¬ä¸æ¡æ°æ®ï¼ç±»å为 Object ï¼åå°äºä¸å± |
|
||||
| pagination | Object | å页å±æ§ |
|
||||
| loading | Boolean | æ¥è¯¢ä¸çç¶æãå¯æ ¹æ®æ¤ç¶æï¼å¨templateä¸éè¿v-ifæ¾ç¤ºçå¾ å 容ï¼å¦ <view v-if="loading">å è½½ä¸...</view> |
|
||||
| hasMore | Boolean | æ¯å¦ææ´å¤æ°æ®ãå¯æ ¹æ®æ¤ç¶æï¼å¨templateä¸éè¿v-ifæ¾ç¤ºæ²¡ææ´å¤æ°æ®äºï¼å¦ <uni-load-more v-if="!hasMore" status="noMore"></uni-load-more> , <uni-load-more> 详æ https://ext.dcloud.net.cn/plugin?id=29 |
|
||||
| error | Object | æ¥è¯¢é误ãå¯æ ¹æ®æ¤ç¶æï¼å¨templateä¸éè¿v-ifæ¾ç¤ºçå¾ å 容ï¼å¦ <view v-if="error">å è½½é误</view> |
|
||||
| options | Object | å¨å°ç¨åºä¸ï¼æ槽ä¸è½è®¿é®å¤é¢çæ°æ®ï¼ééè¿æ¤åæ°ä¼ é, ä¸æ¯æä¼ éå½æ° |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uniCloud/unicloud-db`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<unicloud-db v-slot:default="{data, loading, error, options}" collection="table1" field="field1" :getone="true" where="id=='1'">
|
||||
<view>
|
||||
{{ data}}
|
||||
</view>
|
||||
</unicloud-db>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<unicloud-db v-slot:default="{data, loading, error, options}" collection="table1" field="field1" :getone="true" where="id=='1'">
|
||||
<view>
|
||||
{{ data}}
|
||||
</view>
|
||||
</unicloud-db>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<unicloud-db v-slot:default="{data, loading, error, options}" collection="user" field="name" :getone="true" where="id=='1'">
|
||||
<view>
|
||||
{{ data.name}}
|
||||
</view>
|
||||
</unicloud-db>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<unicloud-db v-slot:default="{data, loading, error, options}" collection="user" field="name" :getone="true" where="id=='1'">
|
||||
<view>
|
||||
{{ data.name}}
|
||||
</view>
|
||||
</unicloud-db>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<unicloud-db v-slot:default="{data, pagination, loading, hasMore, error, options}"></unicloud-db>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<unicloud-db v-slot:default="{data, pagination, loading, hasMore, error, options}"></unicloud-db>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uniCloud/unicloud-db)
|
||||
@@ -0,0 +1,198 @@
|
||||
# video
|
||||
|
||||
## Instructions
|
||||
|
||||
视频需要上传？推荐 uni-cdn ，帮你节省至少30%的 CDN 费用！ 详情 。
|
||||
|
||||
视频播放组件。
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<video />`（或 `<video></video>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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时才会显示 | 抖音小程序、飞书小程序、快手小程序、京东小程序不支持 |
|
||||
| show-fullscreen-btn | Boolean | true | 是否显示全屏按钮 | 京东小程序不支持 |
|
||||
| show-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：覆盖 | App、微信小程序、抖音小程序、飞书小程序、H5、京东小程序、小红书小程序 |
|
||||
| poster | String | | 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效 | |
|
||||
| show-mute-btn | Boolean | false | 是否显示静音按钮 | 微信小程序、抖音小程序、App-nvue、小红书小程序 |
|
||||
| title | String | | 视频的标题，全屏时在顶部展示 | 微信小程序、App（3.6.7+） |
|
||||
| play-btn-position | String | bottom | 播放按钮的位置 | 微信小程序、抖音小程序、飞书小程序 |
|
||||
| mobilenet-hint-type | number | 1 | 移动网络提醒样式：0是不提醒，1是提醒，默认值为1 | 京东小程序 |
|
||||
| enable-play-gesture | Boolean | false | 是否开启播放手势，即双击切换播放/暂停 | 微信小程序、快手小程序 |
|
||||
| auto-pause-if-navigate | Boolean | true | 当跳转到其它小程序页面时，是否自动暂停本页面的视频 | 微信小程序 |
|
||||
| auto-pause-if-open-native | Boolean | true | 当跳转到其它微信原生页面时，是否自动暂停本页面的视频 | 微信小程序 |
|
||||
| vslide-gesture | Boolean | false | 在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture） | 微信小程序、App（3.4.0+）、快手小程序 |
|
||||
| vslide-gesture-in-fullscreen | Boolean | true | 在全屏模式下，是否开启亮度与音量调节手势 | 微信小程序、App（3.4.0+）、快手小程序 |
|
||||
| ad-unit-id | String | | 视频前贴广告单元ID，更多详情可参考开放能力 视频前贴广告 | 微信小程序 |
|
||||
| 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解码音频，避免音视频脱轨的问题，可能会降低首屏展现速度、视频帧率，出现开屏音频延迟等。 适用于高码率视频的极端场景；2： M3U8优化模式，增加缓冲区大小，提升视频加载速度和流畅度，可能会降低首屏展现速度。 适用于M3U8在线播放的场景 | App-Android 3.1.0+ |
|
||||
| header | Object | | HTTP 请求 Header | App 3.1.19+ |
|
||||
| is-live | Boolean | false | 是否为直播源 | App 3.7.2+、微信小程序（2.28.1+） |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @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 |
|
||||
| @loadeddata | EventHandle | | 视频资源开始加载时触发 | 京东小程序 |
|
||||
| @loadstart | EventHandle | | 开始加载数据 | 京东小程序 |
|
||||
| @seeked | EventHandle | | 拖动进度条结束 | 京东小程序 |
|
||||
| @seeking | EventHandle | | 正在拖动进度条 | 京东小程序 |
|
||||
| @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 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/video.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view>
|
||||
<video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
|
||||
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
|
||||
</view>
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<view class="uni-list uni-common-mt">
|
||||
<view class="uni-list-cell">
|
||||
<view>
|
||||
<view class="uni-label">弹幕内容</view>
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view>
|
||||
<video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
|
||||
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
|
||||
</view>
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<view class="uni-list uni-common-mt">
|
||||
<view class="uni-list-cell">
|
||||
<view>
|
||||
<view class="uni-label">弹幕内容</view>
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src: '',
|
||||
danmuList: [{
|
||||
text: '第 1s 出现的弹幕',
|
||||
color: '#ff0000',
|
||||
time: 1
|
||||
},
|
||||
{
|
||||
text: '第 3s 出现的弹幕',
|
||||
color: '#ff00ff',
|
||||
time: 3
|
||||
}
|
||||
],
|
||||
danmuValue: ''
|
||||
}
|
||||
},
|
||||
onReady: function(res) {
|
||||
// #ifndef MP-ALIPAY
|
||||
this.videoContext = uni.createVideoContext('myVideo')
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
sendDanmu: function() {
|
||||
this.videoContext.sendDanmu({
|
||||
text: this.danmuValue,
|
||||
color: this.getRandomColor()
|
||||
});
|
||||
this.danmuValue = '';
|
||||
},
|
||||
videoErrorCallback: function(e) {
|
||||
uni.showModal({
|
||||
content: e.target.errMsg,
|
||||
showCancel: false
|
||||
})
|
||||
},
|
||||
getRandomColor: function() {
|
||||
const rgb = []
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
let color = Math.floor(Math.random() * 256).toString(16)
|
||||
color = color.length == 1 ? '0' + color : color
|
||||
rgb.push(color)
|
||||
}
|
||||
return '#' + rgb.join('')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/video.html)
|
||||
@@ -0,0 +1,95 @@
|
||||
# view
|
||||
|
||||
## Instructions
|
||||
|
||||
所有的视图组件，包括view、swiper等，本身不显示任何可视化元素。它们的用途都是为了包裹其他真正显示的组件。
|
||||
|
||||
视图容器。
|
||||
|
||||
它类似于传统html中的div，用于包裹各种元素内容。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<view />`（或 `<view></view>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| hover-class | String | none | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 |
|
||||
| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）、小红书小程序 |
|
||||
| hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 |
|
||||
| hover-stay-time | Number | 400 | 手指松开后点击态保留时间，单位毫秒 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://doc.dcloud.net.cn/uni-app-x/component/view.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/view.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: row
|
||||
<text>\n横向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="flex-item uni-bg-red">A</view>
|
||||
<view class="flex-item uni-bg-green">B</view>
|
||||
<view class="flex-item uni-bg-blue">C</view>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: column
|
||||
<text>\n纵向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-column">
|
||||
<view class="flex-item flex-item-V uni-bg-red">A</view>
|
||||
<view class="flex-item flex-item-V uni-bg-green">B</view>
|
||||
<view class="flex-item flex-item-V uni-bg-blue">C</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: row
|
||||
<text>\n横向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="flex-item uni-bg-red">A</view>
|
||||
<view class="flex-item uni-bg-green">B</view>
|
||||
<view class="flex-item uni-bg-blue">C</view>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: column
|
||||
<text>\n纵向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-column">
|
||||
<view class="flex-item flex-item-V uni-bg-red">A</view>
|
||||
<view class="flex-item flex-item-V uni-bg-green">B</view>
|
||||
<view class="flex-item flex-item-V uni-bg-blue">C</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/view.html)
|
||||
@@ -0,0 +1,289 @@
|
||||
# web-view
|
||||
|
||||
## Instructions
|
||||
|
||||
web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。
|
||||
|
||||
各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<web-view />`（或 `<web-view></web-view>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| src | String | webview 指向网页的链接 | |
|
||||
| allow | String | 用于为 iframe 指定其 特征策略 | H5 |
|
||||
| sandbox | String | 该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。 | H5 |
|
||||
| fullscreen | Boolean | 是否铺满整个页面，默认值： true 。 | H5 (HBuilder X 3.5.4+)、App-HarmonyOS |
|
||||
| webview-styles | Object | webview 的样式 | App-vue |
|
||||
| update-title | Boolean | 是否自动更新当前页面标题。默认值： true | App-vue (HBuilder X 3.3.8+) |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @message | EventHandler | 网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。 | H5 暂不支持（可以直接使用 window.postMessage ） |
|
||||
| @onPostMessage | EventHandler | 网页向应用实时 postMessage | App-nvue |
|
||||
| @load | EventHandler | 网页加载成功时候触发此事件。 | 微信小程序、支付宝小程序、抖音小程序、QQ小程序、H5、小红书小程序 |
|
||||
| @error | EventHandler | 网页加载失败的时候触发此事件。 | 微信小程序、支付宝小程序、抖音小程序、QQ小程序、小红书小程序 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
| 方法名 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- |
|
||||
| uni.navigateTo | navigateTo | |
|
||||
| uni.redirectTo | redirectTo | |
|
||||
| uni.reLaunch | reLaunch | |
|
||||
| uni.switchTab | switchTab | |
|
||||
| uni.navigateBack | navigateBack | |
|
||||
| uni.postMessage | 向应用发送消息 | 抖音小程序不支持、H5 暂不支持（可以直接使用 window.postMessage ） |
|
||||
| uni.getEnv | 获取当前环境 | 抖音小程序与飞书小程序不支持 |
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webviewStyles: {
|
||||
progress: {
|
||||
color: '#FF3333'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webviewStyles: {
|
||||
progress: {
|
||||
color: '#FF3333'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
┌─components
|
||||
├─hybrid
|
||||
│ └─html
|
||||
│ ├─css
|
||||
│ │ └─test.css
|
||||
│ ├─img
|
||||
│ │ └─icon.png
|
||||
│ ├─js
|
||||
│ │ └─test.js
|
||||
│ └─local.html
|
||||
├─pages
|
||||
│ └─index
|
||||
│ └─index.vue
|
||||
├─static
|
||||
├─main.js
|
||||
├─App.vue
|
||||
├─manifest.json
|
||||
└─pages.json
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<web-view src="/hybrid/html/local.html"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<web-view src="/hybrid/html/local.html"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```vue
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
||||
<title>网络网页</title>
|
||||
<style type="text/css">
|
||||
.btn {
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
padding: 5px;
|
||||
background-color: #007aff;
|
||||
border: 0;
|
||||
color: #ffffff;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.btn-red {
|
||||
background-color: #dd524d;
|
||||
}
|
||||
|
||||
.btn-yellow {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.desc {
|
||||
padding: 10px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.post-message-section {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="desc">web-view 组件加载网络 html 示例。点击下列按钮，跳转至其它页面。</p>
|
||||
<div class="btn-list">
|
||||
<button class="btn" type="button" data-action="navigateTo">navigateTo</button>
|
||||
<button class="btn" type="button" data-action="redirectTo">redirectTo</button>
|
||||
<button class="btn" type="button" data-action="navigateBack">navigateBack</button>
|
||||
<button class="btn" type="button" data-action="reLaunch">reLaunch</button>
|
||||
<button class="btn" type="button" data-action="switchTab">switchTab</button>
|
||||
</div>
|
||||
<div class="post-message-section">
|
||||
<p class="desc">网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。</p>
|
||||
<div class="btn-list">
|
||||
<button class="btn btn-red" type="button" id="postMessage">postMessage</button>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var userAgent = navigator.userAgent;
|
||||
if (userAgent.indexOf('AlipayClient') > -1) {
|
||||
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
|
||||
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
|
||||
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
|
||||
// QQ 小程序
|
||||
document.write(
|
||||
'<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
|
||||
);
|
||||
} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
|
||||
// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
|
||||
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
|
||||
} else if (/toutiaomicroapp/i.test(userAgent)) {
|
||||
// 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
|
||||
document.write(
|
||||
'<script type="text/javascript" src="https://lf1-cdn-tos.bytegoofy.com/goofy/developer/jssdk/jssdk-1.2.0.js"><\/script>');
|
||||
} else if (/swan/i.test(userAgent)) {
|
||||
// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
|
||||
document.write(
|
||||
'<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
|
||||
);
|
||||
} else if (/quickapp/i.test(userAgent)) {
|
||||
// quickapp
|
||||
document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
|
||||
}
|
||||
if (!/toutiaomicroapp/i.test(userAgent)) {
|
||||
document.querySelector('.post-message-section').style.visibility = 'visible';
|
||||
}
|
||||
</script>
|
||||
<!-- uni 的 SDK -->
|
||||
<!-- 需要把 uni.webview.1.5.6.js 下载到自己的服务器 -->
|
||||
<script type="text/javascript" src="https://gitcode.com/dcloud/uni-app/tree/dev/dist/uni.webview.1.5.6.js"></script>
|
||||
<script type="text/javascript">
|
||||
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
|
||||
document.addEventListener('UniAppJSBridgeReady', function() {
|
||||
uni.postMessage({
|
||||
data: {
|
||||
action: 'message'
|
||||
}
|
||||
});
|
||||
uni.getEnv(function(res) {
|
||||
console.log('当前环境：' + JSON.stringify(res));
|
||||
});
|
||||
|
||||
document.querySelector('.btn-list').addEventListener('click', function(evt) {
|
||||
var target = evt.target;
|
||||
if (target.tagName === 'BUTTON') {
|
||||
var action = target.getAttribute('data-action');
|
||||
switch (action) {
|
||||
case 'switchTab':
|
||||
uni.switchTab({
|
||||
url: '/pages/tabBar/API/API'
|
||||
});
|
||||
break;
|
||||
case 'reLaunch':
|
||||
uni.reLaunch({
|
||||
url: '/pages/tabBar/component/component'
|
||||
});
|
||||
break;
|
||||
case 'navigateBack':
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
break;
|
||||
default:
|
||||
uni[action]({
|
||||
url: '/pages/component/button/button'
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
document.getElementById('postMessage').addEventListener('click', function() {
|
||||
uni.postMessage({
|
||||
data: {
|
||||
action: 'message'
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/web-view.html)
|
||||
Reference in New Issue
Block a user