useWindowInfo

警告

更推荐大家使用useSystemInfo. 所有的信息均可获取到

获取窗口信息

何时使用

当需要获取窗口信息做一些判断时

API

const windowInfo = useWindowInfo();

参数说明

无

返回值说明

windowInfo

参数	类型	说明
pixelRatio	number	设备像素比
screenWidth	number	屏幕宽度，单位 px
screenHeight	number	屏幕高度，单位 px
windowWidth	number	可使用窗口宽度，单位 px
windowHeight	number	可使用窗口高度，单位 px
statusBarHeight	number	状态栏的高度，单位 px
safeArea	TaroGeneral.SafeAreaResult	在竖屏正方向下的安全区域

代码演示

React

basic/useWindowInfo/index

import React from 'react';
import DemoContent from '@src/components/DemoContent';
import { Cell } from '@taroify/core';
import { useWindowInfo } from 'taro-hooks';

export default () => {
  const windowInfo = useWindowInfo();

  return (
    <DemoContent>
      <Cell.Group clickable>
        {Object.entries(windowInfo!).map(([key, value]) => (
          <Cell key={key} title={key} brief={JSON.stringify(value)}></Cell>
        ))}
      </Cell.Group>
    </DemoContent>
  );
};

Vue

basic/useWindowInfo/index

<template>
  <demo-content>
    <nut-cell
      v-for="(value, key) in windowInfo"
      :key="key"
      :title="key"
      :sub-title="$filters.stringify(value)"
    ></nut-cell>
  </demo-content>
</template>

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

const windowInfo = useWindowInfo();
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️	✔️	✔️