前端也能获取电池信息，5分钟带你了解奇奇怪怪的知识点

淩亂°似流年 2024-04-22 19:21 73阅读 0赞

![在这里插入图片描述][5bcd1924f2564c69b3f168155e96228e.png]

### 小册 ###

> 这是我整理的学习资料，非常系统和完善，欢迎一起学习

*  **[现代JavaScript高级小册][JavaScript]**
 *  **[深入浅出Dart][JavaScript]**
 *  **[现代TypeScript高级小册][JavaScript]**
 *  **[linwu的算法笔记?][linwu]**

### 引言 ###

> 前端其实也能获取电池信息，以往都是通过客户端提供的JSBridge获取

### 获取电池信息 ###

通过 Battery Status API,前端可以获取用户设备电池的相关信息,比如电量百分比、充电状态等。

// 获取 BatteryManager 对象
    navigator.getBattery().then(battery => {
        
      // TODO
    });

*  BatteryManager 对象提供了 level、charging、chargingTime 等属性反映电池状态。
 *  监听 chargingchange、levelchange 等事件可以感知状态变化。

### 不同电量的反馈 ###

获取电池信息后,可以根据电量百分比显示不同的提示:

*  电量低于 20%时,给出明显的低电量警告,建议立即充电
 *  电量在 20% ~ 40%时,给出友善的充电提醒
 *  电量充足时,不需要特殊反馈

针对充电状态,也可以给出不同的反馈:

*  当设备处于充电状态,可以显示充电图标、电量数字的充电动画等
 *  不在充电时,显示普通的电量信息

// 处理不同电量的反馈
    function handleBattery(battery) {
        
      if (battery.level < 0.2) {
        
        showWarning();
      } else if (battery.level < 0.4) {
        
        showReminder(); 
      }
    
      if (battery.charging) {
        
        showCharging();
      } else {
        
        showLevel(battery.level);
      }
    }
    
    // 监听电池状态变化
    navigator.getBattery().then(battery => {
        
      battery.addEventListener('chargingchange', () => {
        
        handleBattery(battery);
      });
      
      // ...其他事件监听
    })

### 兼容性 ###

![image.png][]

[5bcd1924f2564c69b3f168155e96228e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/61d00576ff3e4ef1a4b476aaa113ef39.png
[JavaScript]: https://www.coding-time.cn
[linwu]: https://www.coding-time.cn/lc
[image.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/1604929d1eb6413aaead6a198ea2aa72.png