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,178 @@
|
||||
# uni.getBatteryInfo - 获取电池信息示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/system/battery.html#getbatteryinfo
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.getBatteryInfo` 用于获取设备电池信息。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.getBatteryInfo({
|
||||
success: (res) => {
|
||||
console.log('电池信息', res)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 获取电池信息
|
||||
|
||||
```javascript
|
||||
uni.getBatteryInfo({
|
||||
success: (res) => {
|
||||
console.log('电池电量', res.level, '%')
|
||||
console.log('是否正在充电', res.isCharging)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="getBatteryInfo">获取电池信息</button>
|
||||
<view v-if="batteryInfo" class="battery-info">
|
||||
<text>电量:{{ batteryInfo.level }}%</text>
|
||||
<text>充电状态:{{ batteryInfo.isCharging ? '充电中' : '未充电' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
batteryInfo: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getBatteryInfo() {
|
||||
uni.getBatteryInfo({
|
||||
success: (res) => {
|
||||
this.batteryInfo = res
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: '获取失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 低电量提醒
|
||||
|
||||
```javascript
|
||||
function checkBatteryLevel() {
|
||||
uni.getBatteryInfo({
|
||||
success: (res) => {
|
||||
if (res.level < 20 && !res.isCharging) {
|
||||
uni.showModal({
|
||||
title: '低电量提醒',
|
||||
content: `当前电量仅剩${res.level}%,建议连接充电器`,
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 定时检查
|
||||
setInterval(checkBatteryLevel, 60000) // 每分钟检查一次
|
||||
```
|
||||
|
||||
### 示例 4: 同步版本
|
||||
|
||||
```javascript
|
||||
try {
|
||||
const batteryInfo = uni.getBatteryInfoSync()
|
||||
console.log('电池电量', batteryInfo.level, '%')
|
||||
console.log('是否正在充电', batteryInfo.isCharging)
|
||||
} catch (err) {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 5: 根据电量调整策略
|
||||
|
||||
```javascript
|
||||
function getBatteryInfo() {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getBatteryInfo({
|
||||
success: (res) => {
|
||||
resolve(res)
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 根据电量决定是否执行耗电操作
|
||||
async function performHeavyTask() {
|
||||
const batteryInfo = await getBatteryInfo()
|
||||
|
||||
if (batteryInfo.level < 20 && !batteryInfo.isCharging) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '电量较低,建议连接充电器后再执行',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 执行任务
|
||||
console.log('执行任务')
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 直接执行
|
||||
console.log('执行任务')
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| level | Number | 设备电量,范围 1 - 100 |
|
||||
| isCharging | Boolean | 是否正在充电 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ❌ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. H5 平台不支持此 API
|
||||
2. `level` 范围是 1-100,表示电量百分比
|
||||
3. `isCharging` 表示设备是否正在充电
|
||||
4. 同步版本 `getBatteryInfoSync` 性能更好
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/system/battery.html#getbatteryinfo
|
||||
- **同步版本**: https://uniapp.dcloud.net.cn/api/system/battery.html#getbatteryinfosync
|
||||
@@ -0,0 +1,195 @@
|
||||
# uni.getNetworkType - 获取网络类型示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/system/network.html#getnetworktype
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.getNetworkType` 用于获取设备当前网络类型。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.getNetworkType({
|
||||
success: (res) => {
|
||||
console.log('网络类型', res.networkType)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 获取网络类型
|
||||
|
||||
```javascript
|
||||
uni.getNetworkType({
|
||||
success: (res) => {
|
||||
console.log('网络类型', res.networkType)
|
||||
// 可能的值:wifi、2g、3g、4g、5g、unknown、none
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 检查网络状态
|
||||
|
||||
```javascript
|
||||
function checkNetwork() {
|
||||
uni.getNetworkType({
|
||||
success: (res) => {
|
||||
if (res.networkType === 'none') {
|
||||
uni.showToast({
|
||||
title: '网络不可用',
|
||||
icon: 'none'
|
||||
})
|
||||
} else if (res.networkType === '2g' || res.networkType === '3g') {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '当前网络较慢,建议使用WiFi',
|
||||
showCancel: false
|
||||
})
|
||||
} else {
|
||||
console.log('网络正常', res.networkType)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="checkNetwork">检查网络</button>
|
||||
<view v-if="networkType" class="network-info">
|
||||
<text>当前网络类型:{{ networkType }}</text>
|
||||
<text>网络状态:{{ networkStatus }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
networkType: '',
|
||||
networkStatus: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.checkNetwork()
|
||||
},
|
||||
methods: {
|
||||
checkNetwork() {
|
||||
uni.getNetworkType({
|
||||
success: (res) => {
|
||||
this.networkType = res.networkType
|
||||
if (res.networkType === 'none') {
|
||||
this.networkStatus = '无网络'
|
||||
} else if (res.networkType === 'wifi') {
|
||||
this.networkStatus = 'WiFi网络'
|
||||
} else {
|
||||
this.networkStatus = '移动网络'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 监听网络状态变化
|
||||
|
||||
```javascript
|
||||
// 监听网络状态变化
|
||||
uni.onNetworkStatusChange((res) => {
|
||||
console.log('网络类型', res.networkType)
|
||||
console.log('是否联网', res.isConnected)
|
||||
|
||||
if (!res.isConnected) {
|
||||
uni.showToast({
|
||||
title: '网络已断开',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '网络已连接',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 获取当前网络状态
|
||||
uni.getNetworkType({
|
||||
success: (res) => {
|
||||
console.log('当前网络类型', res.networkType)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 5: 根据网络类型调整策略
|
||||
|
||||
```javascript
|
||||
function getNetworkType() {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getNetworkType({
|
||||
success: (res) => {
|
||||
resolve(res.networkType)
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 根据网络类型决定是否加载高清图片
|
||||
async function loadImage() {
|
||||
const networkType = await getNetworkType()
|
||||
|
||||
if (networkType === 'wifi' || networkType === '4g' || networkType === '5g') {
|
||||
// 加载高清图片
|
||||
return 'https://example.com/hd-image.jpg'
|
||||
} else {
|
||||
// 加载压缩图片
|
||||
return 'https://example.com/compressed-image.jpg'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| networkType | String | 网络类型,可能的值:wifi、2g、3g、4g、5g、unknown、none |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `networkType` 可能的值:wifi、2g、3g、4g、5g、unknown、none
|
||||
2. `none` 表示无网络连接
|
||||
3. 建议配合 `onNetworkStatusChange` 监听网络变化
|
||||
4. 可以根据网络类型调整加载策略
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/system/network.html#getnetworktype
|
||||
- **监听网络变化**: https://uniapp.dcloud.net.cn/api/system/network.html#onnetworkstatuschange
|
||||
@@ -0,0 +1,192 @@
|
||||
# uni.getScreenBrightness - 获取屏幕亮度示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/device/screen.html#getscreenbrightness
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.getScreenBrightness` 用于获取屏幕亮度。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.getScreenBrightness({
|
||||
success: (res) => {
|
||||
console.log('屏幕亮度', res.value)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 获取屏幕亮度
|
||||
|
||||
```javascript
|
||||
uni.getScreenBrightness({
|
||||
success: (res) => {
|
||||
console.log('屏幕亮度', res.value) // 范围 0 - 1
|
||||
console.log('亮度百分比', (res.value * 100).toFixed(0) + '%')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="getBrightness">获取屏幕亮度</button>
|
||||
<view v-if="brightness !== null" class="brightness-info">
|
||||
<text>当前亮度:{{ (brightness * 100).toFixed(0) }}%</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
brightness: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getBrightness() {
|
||||
uni.getScreenBrightness({
|
||||
success: (res) => {
|
||||
this.brightness = res.value
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: '获取失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 保存和恢复亮度
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<slider
|
||||
:value="brightness * 100"
|
||||
min="0"
|
||||
max="100"
|
||||
@change="handleBrightnessChange"
|
||||
/>
|
||||
<button @click="saveBrightness">保存亮度</button>
|
||||
<button @click="restoreBrightness">恢复亮度</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
brightness: 0.5,
|
||||
savedBrightness: 0.5
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getBrightness()
|
||||
// 加载保存的亮度
|
||||
const saved = uni.getStorageSync('screenBrightness')
|
||||
if (saved) {
|
||||
this.savedBrightness = saved
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getBrightness() {
|
||||
uni.getScreenBrightness({
|
||||
success: (res) => {
|
||||
this.brightness = res.value
|
||||
}
|
||||
})
|
||||
},
|
||||
handleBrightnessChange(e) {
|
||||
this.brightness = e.detail.value / 100
|
||||
uni.setScreenBrightness({
|
||||
value: this.brightness
|
||||
})
|
||||
},
|
||||
saveBrightness() {
|
||||
this.savedBrightness = this.brightness
|
||||
uni.setStorageSync('screenBrightness', this.brightness)
|
||||
uni.showToast({
|
||||
title: '已保存',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
restoreBrightness() {
|
||||
this.brightness = this.savedBrightness
|
||||
uni.setScreenBrightness({
|
||||
value: this.brightness
|
||||
})
|
||||
uni.showToast({
|
||||
title: '已恢复',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 检查亮度设置
|
||||
|
||||
```javascript
|
||||
function checkBrightness() {
|
||||
uni.getScreenBrightness({
|
||||
success: (res) => {
|
||||
if (res.value < 0.3) {
|
||||
console.log('屏幕较暗')
|
||||
} else if (res.value > 0.8) {
|
||||
console.log('屏幕较亮')
|
||||
} else {
|
||||
console.log('屏幕亮度适中')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| value | Number | 屏幕亮度值,范围 0 - 1 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ❌ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. H5 平台不支持此 API
|
||||
2. `value` 范围是 0-1,0 表示最暗,1 表示最亮
|
||||
3. 可以配合 `setScreenBrightness` 使用
|
||||
4. 建议在设置亮度前先获取当前亮度
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/device/screen.html#getscreenbrightness
|
||||
- **设置亮度**: https://uniapp.dcloud.net.cn/api/device/screen.html#setscreenbrightness
|
||||
@@ -0,0 +1,209 @@
|
||||
# uni.getSystemInfo - 获取系统信息示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/system/info.html#getsysteminfo
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.getSystemInfo` 用于获取系统信息,包括设备信息、屏幕信息等。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
console.log('系统信息', res)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 获取系统信息
|
||||
|
||||
```javascript
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
console.log('手机品牌', res.brand)
|
||||
console.log('手机型号', res.model)
|
||||
console.log('系统版本', res.system)
|
||||
console.log('平台', res.platform)
|
||||
console.log('屏幕宽度', res.windowWidth)
|
||||
console.log('屏幕高度', res.windowHeight)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 同步获取系统信息
|
||||
|
||||
```javascript
|
||||
try {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
console.log('系统信息', systemInfo)
|
||||
} catch (err) {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="getSystemInfo">获取系统信息</button>
|
||||
<view v-if="systemInfo" class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">手机品牌:</text>
|
||||
<text>{{ systemInfo.brand }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">手机型号:</text>
|
||||
<text>{{ systemInfo.model }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">系统版本:</text>
|
||||
<text>{{ systemInfo.system }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">平台:</text>
|
||||
<text>{{ systemInfo.platform }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">屏幕宽度:</text>
|
||||
<text>{{ systemInfo.windowWidth }}px</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">屏幕高度:</text>
|
||||
<text>{{ systemInfo.windowHeight }}px</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
systemInfo: null
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getSystemInfo()
|
||||
},
|
||||
methods: {
|
||||
getSystemInfo() {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
this.systemInfo = res
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.info-list {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.info-item {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.label {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 4: 适配不同屏幕
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container" :style="containerStyle">
|
||||
<text>自适应内容</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
containerStyle: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.containerStyle = {
|
||||
width: systemInfo.windowWidth + 'px',
|
||||
height: systemInfo.windowHeight + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 判断平台
|
||||
|
||||
```javascript
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
|
||||
// 判断平台
|
||||
if (systemInfo.platform === 'ios') {
|
||||
console.log('iOS 平台')
|
||||
} else if (systemInfo.platform === 'android') {
|
||||
console.log('Android 平台')
|
||||
}
|
||||
|
||||
// 判断是否为 App
|
||||
if (systemInfo.platform !== 'devtools') {
|
||||
console.log('非开发工具环境')
|
||||
}
|
||||
```
|
||||
|
||||
## 返回值说明
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| brand | String | 手机品牌 |
|
||||
| model | String | 手机型号 |
|
||||
| system | String | 操作系统版本 |
|
||||
| platform | String | 客户端平台 |
|
||||
| windowWidth | Number | 窗口宽度 |
|
||||
| windowHeight | Number | 窗口高度 |
|
||||
| pixelRatio | Number | 设备像素比 |
|
||||
| screenWidth | Number | 屏幕宽度 |
|
||||
| screenHeight | Number | 屏幕高度 |
|
||||
| statusBarHeight | Number | 状态栏高度 |
|
||||
| safeArea | Object | 安全区域 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 建议在 `onLoad` 中获取系统信息
|
||||
2. 同步版本 `getSystemInfoSync` 性能更好
|
||||
3. 不同平台返回的信息可能不同
|
||||
4. 使用 `windowWidth` 和 `windowHeight` 进行屏幕适配
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/system/info.html#getsysteminfo
|
||||
- **同步版本**: https://uniapp.dcloud.net.cn/api/system/info.html#getsysteminfosync
|
||||
@@ -0,0 +1,195 @@
|
||||
# uni.setScreenBrightness - 设置屏幕亮度示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/device/screen.html#setscreenbrightness
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.setScreenBrightness` 用于设置屏幕亮度。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.setScreenBrightness({
|
||||
value: 0.5
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 设置屏幕亮度
|
||||
|
||||
```javascript
|
||||
uni.setScreenBrightness({
|
||||
value: 0.5, // 亮度值,范围 0 - 1
|
||||
success: () => {
|
||||
console.log('设置成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('设置失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<slider
|
||||
:value="brightness * 100"
|
||||
min="0"
|
||||
max="100"
|
||||
@change="handleBrightnessChange"
|
||||
/>
|
||||
<text>亮度:{{ (brightness * 100).toFixed(0) }}%</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
brightness: 0.5
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getBrightness()
|
||||
},
|
||||
methods: {
|
||||
getBrightness() {
|
||||
uni.getScreenBrightness({
|
||||
success: (res) => {
|
||||
this.brightness = res.value
|
||||
}
|
||||
})
|
||||
},
|
||||
handleBrightnessChange(e) {
|
||||
this.brightness = e.detail.value / 100
|
||||
uni.setScreenBrightness({
|
||||
value: this.brightness,
|
||||
success: () => {
|
||||
console.log('亮度已设置')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 自动调节亮度
|
||||
|
||||
```javascript
|
||||
function autoAdjustBrightness() {
|
||||
// 获取当前时间
|
||||
const hour = new Date().getHours()
|
||||
|
||||
// 晚上(18:00-6:00)降低亮度
|
||||
if (hour >= 18 || hour < 6) {
|
||||
uni.setScreenBrightness({
|
||||
value: 0.3 // 较暗
|
||||
})
|
||||
} else {
|
||||
uni.setScreenBrightness({
|
||||
value: 0.8 // 较亮
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 4: 护眼模式
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<switch :checked="eyeProtectionMode" @change="toggleEyeProtection" />
|
||||
<text>护眼模式</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
eyeProtectionMode: false,
|
||||
originalBrightness: 0.5
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleEyeProtection(e) {
|
||||
this.eyeProtectionMode = e.detail.value
|
||||
|
||||
if (this.eyeProtectionMode) {
|
||||
// 保存当前亮度
|
||||
uni.getScreenBrightness({
|
||||
success: (res) => {
|
||||
this.originalBrightness = res.value
|
||||
}
|
||||
})
|
||||
// 降低亮度
|
||||
uni.setScreenBrightness({
|
||||
value: 0.3
|
||||
})
|
||||
} else {
|
||||
// 恢复原亮度
|
||||
uni.setScreenBrightness({
|
||||
value: this.originalBrightness
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 根据环境光调节
|
||||
|
||||
```javascript
|
||||
// 注意:此功能需要配合其他API实现
|
||||
function adjustBrightnessByAmbient() {
|
||||
// 获取环境光强度(需要其他API支持)
|
||||
// 这里只是示例逻辑
|
||||
const ambientLight = 0.5 // 假设获取到的环境光强度
|
||||
|
||||
// 根据环境光设置屏幕亮度
|
||||
const screenBrightness = Math.max(0.2, Math.min(1.0, ambientLight))
|
||||
|
||||
uni.setScreenBrightness({
|
||||
value: screenBrightness
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| value | Number | 是 | 屏幕亮度值,范围 0 - 1,0 最暗,1 最亮 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ❌ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. H5 平台不支持此 API
|
||||
2. `value` 范围是 0-1,0 表示最暗,1 表示最亮
|
||||
3. 设置后立即生效
|
||||
4. 建议在用户退出应用时恢复系统默认亮度
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/device/screen.html#setscreenbrightness
|
||||
- **获取亮度**: https://uniapp.dcloud.net.cn/api/device/screen.html#getscreenbrightness
|
||||
@@ -0,0 +1,232 @@
|
||||
# uni.getFileInfo - 获取文件信息示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/file/file.html#getfileinfo
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.getFileInfo` 用于获取文件信息。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.getFileInfo({
|
||||
filePath: 'file_path',
|
||||
success: (res) => {
|
||||
console.log('文件大小', res.size)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 获取文件信息
|
||||
|
||||
```javascript
|
||||
uni.getFileInfo({
|
||||
filePath: 'file_path',
|
||||
success: (res) => {
|
||||
console.log('文件大小', res.size, '字节')
|
||||
console.log('文件大小(KB)', (res.size / 1024).toFixed(2), 'KB')
|
||||
console.log('文件大小(MB)', (res.size / 1024 / 1024).toFixed(2), 'MB')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 检查文件大小
|
||||
|
||||
```javascript
|
||||
function checkFileSize(filePath) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getFileInfo({
|
||||
filePath: filePath,
|
||||
success: (res) => {
|
||||
const sizeInMB = res.size / 1024 / 1024
|
||||
if (sizeInMB > 10) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `文件大小 ${sizeInMB.toFixed(2)}MB,超过10MB,建议压缩后上传`,
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
resolve(res)
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 使用
|
||||
checkFileSize('file_path').then(res => {
|
||||
console.log('文件信息', res)
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="chooseAndCheckFile">选择文件并检查</button>
|
||||
<view v-if="fileInfo" class="file-info">
|
||||
<text>文件大小:{{ formatFileSize(fileInfo.size) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileInfo: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseAndCheckFile() {
|
||||
uni.chooseFile({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const filePath = res.tempFiles[0].path
|
||||
this.getFileInfo(filePath)
|
||||
}
|
||||
})
|
||||
},
|
||||
getFileInfo(filePath) {
|
||||
uni.getFileInfo({
|
||||
filePath: filePath,
|
||||
success: (res) => {
|
||||
this.fileInfo = res
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: '获取失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
formatFileSize(size) {
|
||||
if (size < 1024) {
|
||||
return size + ' B'
|
||||
} else if (size < 1024 * 1024) {
|
||||
return (size / 1024).toFixed(2) + ' KB'
|
||||
} else {
|
||||
return (size / 1024 / 1024).toFixed(2) + ' MB'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 上传前检查文件大小
|
||||
|
||||
```javascript
|
||||
function uploadFileWithSizeCheck(filePath) {
|
||||
uni.getFileInfo({
|
||||
filePath: filePath,
|
||||
success: (res) => {
|
||||
const maxSize = 10 * 1024 * 1024 // 10MB
|
||||
|
||||
if (res.size > maxSize) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `文件大小 ${(res.size / 1024 / 1024).toFixed(2)}MB,超过限制`,
|
||||
showCancel: false
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 上传文件
|
||||
uni.uploadFile({
|
||||
url: 'https://api.example.com/upload',
|
||||
filePath: filePath,
|
||||
name: 'file',
|
||||
success: (uploadRes) => {
|
||||
console.log('上传成功', uploadRes)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 5: 获取多个文件信息
|
||||
|
||||
```javascript
|
||||
function getMultipleFileInfo(filePaths) {
|
||||
const fileInfoList = []
|
||||
let completedCount = 0
|
||||
|
||||
filePaths.forEach((filePath, index) => {
|
||||
uni.getFileInfo({
|
||||
filePath: filePath,
|
||||
success: (res) => {
|
||||
fileInfoList[index] = {
|
||||
path: filePath,
|
||||
size: res.size
|
||||
}
|
||||
completedCount++
|
||||
|
||||
if (completedCount === filePaths.length) {
|
||||
console.log('所有文件信息', fileInfoList)
|
||||
const totalSize = fileInfoList.reduce((sum, info) => sum + info.size, 0)
|
||||
console.log('总大小', (totalSize / 1024 / 1024).toFixed(2), 'MB')
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 使用
|
||||
uni.chooseFile({
|
||||
count: 5,
|
||||
success: (res) => {
|
||||
const filePaths = res.tempFiles.map(file => file.path)
|
||||
getMultipleFileInfo(filePaths)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| filePath | String | 是 | 文件路径 |
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| size | Number | 文件大小,单位:字节 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ❌ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. H5 平台不支持此 API
|
||||
2. `size` 单位是字节(bytes)
|
||||
3. 可以通过 `size` 判断文件大小,进行上传限制
|
||||
4. 建议在上传前检查文件大小
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/file/file.html#getfileinfo
|
||||
@@ -0,0 +1,347 @@
|
||||
# uni.getSavedFileList - 获取已保存的文件列表示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/file/file.html#getsavedfilelist
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.getSavedFileList` 用于获取本地已保存的文件列表。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.getSavedFileList({
|
||||
success: (res) => {
|
||||
console.log('文件列表', res.fileList)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 获取文件列表
|
||||
|
||||
```javascript
|
||||
uni.getSavedFileList({
|
||||
success: (res) => {
|
||||
console.log('文件数量', res.fileList.length)
|
||||
res.fileList.forEach((file, index) => {
|
||||
console.log(`文件${index + 1}:`, file.filePath)
|
||||
console.log(`大小:`, file.size, '字节')
|
||||
console.log(`创建时间:`, new Date(file.createTime))
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="getFileList">获取文件列表</button>
|
||||
<view v-if="fileList.length > 0" class="file-list">
|
||||
<view
|
||||
v-for="(file, index) in fileList"
|
||||
:key="index"
|
||||
class="file-item"
|
||||
>
|
||||
<text class="file-path">{{ file.filePath }}</text>
|
||||
<text class="file-size">大小:{{ formatFileSize(file.size) }}</text>
|
||||
<text class="file-time">创建时间:{{ formatTime(file.createTime) }}</text>
|
||||
<button @click="removeFile(file.filePath)">删除</button>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty">
|
||||
<text>暂无保存的文件</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getFileList()
|
||||
},
|
||||
methods: {
|
||||
getFileList() {
|
||||
uni.getSavedFileList({
|
||||
success: (res) => {
|
||||
this.fileList = res.fileList
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: '获取失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
removeFile(filePath) {
|
||||
uni.removeSavedFile({
|
||||
filePath: filePath,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
})
|
||||
this.getFileList()
|
||||
}
|
||||
})
|
||||
},
|
||||
formatFileSize(size) {
|
||||
if (size < 1024) {
|
||||
return size + ' B'
|
||||
} else if (size < 1024 * 1024) {
|
||||
return (size / 1024).toFixed(2) + ' KB'
|
||||
} else {
|
||||
return (size / 1024 / 1024).toFixed(2) + ' MB'
|
||||
}
|
||||
},
|
||||
formatTime(timestamp) {
|
||||
const date = new Date(timestamp)
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.file-list {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.file-item {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.file-path {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.file-size, .file-time {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 3: 计算总文件大小
|
||||
|
||||
```javascript
|
||||
function getTotalFileSize() {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getSavedFileList({
|
||||
success: (res) => {
|
||||
const totalSize = res.fileList.reduce((sum, file) => sum + file.size, 0)
|
||||
const totalSizeMB = (totalSize / 1024 / 1024).toFixed(2)
|
||||
console.log('总文件大小', totalSizeMB, 'MB')
|
||||
resolve({
|
||||
fileList: res.fileList,
|
||||
totalSize: totalSize,
|
||||
totalSizeMB: totalSizeMB
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 使用
|
||||
getTotalFileSize().then(result => {
|
||||
console.log('文件统计', result)
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 清理旧文件
|
||||
|
||||
```javascript
|
||||
function cleanOldFiles(maxAge = 7 * 24 * 60 * 60 * 1000) {
|
||||
// maxAge: 最大保留时间(毫秒),默认7天
|
||||
uni.getSavedFileList({
|
||||
success: (res) => {
|
||||
const now = Date.now()
|
||||
let deletedCount = 0
|
||||
|
||||
res.fileList.forEach(file => {
|
||||
if (now - file.createTime > maxAge) {
|
||||
uni.removeSavedFile({
|
||||
filePath: file.filePath,
|
||||
success: () => {
|
||||
deletedCount++
|
||||
console.log('已删除旧文件', file.filePath)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: `已清理${deletedCount}个文件`,
|
||||
icon: 'success'
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 使用:清理7天前的文件
|
||||
cleanOldFiles()
|
||||
```
|
||||
|
||||
### 示例 5: 文件管理
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<text>文件管理</text>
|
||||
<text class="total-size">总大小:{{ totalSizeMB }}MB</text>
|
||||
</view>
|
||||
<view class="file-list">
|
||||
<view
|
||||
v-for="(file, index) in fileList"
|
||||
:key="index"
|
||||
class="file-item"
|
||||
>
|
||||
<view class="file-info">
|
||||
<text class="file-name">{{ getFileName(file.filePath) }}</text>
|
||||
<text class="file-detail">{{ formatFileSize(file.size) }} · {{ formatTime(file.createTime) }}</text>
|
||||
</view>
|
||||
<view class="file-actions">
|
||||
<button size="mini" @click="previewFile(file)">预览</button>
|
||||
<button size="mini" @click="removeFile(file.filePath)">删除</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<button @click="clearAllFiles" class="clear-btn">清空所有文件</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList: [],
|
||||
totalSizeMB: '0.00'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getFileList()
|
||||
},
|
||||
methods: {
|
||||
getFileList() {
|
||||
uni.getSavedFileList({
|
||||
success: (res) => {
|
||||
this.fileList = res.fileList
|
||||
const totalSize = res.fileList.reduce((sum, file) => sum + file.size, 0)
|
||||
this.totalSizeMB = (totalSize / 1024 / 1024).toFixed(2)
|
||||
}
|
||||
})
|
||||
},
|
||||
getFileName(filePath) {
|
||||
return filePath.split('/').pop()
|
||||
},
|
||||
removeFile(filePath) {
|
||||
uni.removeSavedFile({
|
||||
filePath: filePath,
|
||||
success: () => {
|
||||
this.getFileList()
|
||||
}
|
||||
})
|
||||
},
|
||||
clearAllFiles() {
|
||||
uni.showModal({
|
||||
title: '确认',
|
||||
content: '确定要清空所有文件吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.fileList.forEach(file => {
|
||||
uni.removeSavedFile({
|
||||
filePath: file.filePath
|
||||
})
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.getFileList()
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
previewFile(file) {
|
||||
// 根据文件类型预览
|
||||
if (file.filePath.endsWith('.jpg') || file.filePath.endsWith('.png')) {
|
||||
uni.previewImage({
|
||||
urls: [file.filePath]
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '暂不支持预览此类型文件',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
formatFileSize(size) {
|
||||
if (size < 1024) {
|
||||
return size + ' B'
|
||||
} else if (size < 1024 * 1024) {
|
||||
return (size / 1024).toFixed(2) + ' KB'
|
||||
} else {
|
||||
return (size / 1024 / 1024).toFixed(2) + ' MB'
|
||||
}
|
||||
},
|
||||
formatTime(timestamp) {
|
||||
const date = new Date(timestamp)
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| fileList | Array | 文件列表,每个文件包含 filePath、size、createTime |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ❌ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. H5 平台不支持此 API
|
||||
2. 返回的文件列表包含通过 `uni.saveFile` 保存的文件
|
||||
3. 可以通过 `createTime` 判断文件创建时间
|
||||
4. 建议定期清理不需要的文件
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/file/file.html#getsavedfilelist
|
||||
- **保存文件**: https://uniapp.dcloud.net.cn/api/file/file.html#savefile
|
||||
- **删除文件**: https://uniapp.dcloud.net.cn/api/file/file.html#removesavedfile
|
||||
@@ -0,0 +1,223 @@
|
||||
# uni.saveFile - 保存文件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/file/file.html#savefile
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.saveFile` 用于保存文件到本地。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.saveFile({
|
||||
tempFilePath: 'temp_file_path',
|
||||
success: (res) => {
|
||||
console.log('保存成功', res.savedFilePath)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 保存临时文件
|
||||
|
||||
```javascript
|
||||
uni.saveFile({
|
||||
tempFilePath: 'temp_file_path',
|
||||
success: (res) => {
|
||||
console.log('保存成功', res.savedFilePath)
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('保存失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 保存下载的文件
|
||||
|
||||
```javascript
|
||||
uni.downloadFile({
|
||||
url: 'https://example.com/file.pdf',
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
// 保存下载的文件
|
||||
uni.saveFile({
|
||||
tempFilePath: res.tempFilePath,
|
||||
success: (saveRes) => {
|
||||
console.log('文件已保存', saveRes.savedFilePath)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 保存图片到本地
|
||||
|
||||
```javascript
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0]
|
||||
|
||||
// 保存图片
|
||||
uni.saveFile({
|
||||
tempFilePath: tempFilePath,
|
||||
success: (saveRes) => {
|
||||
console.log('图片已保存', saveRes.savedFilePath)
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="downloadAndSave">下载并保存文件</button>
|
||||
<view v-if="savedFilePath" class="file-info">
|
||||
<text>文件已保存:{{ savedFilePath }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
savedFilePath: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
downloadAndSave() {
|
||||
uni.showLoading({
|
||||
title: '下载中...'
|
||||
})
|
||||
|
||||
uni.downloadFile({
|
||||
url: 'https://example.com/file.pdf',
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
uni.saveFile({
|
||||
tempFilePath: res.tempFilePath,
|
||||
success: (saveRes) => {
|
||||
this.savedFilePath = saveRes.savedFilePath
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '下载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 保存多个文件
|
||||
|
||||
```javascript
|
||||
function saveMultipleFiles(tempFilePaths) {
|
||||
const savedFilePaths = []
|
||||
let completedCount = 0
|
||||
|
||||
tempFilePaths.forEach((tempFilePath, index) => {
|
||||
uni.saveFile({
|
||||
tempFilePath: tempFilePath,
|
||||
success: (res) => {
|
||||
savedFilePaths[index] = res.savedFilePath
|
||||
completedCount++
|
||||
|
||||
if (completedCount === tempFilePaths.length) {
|
||||
console.log('所有文件已保存', savedFilePaths)
|
||||
uni.showToast({
|
||||
title: '全部保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error(`文件${index + 1}保存失败`, err)
|
||||
completedCount++
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 使用
|
||||
uni.chooseImage({
|
||||
count: 3,
|
||||
success: (res) => {
|
||||
saveMultipleFiles(res.tempFilePaths)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| tempFilePath | String | 是 | 需要保存的文件的临时路径 |
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| savedFilePath | String | 文件的保存路径 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ❌ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. H5 平台不支持此 API
|
||||
2. 保存的文件可以通过 `uni.getSavedFileList` 获取列表
|
||||
3. 保存的文件可以通过 `uni.removeSavedFile` 删除
|
||||
4. 建议在保存前检查文件大小
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/file/file.html#savefile
|
||||
- **获取文件列表**: https://uniapp.dcloud.net.cn/api/file/file.html#getsavedfilelist
|
||||
- **删除文件**: https://uniapp.dcloud.net.cn/api/file/file.html#removesavedfile
|
||||
@@ -0,0 +1,299 @@
|
||||
# uni.chooseLocation - 选择位置示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/location/choose-location.html#chooselocation
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.chooseLocation` 用于打开地图选择位置。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.chooseLocation({
|
||||
success: (res) => {
|
||||
console.log('选择的位置', res.name, res.address)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本选择位置
|
||||
|
||||
```javascript
|
||||
uni.chooseLocation({
|
||||
success: (res) => {
|
||||
console.log('位置名称', res.name)
|
||||
console.log('详细地址', res.address)
|
||||
console.log('纬度', res.latitude)
|
||||
console.log('经度', res.longitude)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('选择失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="chooseLocation">选择位置</button>
|
||||
<view v-if="location" class="location-info">
|
||||
<text>位置:{{ location.name }}</text>
|
||||
<text>地址:{{ location.address }}</text>
|
||||
<text>坐标:{{ location.latitude }}, {{ location.longitude }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
location: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseLocation() {
|
||||
uni.chooseLocation({
|
||||
success: (res) => {
|
||||
this.location = res
|
||||
uni.showToast({
|
||||
title: '选择成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
if (err.errMsg.includes('auth deny')) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '需要位置权限才能选择位置',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
uni.openSetting()
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '选择失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 选择收货地址
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="address-item" @click="chooseAddress">
|
||||
<view v-if="address">
|
||||
<text class="address-name">{{ address.name }}</text>
|
||||
<text class="address-detail">{{ address.address }}</text>
|
||||
</view>
|
||||
<view v-else>
|
||||
<text>请选择收货地址</text>
|
||||
</view>
|
||||
<text class="arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
address: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseAddress() {
|
||||
uni.chooseLocation({
|
||||
success: (res) => {
|
||||
this.address = {
|
||||
name: res.name,
|
||||
address: res.address,
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude
|
||||
}
|
||||
// 保存地址
|
||||
uni.setStorageSync('deliveryAddress', this.address)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 加载保存的地址
|
||||
const savedAddress = uni.getStorageSync('deliveryAddress')
|
||||
if (savedAddress) {
|
||||
this.address = savedAddress
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.address-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.address-name {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.address-detail {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
.arrow {
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 4: 检查权限
|
||||
|
||||
```javascript
|
||||
function chooseLocationWithPermission() {
|
||||
// 先检查权限
|
||||
uni.getSetting({
|
||||
success: (res) => {
|
||||
if (res.authSetting['scope.userLocation']) {
|
||||
// 已授权,直接选择
|
||||
chooseLocation()
|
||||
} else {
|
||||
// 请求授权
|
||||
uni.authorize({
|
||||
scope: 'scope.userLocation',
|
||||
success: () => {
|
||||
chooseLocation()
|
||||
},
|
||||
fail: () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '需要位置权限才能选择位置',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
uni.openSetting()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function chooseLocation() {
|
||||
uni.chooseLocation({
|
||||
success: (res) => {
|
||||
console.log('选择的位置', res)
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 5: 在地图上显示选择的位置
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="chooseLocation">选择位置</button>
|
||||
<map
|
||||
v-if="location"
|
||||
:latitude="location.latitude"
|
||||
:longitude="location.longitude"
|
||||
:markers="markers"
|
||||
class="map"
|
||||
></map>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
location: null,
|
||||
markers: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseLocation() {
|
||||
uni.chooseLocation({
|
||||
success: (res) => {
|
||||
this.location = res
|
||||
this.markers = [{
|
||||
id: 1,
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude,
|
||||
title: res.name
|
||||
}]
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| name | String | 位置名称 |
|
||||
| address | String | 详细地址 |
|
||||
| latitude | Number | 纬度 |
|
||||
| longitude | Number | 经度 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ❌ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 需要用户授权位置权限
|
||||
2. H5 平台不支持此 API
|
||||
3. 选择的位置包含名称、地址和坐标信息
|
||||
4. 建议在需要时再请求权限
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/location/choose-location.html#chooselocation
|
||||
- **获取位置**: https://uniapp.dcloud.net.cn/api/location/location.html#getlocation
|
||||
- **打开地图**: https://uniapp.dcloud.net.cn/api/location/open-location.html#openlocation
|
||||
@@ -0,0 +1,243 @@
|
||||
# uni.getLocation - 获取位置示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/location/location.html#getlocation
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.getLocation` 用于获取当前地理位置。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: (res) => {
|
||||
console.log('当前位置', res.latitude, res.longitude)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 获取当前位置
|
||||
|
||||
```javascript
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: (res) => {
|
||||
console.log('纬度', res.latitude)
|
||||
console.log('经度', res.longitude)
|
||||
console.log('速度', res.speed)
|
||||
console.log('精度', res.accuracy)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('获取位置失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 高精度定位
|
||||
|
||||
```javascript
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
altitude: true,
|
||||
geocode: true,
|
||||
success: (res) => {
|
||||
console.log('位置信息', res)
|
||||
// res.address 包含地址信息(需要 geocode: true)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="getCurrentLocation">获取当前位置</button>
|
||||
<view v-if="location" class="location-info">
|
||||
<text>纬度:{{ location.latitude }}</text>
|
||||
<text>经度:{{ location.longitude }}</text>
|
||||
<text>地址:{{ location.address || '未获取' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
location: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCurrentLocation() {
|
||||
uni.showLoading({
|
||||
title: '定位中...'
|
||||
})
|
||||
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
geocode: true,
|
||||
success: (res) => {
|
||||
this.location = res
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '定位成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '定位失败',
|
||||
icon: 'none'
|
||||
})
|
||||
console.error('定位失败', err)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 检查定位权限
|
||||
|
||||
```javascript
|
||||
// 先检查定位权限
|
||||
uni.getSetting({
|
||||
success: (res) => {
|
||||
if (res.authSetting['scope.userLocation']) {
|
||||
// 已授权,直接获取位置
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
console.log('位置', res)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 未授权,请求授权
|
||||
uni.authorize({
|
||||
scope: 'scope.userLocation',
|
||||
success: () => {
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
console.log('位置', res)
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '需要定位权限才能使用此功能',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 5: 在地图上显示位置
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="getLocationAndShow">获取位置并显示</button>
|
||||
<map
|
||||
v-if="location"
|
||||
:latitude="location.latitude"
|
||||
:longitude="location.longitude"
|
||||
:markers="markers"
|
||||
class="map"
|
||||
></map>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
location: null,
|
||||
markers: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getLocationAndShow() {
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
this.location = res
|
||||
this.markers = [{
|
||||
id: 1,
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude,
|
||||
title: '我的位置'
|
||||
}]
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| type | String | 否 | 坐标类型,可选值:wgs84、gcj02 |
|
||||
| altitude | Boolean | 否 | 是否返回高度信息 |
|
||||
| geocode | Boolean | 否 | 是否解析地址信息 |
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| latitude | Number | 纬度 |
|
||||
| longitude | Number | 经度 |
|
||||
| speed | Number | 速度 |
|
||||
| accuracy | Number | 位置的精确度 |
|
||||
| altitude | Number | 高度(需要 altitude: true) |
|
||||
| address | Object | 地址信息(需要 geocode: true) |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅(需要 HTTPS) |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 需要用户授权定位权限
|
||||
2. H5 平台需要 HTTPS 协议
|
||||
3. `type` 为 `gcj02` 时返回的坐标可用于地图显示
|
||||
4. `geocode` 为 true 时才能获取地址信息
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/location/location.html#getlocation
|
||||
- **打开地图**: https://uniapp.dcloud.net.cn/api/location/location.html#openlocation
|
||||
- **选择位置**: https://uniapp.dcloud.net.cn/api/location/location.html#chooselocation
|
||||
@@ -0,0 +1,188 @@
|
||||
# uni.openLocation - 打开地图查看位置示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/location/open-location.html#openlocation
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.openLocation` 用于使用地图查看位置,可以打开系统地图应用显示指定位置。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.openLocation({
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
name: '天安门',
|
||||
address: '北京市东城区'
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 打开地图查看位置
|
||||
|
||||
```javascript
|
||||
uni.openLocation({
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
name: '天安门',
|
||||
address: '北京市东城区天安门广场',
|
||||
scale: 18,
|
||||
success: () => {
|
||||
console.log('打开地图成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('打开地图失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 先获取位置再打开地图
|
||||
|
||||
```javascript
|
||||
// 先获取当前位置
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (locationRes) => {
|
||||
// 打开地图显示当前位置
|
||||
uni.openLocation({
|
||||
latitude: locationRes.latitude,
|
||||
longitude: locationRes.longitude,
|
||||
name: '我的位置',
|
||||
address: locationRes.address || '当前位置'
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="openCurrentLocation">查看当前位置</button>
|
||||
<button @click="openTargetLocation">查看目标位置</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
targetLocation: {
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
name: '天安门',
|
||||
address: '北京市东城区天安门广场'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openCurrentLocation() {
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
uni.openLocation({
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude,
|
||||
name: '我的位置',
|
||||
address: res.address || '当前位置'
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '获取位置失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
openTargetLocation() {
|
||||
uni.openLocation({
|
||||
latitude: this.targetLocation.latitude,
|
||||
longitude: this.targetLocation.longitude,
|
||||
name: this.targetLocation.name,
|
||||
address: this.targetLocation.address
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 查看商家位置
|
||||
|
||||
```javascript
|
||||
function openStoreLocation(store) {
|
||||
uni.openLocation({
|
||||
latitude: store.latitude,
|
||||
longitude: store.longitude,
|
||||
name: store.name,
|
||||
address: store.address,
|
||||
scale: 18,
|
||||
success: () => {
|
||||
console.log('打开商家位置成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 使用
|
||||
const store = {
|
||||
name: '星巴克咖啡',
|
||||
address: '北京市朝阳区xxx路xxx号',
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470
|
||||
}
|
||||
openStoreLocation(store)
|
||||
```
|
||||
|
||||
### 示例 5: 导航到位置
|
||||
|
||||
```javascript
|
||||
// 在某些平台上,openLocation 可以用于导航
|
||||
uni.openLocation({
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
name: '目的地',
|
||||
address: '北京市东城区',
|
||||
scale: 18
|
||||
})
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| latitude | Number | 是 | 纬度,范围为 -90~90,负数表示南纬 |
|
||||
| longitude | Number | 是 | 经度,范围为 -180~180,负数表示西经 |
|
||||
| scale | Number | 否 | 缩放比例,范围 5~18,默认为 18 |
|
||||
| name | String | 否 | 位置名称 |
|
||||
| address | String | 否 | 地址的详细说明 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 需要使用 `gcj02` 类型的坐标(通过 `uni.getLocation` 获取)
|
||||
2. `scale` 值越大,地图显示越详细
|
||||
3. `name` 和 `address` 用于在地图上显示位置信息
|
||||
4. 不同平台打开的地图应用可能不同
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/location/open-location.html#openlocation
|
||||
- **获取位置**: https://uniapp.dcloud.net.cn/api/location/location.html#getlocation
|
||||
@@ -0,0 +1,222 @@
|
||||
# uni.chooseImage - 选择图片示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.chooseImage` 用于从本地相册选择图片或使用相机拍照。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
console.log('选择的图片', res.tempFilePaths)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 选择单张图片
|
||||
|
||||
```javascript
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
console.log('选择的图片路径', res.tempFilePaths)
|
||||
console.log('图片文件信息', res.tempFiles)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 选择多张图片
|
||||
|
||||
```javascript
|
||||
uni.chooseImage({
|
||||
count: 9, // 最多选择9张
|
||||
sizeType: ['compressed'], // 只选择压缩图
|
||||
sourceType: ['album'], // 只从相册选择
|
||||
success: (res) => {
|
||||
console.log('选择了', res.tempFilePaths.length, '张图片')
|
||||
res.tempFilePaths.forEach((path, index) => {
|
||||
console.log(`图片${index + 1}:`, path)
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="chooseImage">选择图片</button>
|
||||
<view class="image-list">
|
||||
<image
|
||||
v-for="(item, index) in imageList"
|
||||
:key="index"
|
||||
:src="item"
|
||||
mode="aspectFill"
|
||||
class="image-item"
|
||||
@click="previewImage(index)"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseImage() {
|
||||
uni.chooseImage({
|
||||
count: 9,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
this.imageList = res.tempFilePaths
|
||||
uni.showToast({
|
||||
title: `选择了${res.tempFilePaths.length}张图片`,
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: '选择图片失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
previewImage(index) {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: this.imageList
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.image-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.image-item {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin: 10rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 4: 上传图片
|
||||
|
||||
```javascript
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0]
|
||||
|
||||
// 上传图片
|
||||
uni.uploadFile({
|
||||
url: 'https://api.example.com/upload',
|
||||
filePath: tempFilePath,
|
||||
name: 'file',
|
||||
success: (uploadRes) => {
|
||||
const data = JSON.parse(uploadRes.data)
|
||||
console.log('上传成功', data.url)
|
||||
uni.showToast({
|
||||
title: '上传成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('上传失败', err)
|
||||
uni.showToast({
|
||||
title: '上传失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 5: 获取图片信息
|
||||
|
||||
```javascript
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0]
|
||||
|
||||
// 获取图片信息
|
||||
uni.getImageInfo({
|
||||
src: tempFilePath,
|
||||
success: (imageInfo) => {
|
||||
console.log('图片宽度', imageInfo.width)
|
||||
console.log('图片高度', imageInfo.height)
|
||||
console.log('图片路径', imageInfo.path)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| count | Number | 否 | 最多可以选择的图片张数,默认 9 |
|
||||
| sizeType | Array | 否 | 所选的图片的尺寸,可选值:original(原图)、compressed(压缩图) |
|
||||
| sourceType | Array | 否 | 选择图片的来源,可选值:album(相册)、camera(相机) |
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| tempFilePaths | Array | 图片的本地文件路径列表 |
|
||||
| tempFiles | Array | 图片的本地文件列表,每个文件包含 path 和 size |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 选择的图片是临时文件,需要上传到服务器才能永久保存
|
||||
2. 临时文件路径在不同平台格式可能不同
|
||||
3. 选择图片需要用户授权,首次使用会弹出授权提示
|
||||
4. 建议使用压缩图以节省存储空间
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage
|
||||
- **预览图片**: https://uniapp.dcloud.net.cn/api/media/image.html#previewimage
|
||||
- **上传文件**: https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile
|
||||
@@ -0,0 +1,232 @@
|
||||
# uni.chooseMedia - 选择媒体文件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/media/video.html#choosemedia
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.chooseMedia` 用于从本地相册选择图片或视频,或者使用相机拍摄图片或视频。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.chooseMedia({
|
||||
count: 9,
|
||||
success: (res) => {
|
||||
console.log('选择的文件', res.tempFiles)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 选择图片和视频
|
||||
|
||||
```javascript
|
||||
uni.chooseMedia({
|
||||
count: 9,
|
||||
mediaType: ['image', 'video'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
console.log('选择的文件', res.tempFiles)
|
||||
res.tempFiles.forEach((file, index) => {
|
||||
console.log(`文件${index + 1}:`, file.tempFilePath)
|
||||
if (file.fileType === 'image') {
|
||||
console.log('图片大小', file.size)
|
||||
} else if (file.fileType === 'video') {
|
||||
console.log('视频时长', file.duration)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 只选择图片
|
||||
|
||||
```javascript
|
||||
uni.chooseMedia({
|
||||
count: 9,
|
||||
mediaType: ['image'],
|
||||
sourceType: ['album', 'camera'],
|
||||
sizeType: ['original', 'compressed'],
|
||||
success: (res) => {
|
||||
console.log('选择的图片', res.tempFiles)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 只选择视频
|
||||
|
||||
```javascript
|
||||
uni.chooseMedia({
|
||||
count: 1,
|
||||
mediaType: ['video'],
|
||||
sourceType: ['album', 'camera'],
|
||||
maxDuration: 60,
|
||||
camera: 'back',
|
||||
success: (res) => {
|
||||
console.log('选择的视频', res.tempFiles)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="chooseMedia">选择媒体文件</button>
|
||||
<view class="media-list">
|
||||
<view
|
||||
v-for="(item, index) in mediaList"
|
||||
:key="index"
|
||||
class="media-item"
|
||||
>
|
||||
<image
|
||||
v-if="item.fileType === 'image'"
|
||||
:src="item.tempFilePath"
|
||||
mode="aspectFill"
|
||||
class="media-preview"
|
||||
></image>
|
||||
<video
|
||||
v-else-if="item.fileType === 'video'"
|
||||
:src="item.tempFilePath"
|
||||
controls
|
||||
class="media-preview"
|
||||
></video>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mediaList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseMedia() {
|
||||
uni.chooseMedia({
|
||||
count: 9,
|
||||
mediaType: ['image', 'video'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
this.mediaList = res.tempFiles
|
||||
uni.showToast({
|
||||
title: `选择了${res.tempFiles.length}个文件`,
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('选择失败', err)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.media-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.media-item {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin: 10rpx;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.media-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 5: 上传媒体文件
|
||||
|
||||
```javascript
|
||||
uni.chooseMedia({
|
||||
count: 9,
|
||||
mediaType: ['image', 'video'],
|
||||
success: (res) => {
|
||||
const files = res.tempFiles
|
||||
let uploadCount = 0
|
||||
|
||||
files.forEach((file, index) => {
|
||||
uni.uploadFile({
|
||||
url: 'https://api.example.com/upload',
|
||||
filePath: file.tempFilePath,
|
||||
name: 'file',
|
||||
formData: {
|
||||
fileType: file.fileType,
|
||||
size: file.size
|
||||
},
|
||||
success: (uploadRes) => {
|
||||
uploadCount++
|
||||
console.log(`文件${index + 1}上传成功`)
|
||||
|
||||
if (uploadCount === files.length) {
|
||||
uni.showToast({
|
||||
title: '全部上传成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error(`文件${index + 1}上传失败`, err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| count | Number | 否 | 最多可以选择的文件个数,默认 9 |
|
||||
| mediaType | Array | 否 | 文件类型,可选值:image、video |
|
||||
| sourceType | Array | 否 | 选择文件来源,可选值:album、camera |
|
||||
| maxDuration | Number | 否 | 拍摄视频最长拍摄时间,单位秒 |
|
||||
| camera | String | 否 | 使用前置或后置摄像头,可选值:back、front |
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| tempFiles | Array | 选中的文件列表,每个文件包含 tempFilePath、size、fileType 等 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `mediaType` 可以同时选择图片和视频
|
||||
2. `count` 表示最多可以选择的文件个数
|
||||
3. 返回的文件包含 `fileType` 字段,用于区分图片和视频
|
||||
4. 建议根据实际需求设置 `maxDuration` 限制视频时长
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/media/video.html#choosemedia
|
||||
- **选择图片**: https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage
|
||||
- **选择视频**: https://uniapp.dcloud.net.cn/api/media/video.html#choosevideo
|
||||
@@ -0,0 +1,233 @@
|
||||
# uni.chooseVideo - 选择视频示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/media/video.html#choosevideo
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.chooseVideo` 用于从本地相册选择视频或使用相机拍摄视频。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.chooseVideo({
|
||||
success: (res) => {
|
||||
console.log('选择的视频', res.tempFilePath)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 选择视频
|
||||
|
||||
```javascript
|
||||
uni.chooseVideo({
|
||||
sourceType: ['album', 'camera'],
|
||||
maxDuration: 60,
|
||||
camera: 'back',
|
||||
success: (res) => {
|
||||
console.log('视频路径', res.tempFilePath)
|
||||
console.log('视频时长', res.duration, '秒')
|
||||
console.log('视频大小', res.size, '字节')
|
||||
console.log('视频高度', res.height)
|
||||
console.log('视频宽度', res.width)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 拍摄视频
|
||||
|
||||
```javascript
|
||||
uni.chooseVideo({
|
||||
sourceType: ['camera'],
|
||||
maxDuration: 30,
|
||||
camera: 'back',
|
||||
success: (res) => {
|
||||
console.log('拍摄的视频', res.tempFilePath)
|
||||
// 可以预览或上传视频
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="chooseVideo">选择视频</button>
|
||||
<button @click="recordVideo">拍摄视频</button>
|
||||
<video
|
||||
v-if="videoSrc"
|
||||
:src="videoSrc"
|
||||
controls
|
||||
class="video-player"
|
||||
></video>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
videoSrc: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseVideo() {
|
||||
uni.chooseVideo({
|
||||
sourceType: ['album'],
|
||||
maxDuration: 60,
|
||||
success: (res) => {
|
||||
this.videoSrc = res.tempFilePath
|
||||
uni.showToast({
|
||||
title: '选择成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: '选择失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
recordVideo() {
|
||||
uni.chooseVideo({
|
||||
sourceType: ['camera'],
|
||||
maxDuration: 30,
|
||||
camera: 'back',
|
||||
success: (res) => {
|
||||
this.videoSrc = res.tempFilePath
|
||||
uni.showToast({
|
||||
title: '拍摄成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.video-player {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 4: 上传视频
|
||||
|
||||
```javascript
|
||||
uni.chooseVideo({
|
||||
sourceType: ['album', 'camera'],
|
||||
maxDuration: 60,
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePath
|
||||
|
||||
// 上传视频
|
||||
uni.uploadFile({
|
||||
url: 'https://api.example.com/upload-video',
|
||||
filePath: tempFilePath,
|
||||
name: 'video',
|
||||
formData: {
|
||||
duration: res.duration,
|
||||
size: res.size
|
||||
},
|
||||
success: (uploadRes) => {
|
||||
const data = JSON.parse(uploadRes.data)
|
||||
console.log('上传成功', data.url)
|
||||
uni.showToast({
|
||||
title: '上传成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('上传失败', err)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 5: 限制视频时长和大小
|
||||
|
||||
```javascript
|
||||
uni.chooseVideo({
|
||||
sourceType: ['album', 'camera'],
|
||||
maxDuration: 30, // 最长30秒
|
||||
success: (res) => {
|
||||
// 检查视频大小(例如限制为50MB)
|
||||
const maxSize = 50 * 1024 * 1024 // 50MB
|
||||
if (res.size > maxSize) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '视频文件过大,请选择小于50MB的视频',
|
||||
showCancel: false
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 检查视频时长
|
||||
if (res.duration > 30) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '视频时长不能超过30秒',
|
||||
showCancel: false
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
console.log('视频符合要求', res)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| sourceType | Array | 否 | 选择视频的来源,可选值:album(相册)、camera(相机) |
|
||||
| maxDuration | Number | 否 | 拍摄视频最长拍摄时间,单位秒 |
|
||||
| camera | String | 否 | 使用前置或后置摄像头,可选值:back、front |
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| tempFilePath | String | 选定视频的临时文件路径 |
|
||||
| duration | Number | 选定视频的时间长度,单位秒 |
|
||||
| size | Number | 选定视频的数据量大小,单位字节 |
|
||||
| width | Number | 选定视频的宽度,单位 px |
|
||||
| height | Number | 选定视频的高度,单位 px |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 选择的视频是临时文件,需要上传到服务器才能永久保存
|
||||
2. `maxDuration` 用于限制拍摄时长
|
||||
3. 可以通过 `size` 检查视频文件大小
|
||||
4. 建议在拍摄前提示用户视频时长限制
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/media/video.html#choosevideo
|
||||
- **上传文件**: https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile
|
||||
@@ -0,0 +1,209 @@
|
||||
# uni.getImageInfo - 获取图片信息示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/media/image.html#getimageinfo
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.getImageInfo` 用于获取图片信息,包括宽度、高度、路径等。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.getImageInfo({
|
||||
src: 'https://example.com/image.jpg',
|
||||
success: (res) => {
|
||||
console.log('图片宽度', res.width)
|
||||
console.log('图片高度', res.height)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 获取网络图片信息
|
||||
|
||||
```javascript
|
||||
uni.getImageInfo({
|
||||
src: 'https://example.com/image.jpg',
|
||||
success: (res) => {
|
||||
console.log('图片宽度', res.width)
|
||||
console.log('图片高度', res.height)
|
||||
console.log('图片路径', res.path)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 获取本地图片信息
|
||||
|
||||
```javascript
|
||||
// 先选择图片
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0]
|
||||
|
||||
// 获取图片信息
|
||||
uni.getImageInfo({
|
||||
src: tempFilePath,
|
||||
success: (imageInfo) => {
|
||||
console.log('图片信息', imageInfo)
|
||||
// { width: 800, height: 600, path: '...' }
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="selectAndGetInfo">选择图片并获取信息</button>
|
||||
<view v-if="imageInfo" class="info">
|
||||
<text>宽度:{{ imageInfo.width }}px</text>
|
||||
<text>高度:{{ imageInfo.height }}px</text>
|
||||
<image :src="imageInfo.path" mode="aspectFit" class="preview"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageInfo: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectAndGetInfo() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0]
|
||||
uni.getImageInfo({
|
||||
src: tempFilePath,
|
||||
success: (imageInfo) => {
|
||||
this.imageInfo = imageInfo
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: '获取图片信息失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.info {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
.preview {
|
||||
width: 100%;
|
||||
max-height: 400px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 4: 计算图片宽高比
|
||||
|
||||
```javascript
|
||||
uni.getImageInfo({
|
||||
src: 'https://example.com/image.jpg',
|
||||
success: (res) => {
|
||||
const aspectRatio = res.width / res.height
|
||||
console.log('宽高比', aspectRatio)
|
||||
|
||||
// 根据宽高比调整显示
|
||||
if (aspectRatio > 1) {
|
||||
console.log('横向图片')
|
||||
} else {
|
||||
console.log('纵向图片')
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 5: 验证图片尺寸
|
||||
|
||||
```javascript
|
||||
function validateImageSize(imagePath, minWidth, minHeight) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getImageInfo({
|
||||
src: imagePath,
|
||||
success: (res) => {
|
||||
if (res.width >= minWidth && res.height >= minHeight) {
|
||||
resolve(res)
|
||||
} else {
|
||||
reject(new Error(`图片尺寸不符合要求,需要至少 ${minWidth}x${minHeight}`))
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 使用
|
||||
validateImageSize('https://example.com/image.jpg', 800, 600)
|
||||
.then(info => {
|
||||
console.log('图片符合要求', info)
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('验证失败', err)
|
||||
})
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| src | String | 是 | 图片的路径,可以是相对路径、临时文件路径或网络图片路径 |
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| width | Number | 图片宽度,单位 px |
|
||||
| height | Number | 图片高度,单位 px |
|
||||
| path | String | 返回图片的本地路径 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 网络图片需要配置合法域名
|
||||
2. 本地图片路径需要使用 `/static/` 开头或临时文件路径
|
||||
3. 获取图片信息是异步操作
|
||||
4. 可以用于验证图片尺寸、计算宽高比等
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/media/image.html#getimageinfo
|
||||
- **选择图片**: https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage
|
||||
@@ -0,0 +1,234 @@
|
||||
# uni.previewImage - 预览图片示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/media/image.html#previewimage
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.previewImage` 用于预览图片,支持缩放、滑动查看多张图片。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.previewImage({
|
||||
urls: ['https://example.com/image1.jpg'],
|
||||
current: 0
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 预览单张图片
|
||||
|
||||
```javascript
|
||||
uni.previewImage({
|
||||
urls: ['https://example.com/image1.jpg'],
|
||||
current: 'https://example.com/image1.jpg'
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 预览多张图片
|
||||
|
||||
```javascript
|
||||
const imageList = [
|
||||
'https://example.com/image1.jpg',
|
||||
'https://example.com/image2.jpg',
|
||||
'https://example.com/image3.jpg'
|
||||
]
|
||||
|
||||
uni.previewImage({
|
||||
urls: imageList,
|
||||
current: 0 // 从第一张开始
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="image-list">
|
||||
<image
|
||||
v-for="(item, index) in imageList"
|
||||
:key="index"
|
||||
:src="item"
|
||||
mode="aspectFill"
|
||||
class="image-item"
|
||||
@click="previewImage(index)"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageList: [
|
||||
'https://example.com/image1.jpg',
|
||||
'https://example.com/image2.jpg',
|
||||
'https://example.com/image3.jpg'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
previewImage(index) {
|
||||
uni.previewImage({
|
||||
urls: this.imageList,
|
||||
current: index
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.image-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.image-item {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin: 10rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 4: 从选择图片到预览
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="chooseAndPreview">选择并预览图片</button>
|
||||
<view class="image-list">
|
||||
<image
|
||||
v-for="(item, index) in selectedImages"
|
||||
:key="index"
|
||||
:src="item"
|
||||
mode="aspectFill"
|
||||
class="image-item"
|
||||
@click="previewSelected(index)"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedImages: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseAndPreview() {
|
||||
uni.chooseImage({
|
||||
count: 9,
|
||||
success: (res) => {
|
||||
this.selectedImages = res.tempFilePaths
|
||||
// 预览第一张
|
||||
if (res.tempFilePaths.length > 0) {
|
||||
uni.previewImage({
|
||||
urls: res.tempFilePaths,
|
||||
current: 0
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
previewSelected(index) {
|
||||
uni.previewImage({
|
||||
urls: this.selectedImages,
|
||||
current: index
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 长按保存图片
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<image
|
||||
:src="imageUrl"
|
||||
mode="aspectFit"
|
||||
@longpress="saveImage"
|
||||
class="preview-image"
|
||||
></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageUrl: 'https://example.com/image.jpg'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
saveImage() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['保存图片'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
uni.downloadFile({
|
||||
url: this.imageUrl,
|
||||
success: (downloadRes) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: downloadRes.tempFilePath,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| urls | Array | 是 | 需要预览的图片 http 链接列表 |
|
||||
| current | String/Number | 否 | 当前显示图片的索引或链接 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `urls` 必须是网络图片或已下载的本地路径
|
||||
2. `current` 可以是索引(Number)或图片链接(String)
|
||||
3. 预览时支持手势缩放和滑动切换
|
||||
4. 建议使用网络图片时确保图片可访问
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/media/image.html#previewimage
|
||||
- **选择图片**: https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage
|
||||
@@ -0,0 +1,274 @@
|
||||
# uni.saveImageToPhotosAlbum - 保存图片到相册示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/media/image.html#saveimagetophotosalbum
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.saveImageToPhotosAlbum` 用于保存图片到系统相册。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: '/tmp/image.jpg',
|
||||
success: () => {
|
||||
console.log('保存成功')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 保存网络图片
|
||||
|
||||
```javascript
|
||||
// 先下载图片
|
||||
uni.downloadFile({
|
||||
url: 'https://example.com/image.jpg',
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
// 保存到相册
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('保存失败', err)
|
||||
if (err.errMsg.includes('auth deny')) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '需要相册权限才能保存图片',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 保存选择的图片
|
||||
|
||||
```javascript
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0]
|
||||
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: tempFilePath,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('保存失败', err)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<image :src="imageUrl" mode="aspectFit" class="preview-image"></image>
|
||||
<button @click="saveImage">保存图片</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageUrl: 'https://example.com/image.jpg'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
saveImage() {
|
||||
// 先下载图片
|
||||
uni.downloadFile({
|
||||
url: this.imageUrl,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
if (err.errMsg.includes('auth deny')) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '需要相册权限,请在设置中开启',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
uni.openSetting()
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 检查权限
|
||||
|
||||
```javascript
|
||||
function saveImageWithPermission(filePath) {
|
||||
// 先检查权限
|
||||
uni.getSetting({
|
||||
success: (res) => {
|
||||
if (res.authSetting['scope.writePhotosAlbum']) {
|
||||
// 已授权,直接保存
|
||||
saveImage(filePath)
|
||||
} else {
|
||||
// 请求授权
|
||||
uni.authorize({
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success: () => {
|
||||
saveImage(filePath)
|
||||
},
|
||||
fail: () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '需要相册权限才能保存图片',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
uni.openSetting()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function saveImage(filePath) {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: filePath,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 5: 长按保存图片
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<image
|
||||
:src="imageUrl"
|
||||
mode="aspectFit"
|
||||
@longpress="handleLongPress"
|
||||
class="preview-image"
|
||||
></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageUrl: 'https://example.com/image.jpg'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleLongPress() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['保存图片'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
this.saveImage()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
saveImage() {
|
||||
uni.downloadFile({
|
||||
url: this.imageUrl,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| filePath | String | 是 | 图片文件路径,可以是临时文件路径或永久文件路径 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 需要用户授权相册权限
|
||||
2. 网络图片需要先下载到本地
|
||||
3. 如果权限被拒绝,可以引导用户到设置中开启
|
||||
4. 建议在保存前检查权限状态
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/media/image.html#saveimagetophotosalbum
|
||||
- **下载文件**: https://uniapp.dcloud.net.cn/api/request/network-file.html#downloadfile
|
||||
- **授权**: https://uniapp.dcloud.net.cn/api/other/authorize.html#authorize
|
||||
@@ -0,0 +1,177 @@
|
||||
# uni.navigateBack - 返回上一页示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/router.html#navigateback
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.navigateBack` 用于关闭当前页面,返回上一页面或多级页面。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.navigateBack()
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本返回
|
||||
|
||||
```javascript
|
||||
uni.navigateBack({
|
||||
success: () => {
|
||||
console.log('返回成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('返回失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 返回多级页面
|
||||
|
||||
```javascript
|
||||
// 返回上一页
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
|
||||
// 返回上两页
|
||||
uni.navigateBack({
|
||||
delta: 2
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="goBack">返回</button>
|
||||
<button @click="goBackTwoPages">返回上两页</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
goBackTwoPages() {
|
||||
uni.navigateBack({
|
||||
delta: 2
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 带数据返回
|
||||
|
||||
```vue
|
||||
<!-- 当前页面 -->
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="saveAndBack">保存并返回</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
name: 'test',
|
||||
value: '123'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
saveAndBack() {
|
||||
// 保存数据到上一页
|
||||
const pages = getCurrentPages()
|
||||
const prevPage = pages[pages.length - 2]
|
||||
if (prevPage) {
|
||||
prevPage.setData({
|
||||
savedData: this.formData
|
||||
})
|
||||
}
|
||||
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 返回前确认
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="handleBack">返回</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
hasChanges: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleBack() {
|
||||
if (this.hasChanges) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '有未保存的更改,确定要返回吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| delta | Number | 否 | 返回的页面数,如果 delta 大于现有页面数,则返回到首页 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `delta` 默认为 1,表示返回上一页
|
||||
2. 如果 `delta` 大于现有页面数,会返回到首页
|
||||
3. 可以通过 `getCurrentPages()` 获取页面栈信息
|
||||
4. 返回时可以传递数据给上一页
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/router.html#navigateback
|
||||
- **页面跳转**: https://uniapp.dcloud.net.cn/api/router.html#navigateto
|
||||
@@ -0,0 +1,151 @@
|
||||
# uni.navigateTo - 页面跳转示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/router.html#navigateto
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.navigateTo` 用于保留当前页面,跳转到应用内的某个页面。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.navigateTo({
|
||||
url: '/pages/detail/detail'
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本跳转
|
||||
|
||||
```javascript
|
||||
uni.navigateTo({
|
||||
url: '/pages/detail/detail',
|
||||
success: () => {
|
||||
console.log('跳转成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('跳转失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 带参数跳转
|
||||
|
||||
```javascript
|
||||
// 跳转并传递参数
|
||||
uni.navigateTo({
|
||||
url: '/pages/detail/detail?id=123&name=test'
|
||||
})
|
||||
|
||||
// 在目标页面接收参数
|
||||
// pages/detail/detail.vue
|
||||
export default {
|
||||
onLoad(options) {
|
||||
console.log('接收到的参数', options)
|
||||
// { id: '123', name: 'test' }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 传递对象参数
|
||||
|
||||
```javascript
|
||||
// 传递对象
|
||||
const params = {
|
||||
id: 123,
|
||||
name: 'test',
|
||||
data: { key: 'value' }
|
||||
}
|
||||
|
||||
// 需要序列化
|
||||
uni.navigateTo({
|
||||
url: `/pages/detail/detail?data=${encodeURIComponent(JSON.stringify(params))}`
|
||||
})
|
||||
|
||||
// 在目标页面解析
|
||||
export default {
|
||||
onLoad(options) {
|
||||
const data = JSON.parse(decodeURIComponent(options.data))
|
||||
console.log('解析后的数据', data)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 4: 在组件中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="goToDetail">查看详情</button>
|
||||
<button @click="goToDetailWithParams">带参数跳转</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goToDetail() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/detail/detail'
|
||||
})
|
||||
},
|
||||
goToDetailWithParams() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/detail/detail?id=123&name=test'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 封装跳转函数
|
||||
|
||||
```javascript
|
||||
// utils/navigation.js
|
||||
const navigation = {
|
||||
// 跳转到详情页
|
||||
toDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/detail/detail?id=${id}`
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转到用户页
|
||||
toUser(userId) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/user/user?id=${userId}`
|
||||
})
|
||||
},
|
||||
|
||||
// 通用跳转
|
||||
navigate(url, params = {}) {
|
||||
const query = Object.keys(params)
|
||||
.map(key => `${key}=${encodeURIComponent(params[key])}`)
|
||||
.join('&')
|
||||
const fullUrl = query ? `${url}?${query}` : url
|
||||
uni.navigateTo({
|
||||
url: fullUrl
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
navigation.toDetail(123)
|
||||
navigation.navigate('/pages/detail/detail', { id: 123, name: 'test' })
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 不能跳转到 tabBar 页面,需要使用 `uni.switchTab`
|
||||
2. 路径前需要加 `/`,表示从根目录开始
|
||||
3. 参数会拼接在 URL 后面,长度有限制
|
||||
4. 复杂对象需要序列化后传递
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/router.html#navigateto
|
||||
- **其他路由 API**: https://uniapp.dcloud.net.cn/api/router.html
|
||||
@@ -0,0 +1,152 @@
|
||||
# uni.reLaunch - 重新启动应用示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/router.html#relaunch
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.reLaunch` 用于关闭所有页面,打开到应用内的某个页面。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本重新启动
|
||||
|
||||
```javascript
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index',
|
||||
success: () => {
|
||||
console.log('重新启动成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('重新启动失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 退出登录后重新启动
|
||||
|
||||
```javascript
|
||||
function logout() {
|
||||
// 清除所有数据
|
||||
uni.clearStorageSync()
|
||||
|
||||
// 重新启动到登录页
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="restartApp">重新启动应用</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
restartApp() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要重新启动应用吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 与 navigateTo 和 redirectTo 的区别
|
||||
|
||||
```javascript
|
||||
// navigateTo: 保留当前页面,可以返回
|
||||
uni.navigateTo({
|
||||
url: '/pages/detail/detail'
|
||||
})
|
||||
// 页面栈: [首页, 详情页]
|
||||
|
||||
// redirectTo: 关闭当前页面,不能返回
|
||||
uni.redirectTo({
|
||||
url: '/pages/detail/detail'
|
||||
})
|
||||
// 页面栈: [详情页] (首页被关闭)
|
||||
|
||||
// reLaunch: 关闭所有页面,重新启动
|
||||
uni.reLaunch({
|
||||
url: '/pages/detail/detail'
|
||||
})
|
||||
// 页面栈: [详情页] (所有页面都被关闭)
|
||||
```
|
||||
|
||||
### 示例 5: 登录后重新启动
|
||||
|
||||
```javascript
|
||||
function login() {
|
||||
uni.request({
|
||||
url: 'https://api.example.com/login',
|
||||
method: 'POST',
|
||||
data: { username: 'test', password: '123456' },
|
||||
success: (res) => {
|
||||
if (res.data.success) {
|
||||
uni.setStorageSync('token', res.data.token)
|
||||
// 重新启动到首页
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 不能跳转到 tabBar 页面,需要使用 `uni.switchTab`
|
||||
2. 会关闭所有页面,无法返回
|
||||
3. 路径前需要加 `/`,表示从根目录开始
|
||||
4. 适合退出登录、重新启动等场景
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/router.html#relaunch
|
||||
- **页面跳转**: https://uniapp.dcloud.net.cn/api/router.html#navigateto
|
||||
@@ -0,0 +1,146 @@
|
||||
# uni.redirectTo - 重定向跳转示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/router.html#redirectto
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.redirectTo` 用于关闭当前页面,跳转到应用内的某个页面。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.redirectTo({
|
||||
url: '/pages/detail/detail'
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本重定向
|
||||
|
||||
```javascript
|
||||
uni.redirectTo({
|
||||
url: '/pages/detail/detail',
|
||||
success: () => {
|
||||
console.log('跳转成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('跳转失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 带参数重定向
|
||||
|
||||
```javascript
|
||||
uni.redirectTo({
|
||||
url: '/pages/detail/detail?id=123&name=test'
|
||||
})
|
||||
|
||||
// 在目标页面接收参数
|
||||
// pages/detail/detail.vue
|
||||
export default {
|
||||
onLoad(options) {
|
||||
console.log('接收到的参数', options)
|
||||
// { id: '123', name: 'test' }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 登录后重定向
|
||||
|
||||
```javascript
|
||||
function login() {
|
||||
// 登录逻辑
|
||||
uni.request({
|
||||
url: 'https://api.example.com/login',
|
||||
method: 'POST',
|
||||
data: { username: 'test', password: '123456' },
|
||||
success: (res) => {
|
||||
if (res.data.success) {
|
||||
// 保存 token
|
||||
uni.setStorageSync('token', res.data.token)
|
||||
// 重定向到首页(关闭登录页)
|
||||
uni.redirectTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 4: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="goToDetail">跳转到详情页</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goToDetail() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/detail/detail?id=123'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 与 navigateTo 的区别
|
||||
|
||||
```javascript
|
||||
// navigateTo: 保留当前页面,可以返回
|
||||
uni.navigateTo({
|
||||
url: '/pages/detail/detail'
|
||||
})
|
||||
// 页面栈: [首页, 详情页]
|
||||
|
||||
// redirectTo: 关闭当前页面,不能返回
|
||||
uni.redirectTo({
|
||||
url: '/pages/detail/detail'
|
||||
})
|
||||
// 页面栈: [详情页] (首页被关闭)
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 不能跳转到 tabBar 页面,需要使用 `uni.switchTab`
|
||||
2. 会关闭当前页面,无法返回
|
||||
3. 路径前需要加 `/`,表示从根目录开始
|
||||
4. 适合登录后跳转等不需要返回的场景
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/router.html#redirectto
|
||||
- **保留页面跳转**: https://uniapp.dcloud.net.cn/api/router.html#navigateto
|
||||
- **重新启动**: https://uniapp.dcloud.net.cn/api/router.html#relaunch
|
||||
@@ -0,0 +1,149 @@
|
||||
# uni.switchTab - 切换 TabBar 页面示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/router.html#switchtab
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.switchTab` 用于跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本切换
|
||||
|
||||
```javascript
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index',
|
||||
success: () => {
|
||||
console.log('切换成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('切换失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="goToHome">回到首页</button>
|
||||
<button @click="goToCategory">分类</button>
|
||||
<button @click="goToCart">购物车</button>
|
||||
<button @click="goToProfile">我的</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goToHome() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
},
|
||||
goToCategory() {
|
||||
uni.switchTab({
|
||||
url: '/pages/category/category'
|
||||
})
|
||||
},
|
||||
goToCart() {
|
||||
uni.switchTab({
|
||||
url: '/pages/cart/cart'
|
||||
})
|
||||
},
|
||||
goToProfile() {
|
||||
uni.switchTab({
|
||||
url: '/pages/profile/profile'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 登录后跳转到首页
|
||||
|
||||
```javascript
|
||||
function login() {
|
||||
uni.request({
|
||||
url: 'https://api.example.com/login',
|
||||
method: 'POST',
|
||||
data: { username: 'test', password: '123456' },
|
||||
success: (res) => {
|
||||
if (res.data.success) {
|
||||
uni.setStorageSync('token', res.data.token)
|
||||
// 跳转到 tabBar 首页
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 4: 封装切换函数
|
||||
|
||||
```javascript
|
||||
// utils/navigation.js
|
||||
const navigation = {
|
||||
switchToTab(url) {
|
||||
uni.switchTab({
|
||||
url: url,
|
||||
fail: (err) => {
|
||||
console.error('切换失败', err)
|
||||
// 如果不是 tabBar 页面,使用 navigateTo
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
navigation.switchToTab('/pages/index/index')
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| url | String | 是 | 需要跳转的 tabBar 页面的路径 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 只能跳转到 `pages.json` 中配置的 tabBar 页面
|
||||
2. 不能传递参数(URL 参数会被忽略)
|
||||
3. 会关闭所有非 tabBar 页面
|
||||
4. 如果目标页面不是 tabBar 页面,会触发 fail 回调
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/router.html#switchtab
|
||||
- **页面跳转**: https://uniapp.dcloud.net.cn/api/router.html#navigateto
|
||||
@@ -0,0 +1,234 @@
|
||||
# uni.downloadFile - 下载文件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/request/network-file.html#downloadfile
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.downloadFile` 用于下载文件资源到本地。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.downloadFile({
|
||||
url: 'https://example.com/file.pdf',
|
||||
success: (res) => {
|
||||
console.log('下载成功', res.tempFilePath)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 下载图片
|
||||
|
||||
```javascript
|
||||
uni.downloadFile({
|
||||
url: 'https://example.com/image.jpg',
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
console.log('下载成功', res.tempFilePath)
|
||||
// 可以预览或保存图片
|
||||
uni.previewImage({
|
||||
urls: [res.tempFilePath]
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('下载失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 下载并保存到相册
|
||||
|
||||
```javascript
|
||||
uni.downloadFile({
|
||||
url: 'https://example.com/image.jpg',
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
// 保存到相册
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('保存失败', err)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 显示下载进度
|
||||
|
||||
```javascript
|
||||
uni.downloadFile({
|
||||
url: 'https://example.com/large-file.pdf',
|
||||
success: (res) => {
|
||||
console.log('下载完成', res.tempFilePath)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('下载失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="downloadFile">下载文件</button>
|
||||
<view v-if="downloading" class="download-status">
|
||||
<text>下载中...</text>
|
||||
</view>
|
||||
<view v-if="filePath" class="file-info">
|
||||
<text>文件路径:{{ filePath }}</text>
|
||||
<button @click="openFile">打开文件</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
downloading: false,
|
||||
filePath: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
downloadFile() {
|
||||
this.downloading = true
|
||||
uni.downloadFile({
|
||||
url: 'https://example.com/file.pdf',
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
this.filePath = res.tempFilePath
|
||||
this.downloading = false
|
||||
uni.showToast({
|
||||
title: '下载成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
this.downloading = false
|
||||
uni.showToast({
|
||||
title: '下载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
openFile() {
|
||||
// 打开文件
|
||||
uni.openDocument({
|
||||
filePath: this.filePath,
|
||||
success: () => {
|
||||
console.log('打开成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 封装下载函数
|
||||
|
||||
```javascript
|
||||
// utils/download.js
|
||||
const download = {
|
||||
downloadFile(url, options = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.downloadFile({
|
||||
url: url,
|
||||
header: options.header || {},
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
resolve(res.tempFilePath)
|
||||
} else {
|
||||
reject(new Error(`下载失败,状态码:${res.statusCode}`))
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
async downloadAndSave(url) {
|
||||
try {
|
||||
const filePath = await this.downloadFile(url)
|
||||
// 根据文件类型保存
|
||||
if (filePath.endsWith('.jpg') || filePath.endsWith('.png')) {
|
||||
await uni.saveImageToPhotosAlbum({ filePath })
|
||||
} else {
|
||||
await uni.saveFile({ tempFilePath: filePath })
|
||||
}
|
||||
return filePath
|
||||
} catch (err) {
|
||||
throw err
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
download.downloadFile('https://example.com/file.pdf')
|
||||
.then(filePath => {
|
||||
console.log('下载成功', filePath)
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('下载失败', err)
|
||||
})
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| url | String | 是 | 下载资源的 url |
|
||||
| header | Object | 否 | HTTP 请求 Header |
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| tempFilePath | String | 临时文件路径,下载后的文件会存储到一个临时文件 |
|
||||
| statusCode | Number | HTTP 状态码 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 下载的文件是临时文件,需要保存才能永久使用
|
||||
2. 可以通过 `statusCode` 判断下载是否成功
|
||||
3. 下载的文件路径是临时路径,应用关闭后可能失效
|
||||
4. 建议下载后立即保存或使用
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/request/network-file.html#downloadfile
|
||||
- **保存文件**: https://uniapp.dcloud.net.cn/api/file/file.html#savefile
|
||||
- **打开文档**: https://uniapp.dcloud.net.cn/api/file/file.html#opendocument
|
||||
@@ -0,0 +1,287 @@
|
||||
# uni.request - 网络请求示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/request/request.html
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.request` 用于发起网络请求,支持 GET、POST、PUT、DELETE 等方法。
|
||||
|
||||
## 基础用法
|
||||
|
||||
### GET 请求
|
||||
|
||||
```javascript
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
method: 'GET',
|
||||
success: (res) => {
|
||||
console.log('请求成功', res.data)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('请求失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### POST 请求
|
||||
|
||||
```javascript
|
||||
uni.request({
|
||||
url: 'https://api.example.com/user',
|
||||
method: 'POST',
|
||||
data: {
|
||||
name: 'John',
|
||||
age: 30
|
||||
},
|
||||
header: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
success: (res) => {
|
||||
console.log('请求成功', res.data)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 带参数的 GET 请求
|
||||
|
||||
```javascript
|
||||
uni.request({
|
||||
url: 'https://api.example.com/users',
|
||||
method: 'GET',
|
||||
data: {
|
||||
page: 1,
|
||||
limit: 10
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
console.log('用户列表', res.data)
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: '请求失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: POST 请求上传数据
|
||||
|
||||
```javascript
|
||||
uni.request({
|
||||
url: 'https://api.example.com/users',
|
||||
method: 'POST',
|
||||
data: {
|
||||
name: 'John Doe',
|
||||
email: 'john@example.com',
|
||||
age: 30
|
||||
},
|
||||
header: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer token123'
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200 || res.statusCode === 201) {
|
||||
uni.showToast({
|
||||
title: '创建成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 使用 Promise
|
||||
|
||||
```javascript
|
||||
// Promise 方式(部分平台支持)
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data'
|
||||
}).then(res => {
|
||||
console.log('请求成功', res.data)
|
||||
}).catch(err => {
|
||||
console.error('请求失败', err)
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 封装请求函数
|
||||
|
||||
```javascript
|
||||
// utils/request.js
|
||||
const request = (options) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: options.url,
|
||||
method: options.method || 'GET',
|
||||
data: options.data || {},
|
||||
header: {
|
||||
'Content-Type': 'application/json',
|
||||
...options.header
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
resolve(res.data)
|
||||
} else {
|
||||
reject(new Error(`请求失败: ${res.statusCode}`))
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 使用
|
||||
request({
|
||||
url: 'https://api.example.com/data',
|
||||
method: 'GET'
|
||||
}).then(data => {
|
||||
console.log('数据', data)
|
||||
}).catch(err => {
|
||||
console.error('错误', err)
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 5: 请求拦截和响应拦截
|
||||
|
||||
```javascript
|
||||
// utils/http.js
|
||||
const baseURL = 'https://api.example.com'
|
||||
|
||||
// 请求拦截
|
||||
const requestInterceptor = (config) => {
|
||||
// 添加 token
|
||||
const token = uni.getStorageSync('token')
|
||||
if (token) {
|
||||
config.header = {
|
||||
...config.header,
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
}
|
||||
return config
|
||||
}
|
||||
|
||||
// 响应拦截
|
||||
const responseInterceptor = (res) => {
|
||||
if (res.statusCode === 401) {
|
||||
// token 过期,跳转登录
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
return Promise.reject(new Error('未授权'))
|
||||
}
|
||||
return res.data
|
||||
}
|
||||
|
||||
const http = {
|
||||
request(options) {
|
||||
const config = requestInterceptor({
|
||||
url: baseURL + options.url,
|
||||
method: options.method || 'GET',
|
||||
data: options.data || {},
|
||||
header: options.header || {}
|
||||
})
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
...config,
|
||||
success: (res) => {
|
||||
try {
|
||||
const data = responseInterceptor(res)
|
||||
resolve(data)
|
||||
} catch (err) {
|
||||
reject(err)
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default http
|
||||
```
|
||||
|
||||
### 示例 6: 超时处理
|
||||
|
||||
```javascript
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
method: 'GET',
|
||||
timeout: 5000, // 5秒超时
|
||||
success: (res) => {
|
||||
console.log('请求成功', res.data)
|
||||
},
|
||||
fail: (err) => {
|
||||
if (err.errMsg && err.errMsg.includes('timeout')) {
|
||||
uni.showToast({
|
||||
title: '请求超时',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请求失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 7: 处理不同数据类型
|
||||
|
||||
```javascript
|
||||
// JSON 数据
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
dataType: 'json',
|
||||
success: (res) => {
|
||||
console.log('JSON 数据', res.data)
|
||||
}
|
||||
})
|
||||
|
||||
// 文本数据
|
||||
uni.request({
|
||||
url: 'https://api.example.com/text',
|
||||
dataType: 'text',
|
||||
success: (res) => {
|
||||
console.log('文本数据', res.data)
|
||||
}
|
||||
})
|
||||
|
||||
// ArrayBuffer 数据
|
||||
uni.request({
|
||||
url: 'https://api.example.com/binary',
|
||||
responseType: 'arraybuffer',
|
||||
success: (res) => {
|
||||
console.log('二进制数据', res.data)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 平台差异
|
||||
|
||||
- **H5**: 支持 `withCredentials` 参数,用于跨域请求携带凭证
|
||||
- **App**: 支持 `sslVerify` 参数,用于验证 SSL 证书
|
||||
- **App**: 支持 `firstIpv4` 参数,DNS 解析时优先使用 IPv4
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 默认超时时间为 60000ms(60秒)
|
||||
2. 默认 `dataType` 为 `json`,会自动解析 JSON 数据
|
||||
3. 请求 header 中不能设置 `Referer`
|
||||
4. 部分平台支持 Promise 方式调用
|
||||
5. 建议封装统一的请求函数,便于统一处理错误和拦截
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/request/request.html
|
||||
- **网络请求最佳实践**: https://uniapp.dcloud.net.cn/api/request/request.html
|
||||
@@ -0,0 +1,262 @@
|
||||
# uni.uploadFile - 上传文件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.uploadFile` 用于将本地资源上传到服务器。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.uploadFile({
|
||||
url: 'https://api.example.com/upload',
|
||||
filePath: '/tmp/image.jpg',
|
||||
name: 'file',
|
||||
success: (res) => {
|
||||
console.log('上传成功', res.data)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 上传图片
|
||||
|
||||
```javascript
|
||||
// 先选择图片
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0]
|
||||
|
||||
// 上传图片
|
||||
uni.uploadFile({
|
||||
url: 'https://api.example.com/upload',
|
||||
filePath: tempFilePath,
|
||||
name: 'file',
|
||||
formData: {
|
||||
'user': 'test'
|
||||
},
|
||||
success: (uploadRes) => {
|
||||
const data = JSON.parse(uploadRes.data)
|
||||
console.log('上传成功', data.url)
|
||||
uni.showToast({
|
||||
title: '上传成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('上传失败', err)
|
||||
uni.showToast({
|
||||
title: '上传失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 上传多张图片
|
||||
|
||||
```javascript
|
||||
uni.chooseImage({
|
||||
count: 9,
|
||||
success: (res) => {
|
||||
const tempFilePaths = res.tempFilePaths
|
||||
let uploadCount = 0
|
||||
|
||||
tempFilePaths.forEach((filePath, index) => {
|
||||
uni.uploadFile({
|
||||
url: 'https://api.example.com/upload',
|
||||
filePath: filePath,
|
||||
name: 'file',
|
||||
success: () => {
|
||||
uploadCount++
|
||||
if (uploadCount === tempFilePaths.length) {
|
||||
uni.showToast({
|
||||
title: '全部上传成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error(`第${index + 1}张图片上传失败`, err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 显示上传进度
|
||||
|
||||
```javascript
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0]
|
||||
|
||||
uni.uploadFile({
|
||||
url: 'https://api.example.com/upload',
|
||||
filePath: tempFilePath,
|
||||
name: 'file',
|
||||
success: (res) => {
|
||||
console.log('上传成功', res)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('上传失败', err)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="uploadImage">上传图片</button>
|
||||
<view v-if="uploading" class="upload-status">
|
||||
<text>上传中...</text>
|
||||
</view>
|
||||
<image v-if="imageUrl" :src="imageUrl" mode="aspectFit" class="uploaded-image"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
uploading: false,
|
||||
imageUrl: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
uploadImage() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
this.uploading = true
|
||||
const tempFilePath = res.tempFilePaths[0]
|
||||
|
||||
uni.uploadFile({
|
||||
url: 'https://api.example.com/upload',
|
||||
filePath: tempFilePath,
|
||||
name: 'file',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + uni.getStorageSync('token')
|
||||
},
|
||||
success: (uploadRes) => {
|
||||
const data = JSON.parse(uploadRes.data)
|
||||
this.imageUrl = data.url
|
||||
this.uploading = false
|
||||
uni.showToast({
|
||||
title: '上传成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
this.uploading = false
|
||||
uni.showToast({
|
||||
title: '上传失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 封装上传函数
|
||||
|
||||
```javascript
|
||||
// utils/upload.js
|
||||
const upload = {
|
||||
uploadImage(filePath, options = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: options.url || 'https://api.example.com/upload',
|
||||
filePath: filePath,
|
||||
name: options.name || 'file',
|
||||
formData: options.formData || {},
|
||||
header: options.header || {},
|
||||
success: (res) => {
|
||||
try {
|
||||
const data = JSON.parse(res.data)
|
||||
resolve(data)
|
||||
} catch (e) {
|
||||
resolve(res.data)
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
const filePath = '/tmp/image.jpg'
|
||||
upload.uploadImage(filePath, {
|
||||
url: 'https://api.example.com/upload',
|
||||
formData: { userId: '123' }
|
||||
}).then(data => {
|
||||
console.log('上传成功', data)
|
||||
}).catch(err => {
|
||||
console.error('上传失败', err)
|
||||
})
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| url | String | 是 | 开发者服务器地址 |
|
||||
| filePath | String | 是 | 要上传文件资源的路径 |
|
||||
| name | String | 是 | 文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容 |
|
||||
| header | Object | 否 | HTTP 请求 Header |
|
||||
| formData | Object | 否 | HTTP 请求中其他额外的 form data |
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| data | String | 服务器返回的数据 |
|
||||
| statusCode | Number | HTTP 状态码 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 上传文件前需要先选择文件(使用 `uni.chooseImage` 等)
|
||||
2. `filePath` 必须是本地路径
|
||||
3. 可以通过 `formData` 传递额外的表单数据
|
||||
4. 建议在请求头中添加认证信息
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile
|
||||
- **选择图片**: https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage
|
||||
- **下载文件**: https://uniapp.dcloud.net.cn/api/request/network-file.html#downloadfile
|
||||
@@ -0,0 +1,137 @@
|
||||
# uni.clearStorage - 清除所有存储数据示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/storage/storage.html#clearstorage
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.clearStorage` 用于清理本地数据缓存,清除所有存储的数据。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.clearStorage({
|
||||
success: () => {
|
||||
console.log('清除成功')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 清除所有数据
|
||||
|
||||
```javascript
|
||||
uni.clearStorage({
|
||||
success: () => {
|
||||
console.log('所有数据已清除')
|
||||
uni.showToast({
|
||||
title: '清除成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('清除失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 退出登录时清除
|
||||
|
||||
```javascript
|
||||
function logout() {
|
||||
uni.clearStorage({
|
||||
success: () => {
|
||||
console.log('数据已清除')
|
||||
// 跳转到登录页
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="clearAllData">清除所有数据</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
clearAllData() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要清除所有数据吗?此操作不可恢复',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.clearStorage({
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '清除成功',
|
||||
icon: 'success'
|
||||
})
|
||||
// 重新加载页面
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}, 1500)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 同步版本
|
||||
|
||||
```javascript
|
||||
try {
|
||||
uni.clearStorageSync()
|
||||
console.log('清除成功')
|
||||
} catch (err) {
|
||||
console.error('清除失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
此 API 无需参数。
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 此操作会清除所有本地存储的数据,请谨慎使用
|
||||
2. 建议在清除前提示用户确认
|
||||
3. 同步版本 `clearStorageSync` 性能更好
|
||||
4. 清除后可能需要重新登录或初始化数据
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/storage/storage.html#clearstorage
|
||||
- **同步版本**: https://uniapp.dcloud.net.cn/api/storage/storage.html#clearstoragesync
|
||||
- **删除单个**: https://uniapp.dcloud.net.cn/api/storage/storage.html#removestorage
|
||||
@@ -0,0 +1,202 @@
|
||||
# uni.getStorageInfo - 获取存储信息示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/storage/storage.html#getstorageinfo
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.getStorageInfo` 用于异步获取当前 storage 的相关信息。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.getStorageInfo({
|
||||
success: (res) => {
|
||||
console.log('存储信息', res)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 获取存储信息
|
||||
|
||||
```javascript
|
||||
uni.getStorageInfo({
|
||||
success: (res) => {
|
||||
console.log('所有key', res.keys)
|
||||
console.log('当前占用的空间大小', res.currentSize, 'KB')
|
||||
console.log('限制的空间大小', res.limitSize, 'KB')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 检查存储空间
|
||||
|
||||
```javascript
|
||||
function checkStorageSpace() {
|
||||
uni.getStorageInfo({
|
||||
success: (res) => {
|
||||
const usagePercent = (res.currentSize / res.limitSize * 100).toFixed(2)
|
||||
console.log(`存储使用率:${usagePercent}%`)
|
||||
|
||||
if (usagePercent > 80) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '存储空间不足,建议清理缓存',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="getStorageInfo">查看存储信息</button>
|
||||
<view v-if="storageInfo" class="storage-info">
|
||||
<text>已使用:{{ storageInfo.currentSize }}KB / {{ storageInfo.limitSize }}KB</text>
|
||||
<text>使用率:{{ usagePercent }}%</text>
|
||||
<text>存储的key数量:{{ storageInfo.keys.length }}</text>
|
||||
<view class="key-list">
|
||||
<text v-for="key in storageInfo.keys" :key="key" class="key-item">
|
||||
{{ key }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
storageInfo: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
usagePercent() {
|
||||
if (!this.storageInfo) return 0
|
||||
return ((this.storageInfo.currentSize / this.storageInfo.limitSize) * 100).toFixed(2)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStorageInfo() {
|
||||
uni.getStorageInfo({
|
||||
success: (res) => {
|
||||
this.storageInfo = res
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.storage-info {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.key-list {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.key-item {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 4: 清理存储空间
|
||||
|
||||
```javascript
|
||||
function clearStorageIfNeeded() {
|
||||
uni.getStorageInfo({
|
||||
success: (res) => {
|
||||
const usagePercent = (res.currentSize / res.limitSize) * 100
|
||||
|
||||
if (usagePercent > 80) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '存储空间不足,是否清理缓存?',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
// 清理非关键数据
|
||||
const importantKeys = ['token', 'userInfo']
|
||||
res.keys.forEach(key => {
|
||||
if (!importantKeys.includes(key)) {
|
||||
uni.removeStorageSync(key)
|
||||
}
|
||||
})
|
||||
uni.showToast({
|
||||
title: '清理完成',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 5: 同步版本
|
||||
|
||||
```javascript
|
||||
try {
|
||||
const storageInfo = uni.getStorageInfoSync()
|
||||
console.log('所有key', storageInfo.keys)
|
||||
console.log('当前大小', storageInfo.currentSize, 'KB')
|
||||
console.log('限制大小', storageInfo.limitSize, 'KB')
|
||||
} catch (err) {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| keys | Array | 当前 storage 中所有的 key |
|
||||
| currentSize | Number | 当前占用的空间大小,单位 KB |
|
||||
| limitSize | Number | 限制的空间大小,单位 KB |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 可以通过 `keys` 获取所有存储的 key
|
||||
2. `currentSize` 和 `limitSize` 单位都是 KB
|
||||
3. 建议定期检查存储空间使用情况
|
||||
4. 同步版本 `getStorageInfoSync` 性能更好
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/storage/storage.html#getstorageinfo
|
||||
- **同步版本**: https://uniapp.dcloud.net.cn/api/storage/storage.html#getstorageinfosync
|
||||
- **清除存储**: https://uniapp.dcloud.net.cn/api/storage/storage.html#clearstorage
|
||||
@@ -0,0 +1,200 @@
|
||||
# uni.getStorageSync - 同步获取存储数据示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/storage/storage.html#getstoragesync
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.getStorageSync` 用于从本地缓存中同步获取指定 key 的内容。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
try {
|
||||
const value = uni.getStorageSync('key')
|
||||
console.log('获取的数据', value)
|
||||
} catch (err) {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 获取用户信息
|
||||
|
||||
```javascript
|
||||
try {
|
||||
const userInfo = uni.getStorageSync('userInfo')
|
||||
if (userInfo) {
|
||||
console.log('用户信息', userInfo)
|
||||
} else {
|
||||
console.log('数据不存在')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 2: 获取 Token
|
||||
|
||||
```javascript
|
||||
function getToken() {
|
||||
try {
|
||||
const token = uni.getStorageSync('token')
|
||||
return token || null
|
||||
} catch (err) {
|
||||
console.error('获取Token失败', err)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
const token = getToken()
|
||||
if (token) {
|
||||
console.log('Token存在', token)
|
||||
} else {
|
||||
console.log('未登录')
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="userInfo" class="user-info">
|
||||
<text>用户名:{{ userInfo.name }}</text>
|
||||
<text>邮箱:{{ userInfo.email }}</text>
|
||||
</view>
|
||||
<view v-else>
|
||||
<text>未登录</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: null
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadUserInfo()
|
||||
},
|
||||
methods: {
|
||||
loadUserInfo() {
|
||||
try {
|
||||
const userInfo = uni.getStorageSync('userInfo')
|
||||
if (userInfo) {
|
||||
this.userInfo = userInfo
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取用户信息失败', err)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 封装获取函数
|
||||
|
||||
```javascript
|
||||
// utils/storage.js
|
||||
const storage = {
|
||||
get(key, defaultValue = null) {
|
||||
try {
|
||||
const value = uni.getStorageSync(key)
|
||||
return value !== '' ? value : defaultValue
|
||||
} catch (err) {
|
||||
console.error(`获取${key}失败`, err)
|
||||
return defaultValue
|
||||
}
|
||||
},
|
||||
|
||||
getString(key, defaultValue = '') {
|
||||
return this.get(key, defaultValue)
|
||||
},
|
||||
|
||||
getNumber(key, defaultValue = 0) {
|
||||
const value = this.get(key, defaultValue)
|
||||
return Number(value) || defaultValue
|
||||
},
|
||||
|
||||
getBoolean(key, defaultValue = false) {
|
||||
const value = this.get(key, defaultValue)
|
||||
return Boolean(value)
|
||||
},
|
||||
|
||||
getObject(key, defaultValue = {}) {
|
||||
const value = this.get(key, defaultValue)
|
||||
return typeof value === 'object' ? value : defaultValue
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
const userInfo = storage.getObject('userInfo', {})
|
||||
const token = storage.getString('token', '')
|
||||
const count = storage.getNumber('count', 0)
|
||||
```
|
||||
|
||||
### 示例 5: 检查数据是否存在
|
||||
|
||||
```javascript
|
||||
function hasStorage(key) {
|
||||
try {
|
||||
const value = uni.getStorageSync(key)
|
||||
return value !== '' && value !== null && value !== undefined
|
||||
} catch (err) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
if (hasStorage('userInfo')) {
|
||||
console.log('用户信息存在')
|
||||
} else {
|
||||
console.log('用户信息不存在')
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| key | String | 是 | 本地缓存中指定的 key |
|
||||
|
||||
## 返回值
|
||||
|
||||
| 类型 | 说明 |
|
||||
|------|------|
|
||||
| Any | key 对应的内容 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 同步接口会阻塞后续代码执行,性能比异步接口好
|
||||
2. 如果 key 不存在,返回空字符串
|
||||
3. 建议使用 try-catch 处理错误
|
||||
4. 适合在页面初始化时获取数据
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/storage/storage.html#getstoragesync
|
||||
- **异步版本**: https://uniapp.dcloud.net.cn/api/storage/storage.html#getstorage
|
||||
- **设置存储**: https://uniapp.dcloud.net.cn/api/storage/storage.html#setstoragesync
|
||||
@@ -0,0 +1,175 @@
|
||||
# uni.getStorage - 获取存储数据示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/storage/storage.html#getstorage
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.getStorage` 用于从本地缓存中异步获取指定 key 的内容。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.getStorage({
|
||||
key: 'userInfo',
|
||||
success: (res) => {
|
||||
console.log('获取的数据', res.data)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 获取用户信息
|
||||
|
||||
```javascript
|
||||
uni.getStorage({
|
||||
key: 'userInfo',
|
||||
success: (res) => {
|
||||
const userInfo = res.data
|
||||
console.log('用户信息', userInfo)
|
||||
// 使用用户信息
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('获取失败', err)
|
||||
// 数据不存在或获取失败
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 获取字符串
|
||||
|
||||
```javascript
|
||||
uni.getStorage({
|
||||
key: 'token',
|
||||
success: (res) => {
|
||||
const token = res.data
|
||||
console.log('Token', token)
|
||||
// 使用 token
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 获取数组
|
||||
|
||||
```javascript
|
||||
uni.getStorage({
|
||||
key: 'shoppingCart',
|
||||
success: (res) => {
|
||||
const cart = res.data || []
|
||||
console.log('购物车', cart)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 封装获取函数
|
||||
|
||||
```javascript
|
||||
// utils/storage.js
|
||||
const storage = {
|
||||
get(key) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getStorage({
|
||||
key: key,
|
||||
success: (res) => {
|
||||
resolve(res.data)
|
||||
},
|
||||
fail: (err) => {
|
||||
if (err.errMsg.includes('data not found')) {
|
||||
resolve(null) // 数据不存在返回 null
|
||||
} else {
|
||||
reject(err)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
storage.get('userInfo')
|
||||
.then(data => {
|
||||
if (data) {
|
||||
console.log('用户信息', data)
|
||||
} else {
|
||||
console.log('数据不存在')
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('获取失败', err)
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 5: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="loadUserInfo">加载用户信息</button>
|
||||
<view v-if="userInfo" class="user-info">
|
||||
<text>用户名:{{ userInfo.name }}</text>
|
||||
<text>邮箱:{{ userInfo.email }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: null
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadUserInfo()
|
||||
},
|
||||
methods: {
|
||||
loadUserInfo() {
|
||||
uni.getStorage({
|
||||
key: 'userInfo',
|
||||
success: (res) => {
|
||||
this.userInfo = res.data
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '未登录',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 同步版本
|
||||
|
||||
使用 `uni.getStorageSync` 进行同步获取:
|
||||
|
||||
```javascript
|
||||
try {
|
||||
const userInfo = uni.getStorageSync('userInfo')
|
||||
if (userInfo) {
|
||||
console.log('用户信息', userInfo)
|
||||
} else {
|
||||
console.log('数据不存在')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 如果 key 不存在,会触发 fail 回调
|
||||
2. 建议使用 try-catch 处理同步接口的错误
|
||||
3. 获取的数据类型与存储时一致
|
||||
4. 异步接口不会阻塞后续代码执行
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/storage/storage.html#getstorage
|
||||
- **同步版本**: https://uniapp.dcloud.net.cn/api/storage/storage.html#getstoragesync
|
||||
- **设置存储**: https://uniapp.dcloud.net.cn/api/storage/storage.html#setstorage
|
||||
@@ -0,0 +1,160 @@
|
||||
# uni.removeStorage - 删除存储数据示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/storage/storage.html#removestorage
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.removeStorage` 用于从本地缓存中异步移除指定 key。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.removeStorage({
|
||||
key: 'userInfo',
|
||||
success: () => {
|
||||
console.log('删除成功')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 删除单个数据
|
||||
|
||||
```javascript
|
||||
uni.removeStorage({
|
||||
key: 'token',
|
||||
success: () => {
|
||||
console.log('Token 已删除')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('删除失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 退出登录时清除数据
|
||||
|
||||
```javascript
|
||||
function logout() {
|
||||
// 删除用户信息
|
||||
uni.removeStorage({
|
||||
key: 'userInfo',
|
||||
success: () => {
|
||||
console.log('用户信息已清除')
|
||||
}
|
||||
})
|
||||
|
||||
// 删除 Token
|
||||
uni.removeStorage({
|
||||
key: 'token',
|
||||
success: () => {
|
||||
console.log('Token 已清除')
|
||||
// 跳转到登录页
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 批量删除
|
||||
|
||||
```javascript
|
||||
const keysToRemove = ['userInfo', 'token', 'settings']
|
||||
|
||||
keysToRemove.forEach(key => {
|
||||
uni.removeStorage({
|
||||
key: key,
|
||||
success: () => {
|
||||
console.log(`${key} 已删除`)
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="clearUserData">清除用户数据</button>
|
||||
<button @click="clearAllData">清除所有数据</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
clearUserData() {
|
||||
uni.removeStorage({
|
||||
key: 'userInfo',
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '用户数据已清除',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
clearAllData() {
|
||||
uni.clearStorage({
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '所有数据已清除',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 同步版本
|
||||
|
||||
```javascript
|
||||
try {
|
||||
uni.removeStorageSync('userInfo')
|
||||
console.log('删除成功')
|
||||
} catch (err) {
|
||||
console.error('删除失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| key | String | 是 | 本地缓存中指定的 key |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 如果 key 不存在,不会报错
|
||||
2. 建议使用同步版本 `removeStorageSync` 性能更好
|
||||
3. 删除操作是异步的,需要等待 success 回调
|
||||
4. 退出登录时建议清除所有相关数据
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/storage/storage.html#removestorage
|
||||
- **同步版本**: https://uniapp.dcloud.net.cn/api/storage/storage.html#removestoragesync
|
||||
- **清除所有**: https://uniapp.dcloud.net.cn/api/storage/storage.html#clearstorage
|
||||
@@ -0,0 +1,196 @@
|
||||
# uni.setStorageSync - 同步设置存储数据示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/storage/storage.html#setstoragesync
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.setStorageSync` 用于同步将数据存储在本地缓存中指定的 key 中。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
try {
|
||||
uni.setStorageSync('key', 'value')
|
||||
console.log('存储成功')
|
||||
} catch (err) {
|
||||
console.error('存储失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 存储用户信息
|
||||
|
||||
```javascript
|
||||
try {
|
||||
const userInfo = {
|
||||
name: 'John',
|
||||
age: 30,
|
||||
email: 'john@example.com'
|
||||
}
|
||||
uni.setStorageSync('userInfo', userInfo)
|
||||
console.log('存储成功')
|
||||
} catch (err) {
|
||||
console.error('存储失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 2: 存储 Token
|
||||
|
||||
```javascript
|
||||
function saveToken(token) {
|
||||
try {
|
||||
uni.setStorageSync('token', token)
|
||||
return true
|
||||
} catch (err) {
|
||||
console.error('存储Token失败', err)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
if (saveToken('abc123')) {
|
||||
console.log('Token已保存')
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<input v-model="username" placeholder="用户名" />
|
||||
<input v-model="email" placeholder="邮箱" />
|
||||
<button @click="saveUserInfo">保存用户信息</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
email: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
saveUserInfo() {
|
||||
try {
|
||||
const userInfo = {
|
||||
username: this.username,
|
||||
email: this.email
|
||||
}
|
||||
uni.setStorageSync('userInfo', userInfo)
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 封装存储函数
|
||||
|
||||
```javascript
|
||||
// utils/storage.js
|
||||
const storage = {
|
||||
set(key, value) {
|
||||
try {
|
||||
uni.setStorageSync(key, value)
|
||||
return true
|
||||
} catch (err) {
|
||||
console.error(`存储${key}失败`, err)
|
||||
return false
|
||||
}
|
||||
},
|
||||
|
||||
setString(key, value) {
|
||||
return this.set(key, String(value))
|
||||
},
|
||||
|
||||
setNumber(key, value) {
|
||||
return this.set(key, Number(value))
|
||||
},
|
||||
|
||||
setBoolean(key, value) {
|
||||
return this.set(key, Boolean(value))
|
||||
},
|
||||
|
||||
setObject(key, value) {
|
||||
return this.set(key, value)
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
storage.setString('token', 'abc123')
|
||||
storage.setNumber('count', 10)
|
||||
storage.setBoolean('isLogin', true)
|
||||
storage.setObject('userInfo', { name: 'John' })
|
||||
```
|
||||
|
||||
### 示例 5: 批量存储
|
||||
|
||||
```javascript
|
||||
function saveMultipleData(data) {
|
||||
try {
|
||||
Object.keys(data).forEach(key => {
|
||||
uni.setStorageSync(key, data[key])
|
||||
})
|
||||
return true
|
||||
} catch (err) {
|
||||
console.error('批量存储失败', err)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
saveMultipleData({
|
||||
token: 'abc123',
|
||||
userInfo: { name: 'John' },
|
||||
settings: { theme: 'dark' }
|
||||
})
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| key | String | 是 | 本地缓存中指定的 key |
|
||||
| data | Any | 是 | 需要存储的内容 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 同步接口会阻塞后续代码执行,性能比异步接口好
|
||||
2. 存储的数据类型与设置时一致
|
||||
3. 建议使用 try-catch 处理错误
|
||||
4. 单个 key 允许存储的最大数据长度为 1MB
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/storage/storage.html#setstoragesync
|
||||
- **异步版本**: https://uniapp.dcloud.net.cn/api/storage/storage.html#setstorage
|
||||
- **获取存储**: https://uniapp.dcloud.net.cn/api/storage/storage.html#getstoragesync
|
||||
@@ -0,0 +1,160 @@
|
||||
# uni.setStorage - 数据存储示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/storage/storage.html#setstorage
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.setStorage` 用于将数据存储在本地缓存中指定的 key 中,异步接口。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.setStorage({
|
||||
key: 'userInfo',
|
||||
data: {
|
||||
name: 'John',
|
||||
age: 30
|
||||
},
|
||||
success: () => {
|
||||
console.log('存储成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('存储失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 存储用户信息
|
||||
|
||||
```javascript
|
||||
// 存储用户信息
|
||||
const userInfo = {
|
||||
id: 1,
|
||||
name: 'John Doe',
|
||||
email: 'john@example.com',
|
||||
avatar: 'https://example.com/avatar.jpg'
|
||||
}
|
||||
|
||||
uni.setStorage({
|
||||
key: 'userInfo',
|
||||
data: userInfo,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 存储字符串
|
||||
|
||||
```javascript
|
||||
uni.setStorage({
|
||||
key: 'token',
|
||||
data: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...',
|
||||
success: () => {
|
||||
console.log('Token 已保存')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 存储数组
|
||||
|
||||
```javascript
|
||||
const shoppingCart = [
|
||||
{ id: 1, name: '商品1', price: 99 },
|
||||
{ id: 2, name: '商品2', price: 199 }
|
||||
]
|
||||
|
||||
uni.setStorage({
|
||||
key: 'shoppingCart',
|
||||
data: shoppingCart,
|
||||
success: () => {
|
||||
console.log('购物车已保存')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 封装存储函数
|
||||
|
||||
```javascript
|
||||
// utils/storage.js
|
||||
const storage = {
|
||||
set(key, data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.setStorage({
|
||||
key: key,
|
||||
data: data,
|
||||
success: () => {
|
||||
resolve()
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
get(key) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getStorage({
|
||||
key: key,
|
||||
success: (res) => {
|
||||
resolve(res.data)
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
storage.set('userInfo', { name: 'John' })
|
||||
.then(() => {
|
||||
console.log('存储成功')
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('存储失败', err)
|
||||
})
|
||||
```
|
||||
|
||||
## 同步版本
|
||||
|
||||
使用 `uni.setStorageSync` 进行同步存储:
|
||||
|
||||
```javascript
|
||||
try {
|
||||
uni.setStorageSync('userInfo', {
|
||||
name: 'John',
|
||||
age: 30
|
||||
})
|
||||
console.log('存储成功')
|
||||
} catch (err) {
|
||||
console.error('存储失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 存储的数据会被持久化,除非手动删除或清除缓存
|
||||
2. 单个 key 允许存储的最大数据长度为 1MB
|
||||
3. 异步接口不会阻塞后续代码执行
|
||||
4. 建议使用 try-catch 处理同步接口的错误
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/storage/storage.html#setstorage
|
||||
- **同步版本**: https://uniapp.dcloud.net.cn/api/storage/storage.html#setstoragesync
|
||||
@@ -0,0 +1,189 @@
|
||||
# uni.hideLoading - 隐藏加载提示示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/ui/prompt.html#hideloading
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.hideLoading` 用于隐藏加载提示框。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.hideLoading()
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本使用
|
||||
|
||||
```javascript
|
||||
// 显示加载
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
})
|
||||
|
||||
// 隐藏加载
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
```
|
||||
|
||||
### 示例 2: 网络请求中使用
|
||||
|
||||
```javascript
|
||||
// 显示加载
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
complete: () => {
|
||||
// 请求完成后隐藏加载
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="loadData">加载数据</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
loadData() {
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('加载失败', err)
|
||||
},
|
||||
complete: () => {
|
||||
// 无论成功失败都要隐藏加载
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 封装加载函数
|
||||
|
||||
```javascript
|
||||
// utils/loading.js
|
||||
const loading = {
|
||||
show(title = '加载中...') {
|
||||
uni.showLoading({
|
||||
title: title,
|
||||
mask: true
|
||||
})
|
||||
},
|
||||
|
||||
hide() {
|
||||
uni.hideLoading()
|
||||
},
|
||||
|
||||
async withLoading(fn, title = '加载中...') {
|
||||
this.show(title)
|
||||
try {
|
||||
const result = await fn()
|
||||
return result
|
||||
} finally {
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
loading.withLoading(async () => {
|
||||
const data = await fetchData()
|
||||
return data
|
||||
}, '加载数据中...')
|
||||
```
|
||||
|
||||
### 示例 5: 确保隐藏加载
|
||||
|
||||
```javascript
|
||||
function loadData() {
|
||||
let loadingShown = false
|
||||
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
loadingShown = true
|
||||
|
||||
// 执行加载逻辑
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
complete: () => {
|
||||
if (loadingShown) {
|
||||
uni.hideLoading()
|
||||
loadingShown = false
|
||||
}
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
// 确保异常时也隐藏加载
|
||||
if (loadingShown) {
|
||||
uni.hideLoading()
|
||||
loadingShown = false
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
此 API 无需参数。
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 必须与 `uni.showLoading` 配对使用
|
||||
2. 建议在 `complete` 回调中调用,确保无论成功失败都会隐藏
|
||||
3. 多次调用 `showLoading` 后,只需调用一次 `hideLoading` 即可隐藏
|
||||
4. 建议使用 try-finally 确保异常时也能隐藏
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#hideloading
|
||||
- **显示加载**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#showloading
|
||||
@@ -0,0 +1,140 @@
|
||||
# uni.hideNavigationBarLoading - 隐藏导航栏加载动画示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#hidenavigationbarloading
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.hideNavigationBarLoading` 用于隐藏当前页面导航栏的加载动画。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.hideNavigationBarLoading()
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本使用
|
||||
|
||||
```javascript
|
||||
// 显示加载动画
|
||||
uni.showNavigationBarLoading()
|
||||
|
||||
// 隐藏加载动画
|
||||
uni.hideNavigationBarLoading()
|
||||
```
|
||||
|
||||
### 示例 2: 网络请求中使用
|
||||
|
||||
```javascript
|
||||
// 显示加载动画
|
||||
uni.showNavigationBarLoading()
|
||||
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
complete: () => {
|
||||
// 请求完成后隐藏
|
||||
uni.hideNavigationBarLoading()
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="loadData">加载数据</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
loadData() {
|
||||
uni.showNavigationBarLoading()
|
||||
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('加载失败', err)
|
||||
},
|
||||
complete: () => {
|
||||
// 无论成功失败都要隐藏
|
||||
uni.hideNavigationBarLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 确保隐藏
|
||||
|
||||
```javascript
|
||||
function loadData() {
|
||||
let loadingShown = false
|
||||
|
||||
try {
|
||||
uni.showNavigationBarLoading()
|
||||
loadingShown = true
|
||||
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
complete: () => {
|
||||
if (loadingShown) {
|
||||
uni.hideNavigationBarLoading()
|
||||
loadingShown = false
|
||||
}
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
// 确保异常时也隐藏
|
||||
if (loadingShown) {
|
||||
uni.hideNavigationBarLoading()
|
||||
loadingShown = false
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
此 API 无需参数。
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 必须与 `uni.showNavigationBarLoading` 配对使用
|
||||
2. 建议在 `complete` 回调中调用,确保无论成功失败都会隐藏
|
||||
3. 多次调用 `showNavigationBarLoading` 后,只需调用一次 `hideNavigationBarLoading` 即可隐藏
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#hidenavigationbarloading
|
||||
- **显示加载**: https://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#shownavigationbarloading
|
||||
@@ -0,0 +1,147 @@
|
||||
# uni.hideTabBarRedDot - 隐藏 TabBar 红点示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#hidetabbarreddot
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.hideTabBarRedDot` 用于隐藏 tabBar 某一项的右上角的红点。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.hideTabBarRedDot({
|
||||
index: 0
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 隐藏红点
|
||||
|
||||
```javascript
|
||||
uni.hideTabBarRedDot({
|
||||
index: 0, // tabBar 的哪一项,从左边算起
|
||||
success: () => {
|
||||
console.log('隐藏成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('隐藏失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 阅读消息后隐藏
|
||||
|
||||
```javascript
|
||||
function readMessage(messageId) {
|
||||
// 标记消息为已读
|
||||
uni.request({
|
||||
url: `https://api.example.com/messages/${messageId}/read`,
|
||||
method: 'POST',
|
||||
success: () => {
|
||||
// 隐藏消息红点
|
||||
uni.hideTabBarRedDot({
|
||||
index: 1 // 消息页面的索引
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="hideRedDot">隐藏红点</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
hideRedDot() {
|
||||
uni.hideTabBarRedDot({
|
||||
index: 0,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '已隐藏',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 进入页面时隐藏
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<text>消息列表</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onLoad() {
|
||||
// 进入消息页面时隐藏红点
|
||||
uni.hideTabBarRedDot({
|
||||
index: 1 // 当前页面的索引
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 清除所有红点
|
||||
|
||||
```javascript
|
||||
function clearAllRedDots(tabBarCount) {
|
||||
for (let i = 0; i < tabBarCount; i++) {
|
||||
uni.hideTabBarRedDot({
|
||||
index: i
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用(假设有4个tabBar)
|
||||
clearAllRedDots(4)
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| index | Number | 是 | tabBar 的哪一项,从左边算起 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `index` 从 0 开始,对应 `pages.json` 中 tabBar 的配置顺序
|
||||
2. 如果该 tabBar 项没有红点,调用此 API 不会报错
|
||||
3. 建议在用户查看相关内容后隐藏红点
|
||||
4. 与 `showTabBarRedDot` 配合使用
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#hidetabbarreddot
|
||||
- **显示红点**: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#showtabbarreddot
|
||||
@@ -0,0 +1,153 @@
|
||||
# uni.hideToast - 隐藏消息提示示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/ui/prompt.html#hidetoast
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.hideToast` 用于隐藏消息提示框。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.hideToast()
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本使用
|
||||
|
||||
```javascript
|
||||
// 显示提示
|
||||
uni.showToast({
|
||||
title: '操作成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 提前隐藏
|
||||
setTimeout(() => {
|
||||
uni.hideToast()
|
||||
}, 1000)
|
||||
```
|
||||
|
||||
### 示例 2: 手动控制提示显示时间
|
||||
|
||||
```javascript
|
||||
function showCustomToast(title, duration = 2000) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: 'none',
|
||||
duration: duration
|
||||
})
|
||||
|
||||
// 如果需要提前隐藏
|
||||
setTimeout(() => {
|
||||
uni.hideToast()
|
||||
}, duration - 500)
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="showMessage">显示消息</button>
|
||||
<button @click="hideMessage">隐藏消息</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
showMessage() {
|
||||
uni.showToast({
|
||||
title: '这是一条消息',
|
||||
icon: 'none',
|
||||
duration: 5000
|
||||
})
|
||||
},
|
||||
hideMessage() {
|
||||
uni.hideToast()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 替换提示内容
|
||||
|
||||
```javascript
|
||||
function showReplacingToast(messages) {
|
||||
let currentIndex = 0
|
||||
|
||||
const showNext = () => {
|
||||
if (currentIndex < messages.length) {
|
||||
uni.showToast({
|
||||
title: messages[currentIndex],
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
currentIndex++
|
||||
|
||||
setTimeout(() => {
|
||||
uni.hideToast()
|
||||
setTimeout(showNext, 100)
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
|
||||
showNext()
|
||||
}
|
||||
|
||||
// 使用
|
||||
showReplacingToast(['消息1', '消息2', '消息3'])
|
||||
```
|
||||
|
||||
### 示例 5: 确保隐藏提示
|
||||
|
||||
```javascript
|
||||
function showTemporaryToast(title) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
})
|
||||
|
||||
// 3秒后自动隐藏
|
||||
setTimeout(() => {
|
||||
uni.hideToast()
|
||||
}, 3000)
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
此 API 无需参数。
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 用于提前隐藏通过 `uni.showToast` 显示的提示
|
||||
2. 如果不调用,提示会在 `duration` 时间后自动消失
|
||||
3. 建议在需要立即隐藏提示时使用
|
||||
4. 通常不需要手动调用,除非需要提前隐藏
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#hidetoast
|
||||
- **显示提示**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#showtoast
|
||||
@@ -0,0 +1,171 @@
|
||||
# uni.removeTabBarBadge - 移除 TabBar 徽标示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#removetabbarbadge
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.removeTabBarBadge` 用于移除 tabBar 某一项右上角的文本。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.removeTabBarBadge({
|
||||
index: 0
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 清除徽标
|
||||
|
||||
```javascript
|
||||
uni.removeTabBarBadge({
|
||||
index: 0, // tabBar 的哪一项,从左边算起
|
||||
success: () => {
|
||||
console.log('清除成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('清除失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 清除未读消息徽标
|
||||
|
||||
```javascript
|
||||
function clearUnreadBadge() {
|
||||
uni.removeTabBarBadge({
|
||||
index: 1, // 消息页面的索引
|
||||
success: () => {
|
||||
console.log('未读消息徽标已清除')
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="clearBadge">清除徽标</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
clearBadge() {
|
||||
uni.removeTabBarBadge({
|
||||
index: 0,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '已清除',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 阅读消息后清除
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view
|
||||
v-for="message in messages"
|
||||
:key="message.id"
|
||||
class="message-item"
|
||||
@click="readMessage(message)"
|
||||
>
|
||||
<text>{{ message.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
messages: [
|
||||
{ id: 1, content: '消息1', read: false },
|
||||
{ id: 2, content: '消息2', read: false }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
readMessage(message) {
|
||||
message.read = true
|
||||
|
||||
// 如果所有消息都已读,清除徽标
|
||||
const allRead = this.messages.every(msg => msg.read)
|
||||
if (allRead) {
|
||||
uni.removeTabBarBadge({
|
||||
index: 1 // 消息页面的索引
|
||||
})
|
||||
} else {
|
||||
// 更新未读数
|
||||
const unreadCount = this.messages.filter(msg => !msg.read).length
|
||||
uni.setTabBarBadge({
|
||||
index: 1,
|
||||
text: String(unreadCount)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 清除所有徽标
|
||||
|
||||
```javascript
|
||||
function clearAllBadges(tabBarCount) {
|
||||
for (let i = 0; i < tabBarCount; i++) {
|
||||
uni.removeTabBarBadge({
|
||||
index: i
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用(假设有4个tabBar)
|
||||
clearAllBadges(4)
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| index | Number | 是 | tabBar 的哪一项,从左边算起 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `index` 从 0 开始,对应 `pages.json` 中 tabBar 的配置顺序
|
||||
2. 如果该 tabBar 项没有徽标,调用此 API 不会报错
|
||||
3. 建议在消息已读或数量为 0 时清除徽标
|
||||
4. 与 `setTabBarBadge` 配合使用
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#removetabbarbadge
|
||||
- **设置徽标**: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#settabbarbadge
|
||||
@@ -0,0 +1,180 @@
|
||||
# uni.setNavigationBarColor - 设置导航栏颜色示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#setnavigationbarcolor
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.setNavigationBarColor` 用于设置页面导航栏颜色。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#007aff'
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 设置导航栏颜色
|
||||
|
||||
```javascript
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff', // 前景颜色,包括按钮、标题、状态栏的颜色
|
||||
backgroundColor: '#007aff', // 背景颜色
|
||||
success: () => {
|
||||
console.log('设置成功')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 深色主题
|
||||
|
||||
```javascript
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#000000',
|
||||
animation: {
|
||||
duration: 400,
|
||||
timingFunc: 'easeIn'
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 浅色主题
|
||||
|
||||
```javascript
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000',
|
||||
backgroundColor: '#ffffff',
|
||||
animation: {
|
||||
duration: 400,
|
||||
timingFunc: 'easeIn'
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="setDarkTheme">深色主题</button>
|
||||
<button @click="setLightTheme">浅色主题</button>
|
||||
<button @click="setCustomColor">自定义颜色</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
setDarkTheme() {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#000000'
|
||||
})
|
||||
},
|
||||
setLightTheme() {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000',
|
||||
backgroundColor: '#ffffff'
|
||||
})
|
||||
},
|
||||
setCustomColor() {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#ff3b30',
|
||||
animation: {
|
||||
duration: 400,
|
||||
timingFunc: 'easeIn'
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 根据内容动态设置
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="article">
|
||||
<text>{{ article.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
article: null
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.loadArticle(options.id)
|
||||
},
|
||||
methods: {
|
||||
loadArticle(id) {
|
||||
uni.request({
|
||||
url: `https://api.example.com/article/${id}`,
|
||||
success: (res) => {
|
||||
this.article = res.data
|
||||
// 根据文章主题色设置导航栏
|
||||
if (res.data.theme === 'dark') {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#000000'
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000',
|
||||
backgroundColor: '#ffffff'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| frontColor | String | 是 | 前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000 |
|
||||
| backgroundColor | String | 是 | 背景颜色值,有效值为十六进制颜色 |
|
||||
| animation | Object | 否 | 动画效果 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `frontColor` 仅支持 `#ffffff` 和 `#000000`
|
||||
2. `backgroundColor` 支持任意十六进制颜色
|
||||
3. 可以通过 `animation` 设置颜色切换动画
|
||||
4. 建议与页面主题色保持一致
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#setnavigationbarcolor
|
||||
- **设置标题**: https://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#setnavigationbartitle
|
||||
@@ -0,0 +1,191 @@
|
||||
# uni.setNavigationBarTitle - 设置导航栏标题示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#setnavigationbartitle
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.setNavigationBarTitle` 用于设置当前页面导航栏标题。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.setNavigationBarTitle({
|
||||
title: '新标题'
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 设置标题
|
||||
|
||||
```javascript
|
||||
uni.setNavigationBarTitle({
|
||||
title: '我的页面',
|
||||
success: () => {
|
||||
console.log('设置成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('设置失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 动态设置标题
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<input v-model="pageTitle" placeholder="输入页面标题" />
|
||||
<button @click="updateTitle">更新标题</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pageTitle: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateTitle() {
|
||||
if (this.pageTitle) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.pageTitle
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 在页面生命周期中设置
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<text>页面内容</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onLoad(options) {
|
||||
// 根据参数设置标题
|
||||
if (options.type === 'detail') {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '详情页'
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '列表页'
|
||||
})
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// 也可以在这里设置
|
||||
uni.setNavigationBarTitle({
|
||||
title: '页面标题'
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 根据数据设置标题
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="article">
|
||||
<text>{{ article.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
article: null
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.loadArticle(options.id)
|
||||
},
|
||||
methods: {
|
||||
loadArticle(id) {
|
||||
uni.request({
|
||||
url: `https://api.example.com/article/${id}`,
|
||||
success: (res) => {
|
||||
this.article = res.data
|
||||
// 使用文章标题作为页面标题
|
||||
uni.setNavigationBarTitle({
|
||||
title: res.data.title
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 封装设置标题函数
|
||||
|
||||
```javascript
|
||||
// utils/navigation.js
|
||||
const navigation = {
|
||||
setTitle(title) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: title
|
||||
})
|
||||
},
|
||||
|
||||
setTitleWithSubtitle(mainTitle, subtitle) {
|
||||
const fullTitle = subtitle ? `${mainTitle} - ${subtitle}` : mainTitle
|
||||
uni.setNavigationBarTitle({
|
||||
title: fullTitle
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
navigation.setTitle('我的页面')
|
||||
navigation.setTitleWithSubtitle('商品', '详情')
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| title | String | 是 | 页面标题 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 标题长度建议不超过 10 个字符
|
||||
2. 可以在 `onLoad` 或 `onReady` 中设置
|
||||
3. 设置后立即生效
|
||||
4. 建议根据页面内容动态设置标题
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#setnavigationbartitle
|
||||
- **设置导航栏颜色**: https://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#setnavigationbarcolor
|
||||
@@ -0,0 +1,205 @@
|
||||
# uni.setTabBarBadge - 设置 TabBar 徽标示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#settabbarbadge
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.setTabBarBadge` 用于为 tabBar 某一项的右上角添加文本。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.setTabBarBadge({
|
||||
index: 0,
|
||||
text: '1'
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 设置徽标
|
||||
|
||||
```javascript
|
||||
uni.setTabBarBadge({
|
||||
index: 0, // tabBar 的哪一项,从左边算起
|
||||
text: '5' // 显示的文本,超过 3 个字符则显示成 "..."
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 显示未读消息数
|
||||
|
||||
```javascript
|
||||
function updateUnreadCount(count) {
|
||||
if (count > 0) {
|
||||
const text = count > 99 ? '99+' : String(count)
|
||||
uni.setTabBarBadge({
|
||||
index: 1, // 消息页面的索引
|
||||
text: text
|
||||
})
|
||||
} else {
|
||||
// 清除徽标
|
||||
uni.removeTabBarBadge({
|
||||
index: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
updateUnreadCount(5) // 显示 "5"
|
||||
updateUnreadCount(100) // 显示 "99+"
|
||||
updateUnreadCount(0) // 清除徽标
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="setBadge">设置徽标</button>
|
||||
<button @click="removeBadge">清除徽标</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
setBadge() {
|
||||
uni.setTabBarBadge({
|
||||
index: 0,
|
||||
text: '5'
|
||||
})
|
||||
uni.showToast({
|
||||
title: '已设置徽标',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
removeBadge() {
|
||||
uni.removeTabBarBadge({
|
||||
index: 0
|
||||
})
|
||||
uni.showToast({
|
||||
title: '已清除徽标',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 实时更新未读消息
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<text>未读消息:{{ unreadCount }}</text>
|
||||
<button @click="refreshUnreadCount">刷新未读数</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
unreadCount: 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadUnreadCount()
|
||||
// 定时刷新
|
||||
setInterval(() => {
|
||||
this.loadUnreadCount()
|
||||
}, 30000) // 每30秒刷新一次
|
||||
},
|
||||
methods: {
|
||||
loadUnreadCount() {
|
||||
uni.request({
|
||||
url: 'https://api.example.com/unread-count',
|
||||
success: (res) => {
|
||||
this.unreadCount = res.data.count
|
||||
this.updateTabBarBadge(res.data.count)
|
||||
}
|
||||
})
|
||||
},
|
||||
updateTabBarBadge(count) {
|
||||
if (count > 0) {
|
||||
const text = count > 99 ? '99+' : String(count)
|
||||
uni.setTabBarBadge({
|
||||
index: 1, // 消息页面的索引
|
||||
text: text
|
||||
})
|
||||
} else {
|
||||
uni.removeTabBarBadge({
|
||||
index: 1
|
||||
})
|
||||
}
|
||||
},
|
||||
refreshUnreadCount() {
|
||||
this.loadUnreadCount()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 多个 TabBar 徽标
|
||||
|
||||
```javascript
|
||||
function updateAllTabBarBadges(badges) {
|
||||
// badges: [{ index: 0, text: '5' }, { index: 1, text: '10' }]
|
||||
badges.forEach(badge => {
|
||||
if (badge.text && badge.text !== '0') {
|
||||
uni.setTabBarBadge({
|
||||
index: badge.index,
|
||||
text: badge.text
|
||||
})
|
||||
} else {
|
||||
uni.removeTabBarBadge({
|
||||
index: badge.index
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 使用
|
||||
updateAllTabBarBadges([
|
||||
{ index: 0, text: '5' },
|
||||
{ index: 1, text: '10' },
|
||||
{ index: 2, text: '0' } // 清除
|
||||
])
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| index | Number | 是 | tabBar 的哪一项,从左边算起 |
|
||||
| text | String | 是 | 显示的文本,超过 3 个字符则显示成 "..." |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `index` 从 0 开始,对应 `pages.json` 中 tabBar 的配置顺序
|
||||
2. `text` 超过 3 个字符会显示成 "..."
|
||||
3. 建议数字超过 99 时显示 "99+"
|
||||
4. 使用 `removeTabBarBadge` 可以清除徽标
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#settabbarbadge
|
||||
- **清除徽标**: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#removetabbarbadge
|
||||
@@ -0,0 +1,168 @@
|
||||
# uni.setTabBarStyle - 设置 TabBar 样式示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#settabbarstyle
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.setTabBarStyle` 用于动态设置 tabBar 的整体样式。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.setTabBarStyle({
|
||||
color: '#7A7E83',
|
||||
selectedColor: '#3cc51f',
|
||||
backgroundColor: '#ffffff'
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 设置 TabBar 样式
|
||||
|
||||
```javascript
|
||||
uni.setTabBarStyle({
|
||||
color: '#7A7E83', // 未选中时的文字颜色
|
||||
selectedColor: '#3cc51f', // 选中时的文字颜色
|
||||
backgroundColor: '#ffffff', // 背景颜色
|
||||
borderStyle: 'black', // 边框颜色
|
||||
success: () => {
|
||||
console.log('设置成功')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 深色主题
|
||||
|
||||
```javascript
|
||||
function setDarkTheme() {
|
||||
uni.setTabBarStyle({
|
||||
color: '#999999',
|
||||
selectedColor: '#ffffff',
|
||||
backgroundColor: '#000000',
|
||||
borderStyle: 'white'
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 浅色主题
|
||||
|
||||
```javascript
|
||||
function setLightTheme() {
|
||||
uni.setTabBarStyle({
|
||||
color: '#7A7E83',
|
||||
selectedColor: '#007aff',
|
||||
backgroundColor: '#ffffff',
|
||||
borderStyle: 'black'
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 4: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="setDarkTheme">深色主题</button>
|
||||
<button @click="setLightTheme">浅色主题</button>
|
||||
<button @click="setCustomTheme">自定义主题</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
setDarkTheme() {
|
||||
uni.setTabBarStyle({
|
||||
color: '#999999',
|
||||
selectedColor: '#ffffff',
|
||||
backgroundColor: '#000000',
|
||||
borderStyle: 'white'
|
||||
})
|
||||
},
|
||||
setLightTheme() {
|
||||
uni.setTabBarStyle({
|
||||
color: '#7A7E83',
|
||||
selectedColor: '#007aff',
|
||||
backgroundColor: '#ffffff',
|
||||
borderStyle: 'black'
|
||||
})
|
||||
},
|
||||
setCustomTheme() {
|
||||
uni.setTabBarStyle({
|
||||
color: '#666666',
|
||||
selectedColor: '#ff3b30',
|
||||
backgroundColor: '#f5f5f5',
|
||||
borderStyle: 'black'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 根据系统主题设置
|
||||
|
||||
```javascript
|
||||
function setTabBarThemeBySystem() {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
// 根据系统主题设置(需要自己判断)
|
||||
const isDark = res.theme === 'dark' // 某些平台支持
|
||||
|
||||
if (isDark) {
|
||||
uni.setTabBarStyle({
|
||||
color: '#999999',
|
||||
selectedColor: '#ffffff',
|
||||
backgroundColor: '#000000',
|
||||
borderStyle: 'white'
|
||||
})
|
||||
} else {
|
||||
uni.setTabBarStyle({
|
||||
color: '#7A7E83',
|
||||
selectedColor: '#007aff',
|
||||
backgroundColor: '#ffffff',
|
||||
borderStyle: 'black'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| color | String | 否 | tab 上的文字默认颜色 |
|
||||
| selectedColor | String | 否 | tab 上的文字选中时的颜色 |
|
||||
| backgroundColor | String | 否 | tab 的背景色 |
|
||||
| borderStyle | String | 否 | tabbar 上边框的颜色,可选值:black、white |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 设置后立即生效
|
||||
2. `color` 和 `selectedColor` 建议使用对比度高的颜色
|
||||
3. `borderStyle` 可选值为 `black` 或 `white`
|
||||
4. 建议与页面主题色保持一致
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#settabbarstyle
|
||||
- **设置 TabBar 项**: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#settabbaritem
|
||||
@@ -0,0 +1,217 @@
|
||||
# uni.showActionSheet - 操作菜单示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/ui/prompt.html#showactionsheet
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.showActionSheet` 用于显示操作菜单,从底部弹出选择项。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.showActionSheet({
|
||||
itemList: ['选项1', '选项2', '选项3'],
|
||||
success: (res) => {
|
||||
console.log('选择了第', res.tapIndex, '个选项')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本操作菜单
|
||||
|
||||
```javascript
|
||||
uni.showActionSheet({
|
||||
itemList: ['拍照', '从相册选择', '取消'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
// 拍照
|
||||
console.log('选择拍照')
|
||||
} else if (res.tapIndex === 1) {
|
||||
// 从相册选择
|
||||
console.log('从相册选择')
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 图片选择
|
||||
|
||||
```javascript
|
||||
uni.showActionSheet({
|
||||
itemList: ['拍照', '从相册选择'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
// 拍照
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sourceType: ['camera'],
|
||||
success: (imageRes) => {
|
||||
console.log('拍照成功', imageRes.tempFilePaths)
|
||||
}
|
||||
})
|
||||
} else if (res.tapIndex === 1) {
|
||||
// 从相册选择
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sourceType: ['album'],
|
||||
success: (imageRes) => {
|
||||
console.log('选择成功', imageRes.tempFilePaths)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 分享功能
|
||||
|
||||
```javascript
|
||||
uni.showActionSheet({
|
||||
itemList: ['分享到微信', '分享到朋友圈', '复制链接'],
|
||||
success: (res) => {
|
||||
switch (res.tapIndex) {
|
||||
case 0:
|
||||
// 分享到微信
|
||||
uni.share({
|
||||
provider: 'weixin',
|
||||
scene: 'WXSceneSession'
|
||||
})
|
||||
break
|
||||
case 1:
|
||||
// 分享到朋友圈
|
||||
uni.share({
|
||||
provider: 'weixin',
|
||||
scene: 'WXSceneTimeline'
|
||||
})
|
||||
break
|
||||
case 2:
|
||||
// 复制链接
|
||||
uni.setClipboardData({
|
||||
data: 'https://example.com',
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '链接已复制',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="showMoreOptions">更多操作</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
showMoreOptions() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['编辑', '删除', '分享', '举报'],
|
||||
success: (res) => {
|
||||
switch (res.tapIndex) {
|
||||
case 0:
|
||||
this.handleEdit()
|
||||
break
|
||||
case 1:
|
||||
this.handleDelete()
|
||||
break
|
||||
case 2:
|
||||
this.handleShare()
|
||||
break
|
||||
case 3:
|
||||
this.handleReport()
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleEdit() {
|
||||
console.log('编辑')
|
||||
},
|
||||
handleDelete() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('删除')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleShare() {
|
||||
console.log('分享')
|
||||
},
|
||||
handleReport() {
|
||||
console.log('举报')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 带取消按钮
|
||||
|
||||
```javascript
|
||||
uni.showActionSheet({
|
||||
itemList: ['选项1', '选项2', '选项3'],
|
||||
success: (res) => {
|
||||
console.log('选择了', res.tapIndex)
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log('取消选择')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| itemList | Array | 是 | 按钮的文字数组 |
|
||||
| itemColor | String | 否 | 按钮的文字颜色 |
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| tapIndex | Number | 用户点击的按钮序号,从上到下的顺序,从0开始 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `itemList` 数组最多支持 6 个选项
|
||||
2. 用户点击取消或遮罩层会触发 fail 回调
|
||||
3. `tapIndex` 从 0 开始,对应 `itemList` 的索引
|
||||
4. 建议将"取消"选项放在最后
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#showactionsheet
|
||||
- **模态弹窗**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#showmodal
|
||||
@@ -0,0 +1,189 @@
|
||||
# uni.showLoading - 加载提示示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/ui/prompt.html#showloading
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.showLoading` 用于显示加载提示框,常用于异步操作时显示加载状态。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本加载提示
|
||||
|
||||
```javascript
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
// 操作完成后隐藏
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
```
|
||||
|
||||
### 示例 2: 网络请求时显示加载
|
||||
|
||||
```javascript
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="loadData">加载数据</button>
|
||||
<view v-if="data">{{ data }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
// 模拟请求
|
||||
setTimeout(() => {
|
||||
this.data = '数据加载完成'
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '加载成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 封装加载函数
|
||||
|
||||
```javascript
|
||||
// utils/loading.js
|
||||
const loading = {
|
||||
show(title = '加载中...') {
|
||||
uni.showLoading({
|
||||
title: title,
|
||||
mask: true
|
||||
})
|
||||
},
|
||||
|
||||
hide() {
|
||||
uni.hideLoading()
|
||||
},
|
||||
|
||||
async withLoading(fn, title = '加载中...') {
|
||||
this.show(title)
|
||||
try {
|
||||
const result = await fn()
|
||||
return result
|
||||
} finally {
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
loading.withLoading(async () => {
|
||||
const data = await fetchData()
|
||||
return data
|
||||
}, '加载数据中...')
|
||||
```
|
||||
|
||||
### 示例 5: 配合请求使用
|
||||
|
||||
```javascript
|
||||
// 显示加载
|
||||
uni.showLoading({
|
||||
title: '提交中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
// 提交数据
|
||||
uni.request({
|
||||
url: 'https://api.example.com/submit',
|
||||
method: 'POST',
|
||||
data: { name: 'test' },
|
||||
success: (res) => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '提交失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| title | String | 是 | 提示的内容 |
|
||||
| mask | Boolean | 否 | 是否显示透明蒙层,防止触摸穿透 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 必须调用 `uni.hideLoading()` 才能关闭加载提示
|
||||
2. `mask: true` 可以防止用户在加载时操作页面
|
||||
3. 建议在异步操作的开始显示,在完成时隐藏
|
||||
4. 不要在 `success` 回调中忘记调用 `hideLoading`
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#showloading
|
||||
- **隐藏加载**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#hideloading
|
||||
@@ -0,0 +1,226 @@
|
||||
# uni.showModal - 模态弹窗示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/ui/prompt.html#showmodal
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.showModal` 用于显示模态弹窗,常用于确认操作。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定')
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 确认删除
|
||||
|
||||
```javascript
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除这条记录吗?',
|
||||
confirmText: '删除',
|
||||
cancelText: '取消',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 执行删除操作
|
||||
console.log('确认删除')
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 自定义按钮文字
|
||||
|
||||
```javascript
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出登录吗?',
|
||||
confirmText: '退出',
|
||||
cancelText: '取消',
|
||||
confirmColor: '#ff3b30',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 退出登录
|
||||
uni.removeStorageSync('token')
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 只显示确定按钮
|
||||
|
||||
```javascript
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '操作成功',
|
||||
showCancel: false,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定')
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="handleDelete">删除记录</button>
|
||||
<button @click="handleLogout">退出登录</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleDelete() {
|
||||
uni.showModal({
|
||||
title: '确认删除',
|
||||
content: '删除后无法恢复,确定要删除吗?',
|
||||
confirmText: '删除',
|
||||
cancelText: '取消',
|
||||
confirmColor: '#ff3b30',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 执行删除
|
||||
this.deleteRecord()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleLogout() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出登录吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.removeStorageSync('token')
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
deleteRecord() {
|
||||
// 删除逻辑
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 封装确认函数
|
||||
|
||||
```javascript
|
||||
// utils/modal.js
|
||||
const modal = {
|
||||
confirm(title, content) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.showModal({
|
||||
title: title,
|
||||
content: content,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
resolve(true)
|
||||
} else {
|
||||
resolve(false)
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
alert(title, content) {
|
||||
return new Promise((resolve) => {
|
||||
uni.showModal({
|
||||
title: title,
|
||||
content: content,
|
||||
showCancel: false,
|
||||
success: () => {
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
const result = await modal.confirm('提示', '确定要删除吗?')
|
||||
if (result) {
|
||||
console.log('用户确认')
|
||||
} else {
|
||||
console.log('用户取消')
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| title | String | 否 | 提示的标题 |
|
||||
| content | String | 否 | 提示的内容 |
|
||||
| showCancel | Boolean | 否 | 是否显示取消按钮,默认 true |
|
||||
| cancelText | String | 否 | 取消按钮的文字,默认"取消" |
|
||||
| cancelColor | String | 否 | 取消按钮的文字颜色 |
|
||||
| confirmText | String | 否 | 确认按钮的文字,默认"确定" |
|
||||
| confirmColor | String | 否 | 确认按钮的文字颜色 |
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| confirm | Boolean | 为 true 时,表示用户点击了确定按钮 |
|
||||
| cancel | Boolean | 为 true 时,表示用户点击了取消按钮 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `title` 和 `content` 至少需要提供一个
|
||||
2. 确认和取消按钮的文字可以自定义
|
||||
3. 可以通过 `showCancel: false` 只显示确定按钮
|
||||
4. 建议用于重要的确认操作
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#showmodal
|
||||
- **消息提示**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#showtoast
|
||||
@@ -0,0 +1,194 @@
|
||||
# uni.showNavigationBarLoading - 显示导航栏加载动画示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#shownavigationbarloading
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.showNavigationBarLoading` 用于在当前页面导航栏显示加载动画。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.showNavigationBarLoading()
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本使用
|
||||
|
||||
```javascript
|
||||
// 显示加载动画
|
||||
uni.showNavigationBarLoading()
|
||||
|
||||
// 隐藏加载动画
|
||||
setTimeout(() => {
|
||||
uni.hideNavigationBarLoading()
|
||||
}, 2000)
|
||||
```
|
||||
|
||||
### 示例 2: 网络请求时显示
|
||||
|
||||
```javascript
|
||||
// 显示加载动画
|
||||
uni.showNavigationBarLoading()
|
||||
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
complete: () => {
|
||||
// 请求完成后隐藏
|
||||
uni.hideNavigationBarLoading()
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="loadData">加载数据</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
loadData() {
|
||||
// 显示导航栏加载动画
|
||||
uni.showNavigationBarLoading()
|
||||
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('加载失败', err)
|
||||
},
|
||||
complete: () => {
|
||||
// 无论成功失败都要隐藏
|
||||
uni.hideNavigationBarLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 封装加载函数
|
||||
|
||||
```javascript
|
||||
// utils/loading.js
|
||||
const loading = {
|
||||
showNavBar() {
|
||||
uni.showNavigationBarLoading()
|
||||
},
|
||||
|
||||
hideNavBar() {
|
||||
uni.hideNavigationBarLoading()
|
||||
},
|
||||
|
||||
async withNavBarLoading(fn) {
|
||||
this.showNavBar()
|
||||
try {
|
||||
const result = await fn()
|
||||
return result
|
||||
} finally {
|
||||
this.hideNavBar()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
loading.withNavBarLoading(async () => {
|
||||
const data = await fetchData()
|
||||
return data
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 5: 页面刷新时显示
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="refresh">刷新</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
refresh() {
|
||||
// 显示导航栏加载动画
|
||||
uni.showNavigationBarLoading()
|
||||
|
||||
// 模拟刷新
|
||||
setTimeout(() => {
|
||||
uni.hideNavigationBarLoading()
|
||||
uni.showToast({
|
||||
title: '刷新成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// 下拉刷新时显示
|
||||
uni.showNavigationBarLoading()
|
||||
|
||||
// 刷新数据
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideNavigationBarLoading()
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
此 API 无需参数。
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 必须与 `uni.hideNavigationBarLoading` 配对使用
|
||||
2. 在导航栏标题旁边显示加载动画
|
||||
3. 适合页面级别的加载状态
|
||||
4. 建议在 `complete` 回调中隐藏
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#shownavigationbarloading
|
||||
- **隐藏加载**: https://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#hidenavigationbarloading
|
||||
@@ -0,0 +1,199 @@
|
||||
# uni.showTabBarRedDot - 显示 TabBar 红点示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#showtabbarreddot
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.showTabBarRedDot` 用于显示 tabBar 某一项的右上角的红点。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.showTabBarRedDot({
|
||||
index: 0
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 显示红点
|
||||
|
||||
```javascript
|
||||
uni.showTabBarRedDot({
|
||||
index: 0, // tabBar 的哪一项,从左边算起
|
||||
success: () => {
|
||||
console.log('显示成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('显示失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 显示消息红点
|
||||
|
||||
```javascript
|
||||
function showMessageRedDot() {
|
||||
uni.showTabBarRedDot({
|
||||
index: 1, // 消息页面的索引
|
||||
success: () => {
|
||||
console.log('消息红点已显示')
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="showRedDot">显示红点</button>
|
||||
<button @click="hideRedDot">隐藏红点</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
showRedDot() {
|
||||
uni.showTabBarRedDot({
|
||||
index: 0,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '已显示红点',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
hideRedDot() {
|
||||
uni.hideTabBarRedDot({
|
||||
index: 0,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '已隐藏红点',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 根据状态显示红点
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="hasNewMessage" class="message-list">
|
||||
<view
|
||||
v-for="message in messages"
|
||||
:key="message.id"
|
||||
class="message-item"
|
||||
@click="readMessage(message)"
|
||||
>
|
||||
<text>{{ message.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
messages: [],
|
||||
hasNewMessage: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadMessages()
|
||||
},
|
||||
methods: {
|
||||
loadMessages() {
|
||||
uni.request({
|
||||
url: 'https://api.example.com/messages',
|
||||
success: (res) => {
|
||||
this.messages = res.data
|
||||
this.hasNewMessage = res.data.some(msg => !msg.read)
|
||||
|
||||
// 根据是否有新消息显示红点
|
||||
if (this.hasNewMessage) {
|
||||
uni.showTabBarRedDot({
|
||||
index: 1 // 消息页面的索引
|
||||
})
|
||||
} else {
|
||||
uni.hideTabBarRedDot({
|
||||
index: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
readMessage(message) {
|
||||
message.read = true
|
||||
this.hasNewMessage = this.messages.some(msg => !msg.read)
|
||||
|
||||
if (!this.hasNewMessage) {
|
||||
uni.hideTabBarRedDot({
|
||||
index: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 多个 TabBar 红点
|
||||
|
||||
```javascript
|
||||
function showAllRedDots(indices) {
|
||||
indices.forEach(index => {
|
||||
uni.showTabBarRedDot({
|
||||
index: index
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 使用
|
||||
showAllRedDots([0, 1, 2]) // 显示第0、1、2项的红点
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| index | Number | 是 | tabBar 的哪一项,从左边算起 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `index` 从 0 开始,对应 `pages.json` 中 tabBar 的配置顺序
|
||||
2. 红点不显示数字,只显示一个小红点
|
||||
3. 与 `setTabBarBadge` 的区别:红点不显示文字,徽标显示文字
|
||||
4. 使用 `hideTabBarRedDot` 可以隐藏红点
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#showtabbarreddot
|
||||
- **隐藏红点**: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#hidetabbarreddot
|
||||
- **设置徽标**: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#settabbarbadge
|
||||
@@ -0,0 +1,188 @@
|
||||
# uni.showToast - 消息提示示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档:https://uniapp.dcloud.net.cn/api/ui/prompt.html#showtoast
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.showToast` 用于显示消息提示框,常用于操作反馈。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.showToast({
|
||||
title: '操作成功',
|
||||
icon: 'success'
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 成功提示
|
||||
|
||||
```javascript
|
||||
uni.showToast({
|
||||
title: '操作成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 错误提示
|
||||
|
||||
```javascript
|
||||
uni.showToast({
|
||||
title: '操作失败',
|
||||
icon: 'error',
|
||||
duration: 2000
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 加载提示
|
||||
|
||||
```javascript
|
||||
uni.showToast({
|
||||
title: '加载中...',
|
||||
icon: 'loading',
|
||||
duration: 2000
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 无图标提示
|
||||
|
||||
```javascript
|
||||
uni.showToast({
|
||||
title: '这是一条消息',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 5: 自定义图片
|
||||
|
||||
```javascript
|
||||
uni.showToast({
|
||||
title: '自定义图标',
|
||||
image: '/static/custom-icon.png',
|
||||
duration: 2000
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 6: 封装提示函数
|
||||
|
||||
```javascript
|
||||
// utils/toast.js
|
||||
const toast = {
|
||||
success(title, duration = 2000) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: 'success',
|
||||
duration: duration
|
||||
})
|
||||
},
|
||||
|
||||
error(title, duration = 2000) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: 'error',
|
||||
duration: duration
|
||||
})
|
||||
},
|
||||
|
||||
loading(title, duration = 2000) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: 'loading',
|
||||
duration: duration
|
||||
})
|
||||
},
|
||||
|
||||
info(title, duration = 2000) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: 'none',
|
||||
duration: duration
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
toast.success('保存成功')
|
||||
toast.error('保存失败')
|
||||
toast.info('这是一条消息')
|
||||
```
|
||||
|
||||
### 示例 7: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="handleSuccess">成功提示</button>
|
||||
<button @click="handleError">错误提示</button>
|
||||
<button @click="handleLoading">加载提示</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleSuccess() {
|
||||
uni.showToast({
|
||||
title: '操作成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
handleError() {
|
||||
uni.showToast({
|
||||
title: '操作失败',
|
||||
icon: 'error'
|
||||
})
|
||||
},
|
||||
handleLoading() {
|
||||
uni.showToast({
|
||||
title: '加载中...',
|
||||
icon: 'loading',
|
||||
duration: 3000
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| title | String | 是 | 提示的内容 |
|
||||
| icon | String | 否 | 图标类型,可选值:success、error、loading、none |
|
||||
| image | String | 否 | 自定义图标的本地路径 |
|
||||
| duration | Number | 否 | 提示的延迟时间,单位 ms,默认 2000 |
|
||||
| mask | Boolean | 否 | 是否显示透明蒙层,防止触摸穿透 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `title` 长度限制:微信小程序最多 7 个汉字长度
|
||||
2. 同时只能显示一个 toast,新的 toast 会覆盖旧的
|
||||
3. 使用 `uni.hideToast()` 可以手动关闭 toast
|
||||
4. `mask` 参数在某些平台可能不支持
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#showtoast
|
||||
- **隐藏提示**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#hidetoast
|
||||
Reference in New Issue
Block a user