嗨，我是小路。今天主要和大家分享的主题是“如何获取手机状态栏的高度”。        

从现有的项目中出发，读懂代码的逻辑，然后自己再进行单独重构，让已完成的代码助力自身技能的提升。

一、主要属性

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中通过微信小程序接口，将获取对应的手机设备信息，根据设备信息，调整页面的布局，是小程序的样式随不同的手机兼容样式。

都看到这里了，记得【点赞】+【关注】哟。