获取设备及屏幕信息

不同的手机系统类型不同，屏幕大小也不同，有的手机屏幕的上方（刘海屏）和底部都有一定的安全距离，因此，拿到这部分信息是做好多终端设备适配的核心

小程序的右上角还有一个胶囊按钮，也要对其进行适配

我们可以在 app.ts 文件中的 onLaunch() 里进行该相关信息的获取和存储

• 获取设备信息 wx.getSystemInfoSync()

• 获取胶囊信息 wx.getMenuButtonBoundingClientRect()

App<IAppOption>({
  globalData: {},
  onLaunch() {
    const systenInfo = wx.getSystemInfoSync();
    const capsuleInfo = wx.getMenuButtonBoundingClientRect();
    console.log("设备信息", systenInfo);
    console.log("胶囊信息", capsuleInfo);

    const screenHeight =
      (systenInfo.screenHeight / systenInfo.screenWidth) * 750;

    const safeHeight =
      ((systenInfo.safeArea.height -
        (capsuleInfo.height +
          (capsuleInfo.top - systenInfo.statusBarHeight) * 2)) /
        systenInfo.screenWidth) *
      750;
    const screenWidth = (systenInfo.screenWidth / systenInfo.screenWidth) * 750;
    const statusBarHeader =
      (systenInfo.statusBarHeight / systenInfo.screenWidth) * 750;
    const capsuleHeight =
      ((capsuleInfo.height +
        (capsuleInfo.top - systenInfo.statusBarHeight) * 2) /
        systenInfo.screenWidth) *
      750;
    const safeFooter =
      screenHeight - safeHeight - statusBarHeader - capsuleHeight;

    console.log("屏幕总高度", screenHeight);
    console.log("可使用的屏幕高度", safeHeight);
    console.log("屏幕总宽度", screenWidth);
    console.log("状态栏高度", statusBarHeader);
    console.log("胶囊区域高度", capsuleHeight);
    console.log("底部安全区域高度", safeFooter);
  },
});