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://doc.dcloud.net.cn/uni-app-x/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://doc.dcloud.net.cn/uni-app-x/api/system/battery.html#getbatteryinfo
|
||||
- **同步版本**: https://doc.dcloud.net.cn/uni-app-x/api/system/battery.html#getbatteryinfosync
|
||||
@@ -0,0 +1,195 @@
|
||||
# uni.getNetworkType - 获取网络类型示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/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://doc.dcloud.net.cn/uni-app-x/api/system/network.html#getnetworktype
|
||||
- **监听网络变化**: https://doc.dcloud.net.cn/uni-app-x/api/system/network.html#onnetworkstatuschange
|
||||
@@ -0,0 +1,192 @@
|
||||
# uni.getScreenBrightness - 获取屏幕亮度示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/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://doc.dcloud.net.cn/uni-app-x/api/device/screen.html#getscreenbrightness
|
||||
- **设置亮度**: https://doc.dcloud.net.cn/uni-app-x/api/device/screen.html#setscreenbrightness
|
||||
@@ -0,0 +1,209 @@
|
||||
# uni.getSystemInfo - 获取系统信息示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/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://doc.dcloud.net.cn/uni-app-x/api/system/info.html#getsysteminfo
|
||||
- **同步版本**: https://doc.dcloud.net.cn/uni-app-x/api/system/info.html#getsysteminfosync
|
||||
@@ -0,0 +1,195 @@
|
||||
# uni.setScreenBrightness - 设置屏幕亮度示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/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://doc.dcloud.net.cn/uni-app-x/api/device/screen.html#setscreenbrightness
|
||||
- **获取亮度**: https://doc.dcloud.net.cn/uni-app-x/api/device/screen.html#getscreenbrightness
|
||||
Reference in New Issue
Block a user