HarmonyOS Next 一多开发(上)-CSDN博客

本文链接：https://blog.csdn.net/LexinZong/article/details/141960859

概念

一多开发：一次开发，多端部署。简称‘‘一多’’。

措施

实现一多开发需要解决3个核心问题：1.页面适配问题。2.功能兼容问题。3.工程组织问题。

页面级一多：

页面级一多有两类：1.自适应布局：略微调整页面结构。2.响应式布局：大的页面调整。

自适应布局

自适应布局能力有7种，拉伸能力、均分能力、占比能力、缩放能力、延伸能力、隐藏能力、折行能力。

布局能力	使用场景	做法
拉伸能力	变化空间分配给指定区域	flexGrow和flexShrink
均分能力	变化空间均匀分配空白区域	FlexAlign,SpaceEvenly
占比能力	按照预设占比，随父容器变化	子组件宽高百分比
缩放能力	要求保持等比缩放（宽高比）	aspectRatio
延伸能力	按在列表先后顺序，随组件尺寸变化显示或隐藏	List、Scroll
隐藏能力	按显示优先级，随组件尺寸变化显示或隐藏	displayPriority
折行能力	需要自动换行	Flex

响应式布局

三种响应式布局能力：断点、媒体查询、栅格布局

断点：xs：手表等超小屏，[0,320)

sm: 手机竖屏， [320，600）

md: 手机横屏/折叠屏[600，840）

lg: 平板，2in1设备 [840,+∞）

EntryAbility中存储，监听


import window from '@ohos.window'
import display from '@ohos.display'
import UIAbility from '@ohos.app.ability.UIAbility'

export default class EntryAbility extends UIAbility {
  private windowObj?: window.Window
  private curBp: string = ''
  // 根据当前窗口尺寸更新断点
  private updateBreakpoint(windowWidth: number) :void{
    // 将长度的单位由px换算为vp
    let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels
    let Bp: string = ''
    if (windowWidthVp < 320) {
      Bp = 'xs' 
    } else if (windowWidthVp < 600) {
      Bp = 'sm' 
    } else if (windowWidthVp < 840) {
      Bp = 'md' 
    } else {
      Bp = 'lg' 
    }
    if (this.curBp !== Bp) {
      this.curBp = Bp
      // 记录当前断点值
      AppStorage.setOrCreate('currentBreakpoint', this.curBp)
    }
  }

  onWindowStageCreate(windowStage: window.WindowStage) :void{
    windowStage.getMainWindow().then((windowObj) => {
      this.windowObj = windowObj
      // 获取应用启动时的窗口尺寸
      this.updateBreakpoint(windowObj.getWindowProperties().windowRect.width)
      // 注册回调函数，监听窗口尺寸变化
      windowObj.on('windowSizeChange', (windowSize)=>{
        this.updateBreakpoint(windowSize.width)
      })
    });
   // ...
  }
   
  //...
}

page中运用

 @StorageProp('currentBreakpoint') currentBp: string = 'sm'