以下是一个简单的示例，演示如何在微信小程序中响应显示区域的变化：
// page.js
Page({
data: {
windowHeight: 0,
windowWidth: 0,
},
onLoad: function() {
// 获取系统信息
this.getSystemInfo();
// 监听屏幕尺寸变化
wx.onResize(() => {
this.getSystemInfo();
});
},
getSystemInfo: function() {
// 获取系统信息
wx.getSystemInfo({
success: (res) => {
this.setData({
windowHeight: res.windowHeight,
windowWidth: res.windowWidth,
});
console.log('屏幕高度：', res.windowHeight);
console.log('屏幕宽度：', res.windowWidth);
},
});
},
});
在上述代码中：
- wx.getSystemInfo 用于获取系统信息，包括屏幕高度、屏幕宽度等。
- wx.onResize 用于监听屏幕尺寸变化的事件。
在 onLoad 生命周期中初始化并监听屏幕尺寸变化，通过 getSystemInfo 更新数据，从而实现在屏幕尺寸变化时响应显示区域的变化。
这样，你就可以在小程序中根据需要，响应屏幕尺寸的变化，调整页面布局或执行其他逻辑。
转载请注明出处：http://www.zyzy.cn/article/detail/616/微信小程序