鸿蒙车机适配

随着鸿蒙系统越来越完善，应用的使用人数也越来越多，使用的场景也逐渐丰富多彩，当前鸿蒙包含的设备从手机、平板、折叠屏到车机正逐步扩大生态范围。相同的应用在这么多种场景下，需要适配各种屏幕尺寸变化。 本文主要介绍鸿蒙车机适配，也是在鸿蒙整体生态适配的建议下来做的。

主要的技术点就是断点的概念

官方断点文档

代码实现

其中最主要的关键点是，需要如下部分

let dis = display.getDefaultDisplaySync()
let w = lw.getWindowProperties().windowRect.width
let h = lw.getWindowProperties().windowRect.height
// 必须要使用系统自带的转换方式转换，自己转换可能导致生成的wvp和hvp不对
let wvp = lw.getUIContext().px2vp(w)
let hvp = lw.getUIContext().px2vp(h)

完成代码如下：

updateBreakpoint(): void {
  try {
    window.getLastWindow(this.context).then((lw) => {
      // 获取车机的屏幕
      let dis = display.getDefaultDisplaySync()
      let w = lw.getWindowProperties().windowRect.width
      let h = lw.getWindowProperties().windowRect.height
      // 必须要使用系统自带的转换方式转换，自己转换可能导致生成的wvp和hvp不对
      let wvp = lw.getUIContext().px2vp(w)
      let hvp = lw.getUIContext().px2vp(h)

      // https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-foldable-guide
      let aspectRatio: number = hvp / wvp;
      let hBreakPoint = 'sm'
      if (aspectRatio < 0.8) {
        hBreakPoint = 'sm'
      } else if (aspectRatio < 1.2) {
        hBreakPoint = 'md'
      } else {
        hBreakPoint = 'lg'
      }

      let breakpoint = 'sm'
      if (wvp < 600) { // 手机
        breakpoint = 'sm'
      } else if (wvp < 840) { // 折叠屏展开
        breakpoint = 'md'
      } else {
        breakpoint = 'lg'
      }

      AppStorage.setOrCreate(breakpoint, breakpoint)
      AppStorage.setOrCreate(hBreakPoint, hBreakPoint)
      AppStorage.setOrCreate(hvp, hvp)
      AppStorage.setOrCreate(wvp, wvp)
    })
  } catch (e) {
    console.log('update break point failed ' + JSON.stringify(e))
  }
}

最后把这个放在 windowSizeChange 回调里边就行了。车机上的超级终端什么的再按照之前的适配平板和折叠屏的方式适配即可。