企业官网建设流程全解析

背景

近期发现一款很有意思的HarmonyOS 三方库, 地址 @pura/harmony-utils(V1.4.0) , 作者是"桃花镇童长老", 我这里也是直接通过该作者公布的源码进行案例编写进行,写了到目前写了一部分demo ,感觉确实很有帮助,这里呢也是开始写一个系列的演示demo 供大家参考。如有帮助可以在OpenHarmony中进行下载安装进行使用哦

案例demo导航展示

↓↓↓↓↓↓接下来言归正传 ↓↓↓↓

做 HarmonyOS 应用的时候，遇到过两个需求让我卡了一会儿：一个是阅读类页面要调低屏幕亮度，另一个是做"哀悼模式"要把整个界面变成灰色。

这两件事用WindowUtil做其实非常简单，专门写一篇记录一下。

方法总览

屏幕亮度控制

setWindowBrightness(brightness) — 设置亮度

// 通过滑块控制亮度值（0~1之间）@StatebrightnessValue:number=0.5;// 亮度滑块Slider({value:this.brightnessValue*100,min:0,max:100,step:1}).width('100%').showTips(true).onChange(v=>{this.brightnessValue=v/100;})// 设置亮度this.Btn(`setBrightness(${this.brightnessValue.toFixed(2)})`,'#F39C12',()=>{WindowUtil.setWindowBrightness(this.brightnessValue).then(()=>{this.addLog(`setWindowBrightness(${this.brightnessValue.toFixed(2)}) → 成功`);}).catch((e:Error)=>{this.addLog(`Error:${e.message}`);});})

参数范围是0.0到1.0，其中：

• 0.0= 最暗（但不是完全黑屏）
• 1.0= 最亮
• 0.5= 中等亮度

setWindowBrightness是异步方法，需要.then()处理结果，或者用async/await。

注意：这里调的是应用窗口亮度，不是系统全局亮度。也就是说只在你的应用里生效，退出应用后会恢复。

恢复系统默认亮度

如果想把亮度还给系统控制（用户在系统设置里调的那个亮度），传-1.0：

this.Btn('setWindowBrightness(-1.0) 恢复默认','#E67E22',()=>{WindowUtil.setWindowBrightness(-1.0).then(()=>{this.addLog(`setWindowBrightness(-1.0) 恢复默认亮度`);}).catch((e:Error)=>{this.addLog(`Error:${e.message}`);});})

这个-1.0是特殊值，代表"跟随系统"，不是真的设置亮度为负数。

getBrightness() — 读取当前亮度

this.Btn('getBrightness() 当前亮度','#D35400',()=>{try{this.addLog(`getBrightness() →${WindowUtil.getBrightness()}`);}catch(e){this.addLog(`Error:${e}`);}})

这是同步方法，直接返回当前亮度值。如果没有手动设置过，返回-1，表示跟随系统。

灰阶控制

灰阶（Gray Scale）控制是比较少见但很实用的功能，常见于：

• 特殊节日的哀悼模式（整个界面变灰）
• 无障碍功能（色盲友好模式）
• 应用内的"黑白滤镜"效果

setWindowGrayScale(grayScale) — 设置灰阶

@StategrayScaleValue:number=0;// 灰阶滑块Slider({value:this.grayScaleValue*100,min:0,max:100,step:1}).width('100%').showTips(true).onChange(v=>{this.grayScaleValue=v/100;})this.Btn(`setWindowGrayScale(${this.grayScaleValue.toFixed(2)})`,'#7F8C8D',()=>{WindowUtil.setWindowGrayScale(this.grayScaleValue).then(()=>{this.addLog(`setWindowGrayScale(${this.grayScaleValue.toFixed(2)}) → 成功`);}).catch((e:Error)=>{this.addLog(`Error:${e.message}`);});})

参数范围同样是0.0到1.0：

• 0.0= 彩色（正常状态）
• 1.0= 完全灰阶（黑白效果）
• 中间值 = 部分去色

恢复彩色

this.Btn('setWindowGrayScale(0) 恢复彩色','#95A5A6',()=>{WindowUtil.setWindowGrayScale(0).then(()=>{this.grayScaleValue=0;this.addLog('setWindowGrayScale(0) → 恢复彩色');}).catch((e:Error)=>{this.addLog(`Error:${e.message}`);});})

传0就恢复彩色，很简单。注意这里同时也把grayScaleValue状态变量重置为0，让 UI 上的滑块同步归零。

实际使用场景举例

场景1：阅读模式

用户进入阅读页面时，自动把亮度调低一点，减少眼睛疲劳：

aboutToAppear(){// 进入阅读模式，亮度调到40%WindowUtil.setWindowBrightness(0.4);}aboutToDisappear(){// 离开时恢复系统亮度WindowUtil.setWindowBrightness(-1.0);}

场景2：清明节等特殊日期灰阶

aboutToAppear(){consttoday=newDate();constmonth=today.getMonth()+1;constday=today.getDate();// 清明节前后几天开启灰阶if(month===4&&day>=4&&day<=6){WindowUtil.setWindowGrayScale(1.0);}}

同步 vs 异步，别搞混了

写在最后

亮度和灰阶这两个功能平时不一定用，但要用的时候如果不知道有现成封装，容易去找一堆复杂的原生 API。

用WindowUtil记住三个方法就够了：setWindowBrightness、getBrightness、setWindowGrayScale。异步的用.then()，同步的直接拿值。