1
0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-09-12 16:40:40 +08:00
Files
uni-halo/.agents/skills/uniapp-project/examples/api/device/set-screen-brightness.md
T
2026-08-31 07:58:23 +08:00

196 lines
3.8 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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