useBattery

电量情况(补齐 H5 电量 api, 注意 Safari 不支持)

何时使用

当需要获取当前设备电量情况时

API

const batteryInfo = useBattery();

参数说明

无

返回值说明

返回值	说明	类型
batteryInfo	电量	{isCharging: boolean;level: number;}

代码演示

React

device/useBattery/index

import React from 'react';
import { useBattery } from 'taro-hooks';

import DemoContent from '@src/components/DemoContent';
import { Cell, Progress, Switch } from '@taroify/core';

export default () => {
  const batteryInfo = useBattery();

  return (
    <DemoContent>
      <Cell.Group clickable>
        <Cell title="充电与否">
          <Switch disabled checked={batteryInfo?.isCharging} />
        </Cell>
        <Cell title="电量" brief={<Progress percent={batteryInfo?.level} />}>
          {batteryInfo?.level}
        </Cell>
      </Cell.Group>
    </DemoContent>
  );
};

Vue

device/useBattery/index

<template>
  <demo-content>
    <nut-cell-group>
      <nut-cell title="充电与否">
        <template v-slot:link>
          <nut-switch disable :model-value="batteryInfo.isCharging" />
        </template>
      </nut-cell>
      <nut-cell title="电量">
        <nut-progress :percentage="batteryInfo.level" />
      </nut-cell>
    </nut-cell-group>
  </demo-content>
</template>

<script setup lang="ts">
import { useBattery } from 'taro-hooks';

const batteryInfo = useBattery();
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️	✔️