屏幕与窗口

1、基本介绍

1. 屏幕：设备的物理屏幕尺寸，固定不变

2. 窗口：小程序可用显示区域，会减去状态栏、导航栏等系统 UI 占用的空间

2、屏幕与窗口信息获取

const windowInfo = wx.getWindowInfo();

console.log("屏幕宽度：", windowInfo.screenWidth);
console.log("屏幕高度：", windowInfo.screenHeight);

console.log("窗口宽度：", windowInfo.windowWidth);
console.log("窗口高度：", windowInfo.windowHeight);

console.log("状态栏高度：", windowInfo.statusBarHeight);
console.log(
  "导航栏高度：",
  windowInfo.screenHeight - windowInfo.windowHeight - windowInfo.statusBarHeight
);

# 输出结果

屏幕宽度： 390
屏幕高度： 844
窗口宽度： 390
窗口高度： 753
状态栏高度： 47
导航栏高度： 44

胶囊按钮

1、基本介绍

1. 胶囊按钮是微信小程序导航栏右侧的一个固定的、不可移动的控件

2. 不管是使用原生导航栏，还是使用自定义导航栏 "navigationStyle": "custom"，胶囊按钮都会存在

3. 胶囊按钮的存在保证了用户在任何小程序中都有一个统一、熟悉的入口来进行转发、反馈等核心操作

2、胶囊按钮信息获取

const menuButtonBoundingClientRect = wx.getMenuButtonBoundingClientRect();

console.log("胶囊按钮宽度：", menuButtonBoundingClientRect.width);
console.log("胶囊按钮高度：", menuButtonBoundingClientRect.height);

console.log("胶囊按钮顶部与屏幕上边缘距离：", menuButtonBoundingClientRect.top);
console.log("胶囊按钮底部与屏幕上边缘距离：", menuButtonBoundingClientRect.bottom);
console.log("胶囊按钮左侧与屏幕左边缘距离：", menuButtonBoundingClientRect.left);
console.log("胶囊按钮右侧与屏幕左边缘距离：", menuButtonBoundingClientRect.right);

# 输出结果

胶囊按钮宽度： 87
胶囊按钮高度： 32
胶囊按钮顶部与屏幕上边缘距离： 51
胶囊按钮底部与屏幕上边缘距离： 83
胶囊按钮左侧与屏幕左边缘距离： 296
胶囊按钮右侧与屏幕左边缘距离： 383

const menuButtonBoundingClientRect = wx.getMenuButtonBoundingClientRect();
const windowInfo = wx.getWindowInfo();

console.log("胶囊按钮顶部与屏幕上边缘距离：", menuButtonBoundingClientRect.top);
console.log("胶囊按钮底部与屏幕下边缘距离：", windowInfo.screenHeight - menuButtonBoundingClientRect.bottom);
console.log("胶囊按钮左侧与屏幕左边缘距离：", menuButtonBoundingClientRect.left);
console.log("胶囊按钮右侧与屏幕右边缘距离：", windowInfo.screenWidth - menuButtonBoundingClientRect.right);

# 输出结果

胶囊按钮顶部与屏幕上边缘距离： 51
胶囊按钮底部与屏幕下边缘距离： 761
胶囊按钮左侧与屏幕左边缘距离： 296
胶囊按钮右侧与屏幕右边缘距离： 7