前言

以前一直以为harmonyos的一次开发多段部署只是ui方面上做出了改变，但是了解之后发现ui上的使用只是一次开发多端部署的一部分。
其实一多是一套代码工程，一次开发上架，多端按需部署，重点是在于一套代码，一次上架，可以在不同的设备上进行安装使用，是为了适应布局才进行进行ui的适配，适配ui只是其中的一小部分内容。
以上是我以前一直一来的误解，希望对大家能有帮助。

工程结构

其实比ui适配更重要的则是一多的项目结构，一多有着三层结构，分别为common（公共能力层），features（基础特性层），products（产品定制层）
大家看到这里先别急着晕，给大家稍微简单的解释一下
common（公共能力层）：用于存放公共基础能力集合（如工具库、公共配置等）这些基础公共代码。（只可被其他两层依赖，不可以反向依赖）
features（基础特性层）：存放相对独立的功能模块代码，比如蓝牙模块，SIM卡模块等
products（产品定制层）：用于存放我们独立的应用，即存放我们应用的本身

这样设计的一个好处是在common目录中存放基础公共代码，features目录中存放相对独立的功能模块代码，product目录中存放完全独立的产品代码。这样在product目录中依赖features和common中的公共代码来实现功能，可以最大程度实现代码复用。
但是开发阶段应考虑不同类型设备间最大程度的复用代码，以减少开发及后续维护的工作量。

调整项目工程

这是我们新建的项目的目录结构

首先我们要创建三个文件夹来存放我们的三层内容，像下方这样

1.整理+创建库模块

创建完成之后，我们将entry移到products中并在common中创建我们的静态库模块

创建模块的时候记得选择这一个，是我们的静态库选项，如果选择其他的会出现无法导入库的问题

这样我们的目录结构就会是这个样子

2.导入依赖库

我们先在common/oh-package.json5中更改文件中的name选项更改为@ohos/common，不然后续会因为包名不匹配报错
然后我们在entry/oh-package.json5文件中填入

  "dependencies": {
    "@ohos/common": "file:../../common/common"
  }

@ohos/common为我们导入的库名，后面的为我们common模块所在的位置，这样可以让系统加载我们的静态库，然后点击上方的Sync Now，加载我们导入的


这样我们的库就加载好了

3.修改应用设备类型

打开我们的entry\src\main\module.json5文件，在deviceTypes的值为我们这个应用可以运行在哪些设备上面如下，我们选择了"phone","tablet"分别代表着手机和平板

4.编写静态库并引用

我们在静态库中可以写上一点简单的案例，比如如下

export function add(num1:number,num2:number){
  return num1+num2
}

然后在index中将这个函数导出

这样我们就可以直接调用了

import {add}from '@ohos/common'
@Entry
@Component
struct Index {

  build() {
    RelativeContainer() {
      Text(add(3,5).toString())
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

这样我们的add函数就可以成功的被调用

响应式布局

因为刚刚我们成功的调用了项目中common库中的内容，下面我来简单介绍一下页面的响应式布局
这里我们详细说一下栅格组件的断点
我们的应用需要根据页面的大小，进行布局，这个时候，我们要根据格栅组件进行获取屏幕的大小，进一步选择使用哪种布局方式

@Entry
@Component
struct GridRowSample1 {
  @State private currentBreakpoint: string = 'unknown'
  build() {
    // 修改断点的取值范围同时启用更多断点，注意，修改的断点值后面必须加上vp单位。
    GridRow({breakpoints: {value: ['600vp', '700vp', '800vp', '900vp', '1000vp'],
      reference: BreakpointsReference.WindowSize}}) {
      GridCol({span:{xs: 12, sm: 12, md: 12, lg:12, xl: 12, xxl:12}}) {
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          Text(this.currentBreakpoint).fontSize(50).fontWeight(FontWeight.Medium)
        }
      }
    }.onBreakpointChange((currentBreakpoint: string) => {
      this.currentBreakpoint = currentBreakpoint
    })
  }
}

上方为示例代码，我们可以根据屏幕的大小划分成几个型号，栅格组件默认提供xs、sm、md、lg四个断点，但最多可以为六个断点

这段代码需要解释的点为breakpoints，着个是获取整个屏幕大小的关键

breakpoints有两个值
分别为

当页面的宽度在断点的地方发生变化，则会调用onBreakpointChange来实现屏幕的格式的切换

结尾

个人的一点感悟，希望能帮到大家