鸿蒙多端适配

1、设备类型判断

import { BreakpointConstants, replaceLpx2Vp, SetBreakPoint } from '@ohos/common'
@StorageLink('breakPoint') breakPoint: string = BreakpointConstants.BREAKPOINT_MD

类型汇总

/**
 * Breakpoints that represent small device types.
 */
static readonly BREAKPOINT_SM: string = 'sm';

/**
 * Breakpoints that represent middle device types.
 */
static readonly BREAKPOINT_MD: string = 'md';

/**
 * Breakpoints that represent large device types.
 */
static readonly BREAKPOINT_LG: string = 'lg';

/**
 * Breakpoints that represent large device types.
 */
static readonly BREAKPOINT_TB: string = 'tb';

2、单位替换

Ctrl+f正则 '(\d+)lpx'

Ctrl+r替换 replaceLpx2Vp($1)

3、两种布局方案

flex

听力播放页面-双折叠展开

grid

build() {
  GridRow() {
    GridCol({ span: { sm: 12, md: 6, lg: 4 } }) {
      AlbumCover({ currentBreakpoint: this.currentBreakpoint })
    }
    .backgroundColor($r('app.color.album_background'))

    GridCol({ span: { sm: 12, md: 6, lg: 8 } }) {
      PlayList({ currentBreakpoint: this.currentBreakpoint })
    }
    .borderRadius($r('app.float.playlist_border_radius'))
  }
  .height(StyleConstants.FULL_HEIGHT)
}