鸿蒙开发-关于手机设备信息的获取以及设备信息实时渲染问题解决方案

我们在开发中可能需要向用户展示手机的设备信息，我们就可以通过以下AIP获取手机设置信息

@State deviceName: string = '' // 设备名称
@State batteryState: number = 0 // 电池状态
@State memorySize: number = 0 // 内存大小
@State cpuUsage: number = 0 // CPU 使用率
@State statfsFreeSize: number = 0 // 剩余存储

获取设备名称

getDeviceName() {
  this.deviceName = deviceInfo.marketName
}

获取进程 CPU 占用率

getCpuUsage() {
  this.cpuUsage = hidebug.getCpuUsage() * 100
}

获取应用内存大小

async getAppMemorySize() {
  this.memorySize = Number(hidebug.getPss()) / 1000
}

获取剩余存储

async getStatfsSize() {
  // 获取上下文
  const context = getContext()
  // 字节数转GB， 1000B = 1KB，1000KB = 1MB，1000MB = 1GB
  this.statfsFreeSize = statfs.getFreeSizeSync(context.filesDir) / (1000 * 1000 * 1000)
}

获取电量信息

async getBatteryState() {
  this.batteryState = batteryInfo.batterySOC
}

无法实时渲染数据的解决方案

需要注意的是，这些信息并不会实时渲染到我们的界面 以下提供集中解决方案

1 通过切换Tab栏时，重新加载界面

2 监听Tab栏下标，如果下标发生改变重新调用对应方法

3 使用定时器间隔时间执行对应的方法，然后在离开页面或者页面发生跳转的时候清除定时器，以减少性能消耗（推荐）

这样做虽然消耗了一部分性能，但是用户体验较好。基本可以实现实时渲染。更符合真实的业务场景

为什么要重复调用 定时器是间隔执行的，在我们设置的间隔时间内最开始就不会执行的只有过了这个间隔时间才会第一次执行，如果只在定时器中调用的话，就会使得在组件加载完成后内容无法显示，用户体验感不佳。