小程序js怎么获取手机宽高

小程序js获取手机宽高的方法有：使用wx.getSystemInfo、使用wx.getSystemInfoSync、监听窗口尺寸变化。其中，使用wx.getSystemInfo方法是最常见且推荐的方式，因为它能够获取到更全面的系统信息，并且在大多数情况下不需要同步调用，从而不会阻塞主线程。

一、使用wx.getSystemInfo

wx.getSystemInfo 是微信小程序提供的一个异步接口，用来获取系统信息，包括屏幕宽高、设备像素比、操作系统、微信版本等。它的调用非常简单，适合在需要获取系统信息的任何地方使用。

1.1 示例代码

wx.getSystemInfo({

  success: function (res) {
    console.log('屏幕宽度:', res.screenWidth);
    console.log('屏幕高度:', res.screenHeight);
  }
});

1.2 详细解析

这个方法的优点在于它是异步的，不会阻塞主线程。它的返回值包含了很多有用的信息，如屏幕宽度、高度、设备像素比等，这些信息可以帮助开发者做出更适配的界面布局。

二、使用wx.getSystemInfoSync

wx.getSystemInfoSync 是微信小程序提供的一个同步接口，用来获取系统信息。相比于异步接口，它的调用更简单，但会阻塞主线程，因此不建议在高频调用的场景下使用。

2.1 示例代码

const res = wx.getSystemInfoSync();

console.log('屏幕宽度:', res.screenWidth);
console.log('屏幕高度:', res.screenHeight);

2.2 详细解析

这个方法适合在初始化时使用，比如在页面加载时获取系统信息。由于它是同步的，获取到的信息会立即返回，但在大量数据处理的情况下可能会影响性能。

三、监听窗口尺寸变化

微信小程序还提供了监听窗口尺寸变化的方法，适用于动态变化的场景，比如用户旋转设备时。

3.1 示例代码

wx.onWindowResize(function (res) {

  console.log('窗口宽度:', res.windowWidth);
  console.log('窗口高度:', res.windowHeight);
});

3.2 详细解析

这个方法的优点在于它能够实时监听窗口尺寸的变化，并且在发生变化时触发回调函数。适用于需要实时监控界面布局的场景，比如游戏、视频播放等。

四、综合使用场景

在实际开发中，往往需要综合使用上述方法来获取和监控屏幕尺寸。

4.1 页面加载时获取屏幕尺寸

在页面加载时，可以使用 wx.getSystemInfo 或 wx.getSystemInfoSync 获取初始的屏幕尺寸。

Page({

  onLoad: function () {
    wx.getSystemInfo({
      success: function (res) {
        console.log('初始屏幕宽度:', res.screenWidth);
        console.log('初始屏幕高度:', res.screenHeight);
      }
    });
  }
});

4.2 监听屏幕尺寸变化

在需要实时监控屏幕尺寸变化的场景下，使用 wx.onWindowResize 方法。

Page({

  onLoad: function () {
    wx.onWindowResize(function (res) {
      console.log('窗口宽度变化:', res.windowWidth);
      console.log('窗口高度变化:', res.windowHeight);
    });
  }
});

五、常见问题及解决方案

5.1 异步获取屏幕尺寸的时序问题

有时在页面加载时需要立即获取屏幕尺寸来进行布局，这时异步方法可能会有一定的延迟。可以考虑在页面加载前使用 wx.getSystemInfoSync 方法同步获取屏幕尺寸。

5.2 屏幕旋转导致布局错乱

当用户旋转设备时，屏幕尺寸会发生变化，可能导致布局错乱。可以使用 wx.onWindowResize 方法监听屏幕尺寸变化，并在回调函数中重新布局。

wx.onWindowResize(function (res) {

  // 重新布局代码
});

六、实际应用案例

6.1 自适应布局

在开发中，经常需要根据屏幕尺寸动态调整布局。例如，在一个电商小程序中，可以根据屏幕宽度动态调整商品卡片的排列方式。

wx.getSystemInfo({

  success: function (res) {
    if (res.screenWidth < 375) {
      // 小屏幕布局
    } else {
      // 大屏幕布局
    }
  }
});

6.2 响应式设计

响应式设计是一种适配不同屏幕尺寸的设计方法。在微信小程序中，可以结合 CSS 媒体查询和 JavaScript 动态调整布局，实现响应式设计。

/* 小屏幕样式 */

@media screen and (max-width: 375px) {
  .container {
    flex-direction: column;
  }
}
/* 大屏幕样式 */
@media screen and (min-width: 376px) {
  .container {
    flex-direction: row;
  }
}

wx.getSystemInfo({

  success: function (res) {
    if (res.screenWidth < 375) {
      // 小屏幕样式
    } else {
      // 大屏幕样式
    }
  }
});

七、推荐工具

在进行项目团队管理时，推荐使用 研发项目管理系统PingCode 和 通用项目协作软件Worktile。这两个工具能够帮助团队高效管理项目，提升工作效率。

7.1 PingCode

PingCode 是一款专业的研发项目管理系统，特别适合技术团队使用。它提供了丰富的功能，如需求管理、缺陷跟踪、代码管理等，能够全面提升研发效率。

7.2 Worktile

Worktile 是一款通用的项目协作软件，适合各类团队使用。它提供了任务管理、团队协作、时间管理等功能，能够帮助团队更好地协作和沟通。

八、结论

通过上述方法，我们可以在微信小程序中轻松获取和监控屏幕宽高信息，进而实现更好的界面适配和用户体验。无论是使用 wx.getSystemInfo、wx.getSystemInfoSync 还是 wx.onWindowResize，都能够满足不同的需求场景。同时，结合实际应用案例和推荐的工具，可以进一步提升项目管理和开发效率。

相关问答FAQs：

1. 如何在小程序中获取手机屏幕的宽度和高度？
在小程序中，可以使用wx.getSystemInfoSync()方法来获取手机的系统信息，其中包括屏幕的宽度和高度。具体的代码如下：

var systemInfo = wx.getSystemInfoSync();
var screenWidth = systemInfo.windowWidth; // 获取屏幕宽度
var screenHeight = systemInfo.windowHeight; // 获取屏幕高度

2. 在小程序中如何根据手机屏幕的宽度和高度进行自适应布局？
根据不同手机屏幕的宽度和高度进行自适应布局是开发小程序时常遇到的问题。可以使用rpx单位进行布局，rpx是小程序中的相对单位，可以根据屏幕宽度进行自适应缩放。可以通过wx.getSystemInfoSync()方法获取屏幕宽度，然后根据设计稿的尺寸进行换算，设置元素的宽高。

var systemInfo = wx.getSystemInfoSync();
var screenWidth = systemInfo.windowWidth; // 获取屏幕宽度
var screenHeight = systemInfo.windowHeight; // 获取屏幕高度

// 假设设计稿宽度为750px
var designWidth = 750;
var scale = screenWidth / designWidth; // 缩放比例

// 设置元素宽度为200px
var elementWidth = 200 * scale + 'rpx';

3. 在小程序开发中，如何根据手机屏幕的宽度和高度进行图片适配？
在小程序中，可以使用wx.getImageInfo()方法获取图片的信息，包括图片的宽度和高度。然后根据屏幕的宽度和高度计算图片的适配尺寸，设置图片的宽度和高度属性。具体的代码如下：

wx.getImageInfo({
  src: '图片路径',
  success: function(res) {
    var imageWidth = res.width; // 获取图片宽度
    var imageHeight = res.height; // 获取图片高度

    var systemInfo = wx.getSystemInfoSync();
    var screenWidth = systemInfo.windowWidth; // 获取屏幕宽度
    var screenHeight = systemInfo.windowHeight; // 获取屏幕高度

    // 计算图片适配尺寸
    var scale = screenWidth / imageWidth; // 宽度缩放比例
    var imageAdaptWidth = screenWidth; // 适配后的图片宽度
    var imageAdaptHeight = imageHeight * scale; // 适配后的图片高度

    // 设置图片的宽度和高度属性
    // <image src="图片路径" style="width:{{imageAdaptWidth}}px; height:{{imageAdaptHeight}}px;"></image>
  }
});