嗨，我是小路。今天主要和大家分享的主题是"如何获取手机状态栏的高度"。
从现有的项目中出发，读懂代码的逻辑，然后自己再进行单独重构，让已完成的代码助力自身技能的提升。
一、主要属性
1.wx.getSystemInfo
定义：微信小程序提供的一个 API，用于获取系统信息。它会同步返回设备的相关信息。
| 字段 | 类型 | 说明 |
|---|---|---|
| model | string | 手机型号 |
| pixelRatio | number | 设备像素比 |
| screenWidth | number | 屏幕宽度 |
| screenHeight | number | 屏幕高度 |
| windowWidth | number | 可使用窗口宽度 |
| windowHeight | number | 可使用窗口高度 |
| statusBarHeight | number | 状态栏的高度 |
| language | string | 微信设置的语言 |
| version | string | 微信版本号 |
| system | string | 操作系统及版本 |
| platform | string | 客户端平台（Android / iOS） |
| SDKVersion | string | 客户端基础库版本 |
| benchmarkLevel | number | 设备性能等级 |
2.wx.getMenuButtonBoundingClientRect
定义 ：微信小程序提供的一个 API，用于获取右上角胶囊按钮（Menu Button）的布局位置信息。这个按钮通常包含"关闭"、"更多"等功能，其位置会因设备型号、屏幕尺寸和状态栏高度的不同而变化。
| 属性 | 类型 | 说明 |
|---|---|---|
width |
number |
宽度，单位 px |
height |
number |
高度，单位 px |
top |
number |
上边界坐标（距离屏幕顶部） |
right |
number |
右边界坐标（距离屏幕左侧） |
bottom |
number |
下边界坐标 |
left |
number |
左边界坐标 |
3.provide/inject
定义：将数据、方法或状态从一个父级后代组件"提供"（provide）给其任意层级的后代组件使用，而不需要通过逐层传递。用provide方法，传入需要传递的值；后代可以用inject进行接收。
三、最后总结
在app.vue中通过微信小程序接口，将获取对应的手机设备信息，根据设备信息，调整页面的布局，是小程序的样式随不同的手机兼容样式。
都看到这里了，记得【点赞】+【关注】哟。