小冊
這是我整理的學習資料，非常系統和完善，歡迎一起學習
引言
前端其實也能獲取電池資訊，以往都是透過客戶端提供的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);
});
// ...其他事件監聽
})相容性
