获取设备及屏幕信息

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

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

我们可以在 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)
  },
})

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。