鸿蒙-一次开发多端布署详解

本文介绍了一种三层项目结构设计方法：公共层(common)、特性层(features)和产品层(products)。着重讲解了如何创建静态库模块、配置依赖关系以及实现代码复用，并通过示例演示了如何在产品层调用公共层函数。同时，还介绍了响应式布局的实现方法，包括使用栅格组件检测屏幕尺寸变化和适配不同设备断点。这种分层架构设计能有效提高代码复用率，降低开发和维护成本。

m0_73496548

1415人浏览 · 2025-06-24 17:02:15

m0_73496548 · 2025-06-24 17:02:15 发布

工程结构

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

[HarmonyOS Next]一次开发多端部署的理解-鸿蒙开发者社区

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

调整项目工程

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

[HarmonyOS Next]一次开发多端部署的理解-鸿蒙开发者社区

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

[HarmonyOS Next]一次开发多端部署的理解-鸿蒙开发者社区

1.整理+创建库模块

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

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

[HarmonyOS Next]一次开发多端部署的理解-鸿蒙开发者社区

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

[HarmonyOS Next]一次开发多端部署的理解-鸿蒙开发者社区

2.导入依赖库

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

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#fdfdfd"><span style="color:#000000"><code class="language-arkts">  "dependencies": {
    "@ohos/common": "file:../../common/common"
  }
</code></span></span></span></span>

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

[HarmonyOS Next]一次开发多端部署的理解-鸿蒙开发者社区

这样我们的库就加载好了

3.修改应用设备类型

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

[HarmonyOS Next]一次开发多端部署的理解-鸿蒙开发者社区

4.编写静态库并引用

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

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#fdfdfd"><span style="color:#000000"><code class="language-arkts">export function add(num1:number,num2:number){
  return num1+num2
}
</code></span></span></span></span>

[HarmonyOS Next]一次开发多端部署的理解-鸿蒙开发者社区

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

[HarmonyOS Next]一次开发多端部署的理解-鸿蒙开发者社区

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

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#fdfdfd"><span style="color:#000000"><code class="language-arkts">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%')
  }
}
</code></span></span></span></span>

[HarmonyOS Next]一次开发多端部署的理解-鸿蒙开发者社区

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

响应式布局

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

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#fdfdfd"><span style="color:#000000"><code class="language-arkts">@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
    })
  }
}
</code></span></span></span></span>

复制

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

[HarmonyOS Next]一次开发多端部署的理解-鸿蒙开发者社区

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

breakpoints有两个值
分别为

名称	类型	必填	说明
value	Array<string>	否	设置断点位置的单调递增数组。默认值：[“320vp”, “600vp”, “840vp”]
reference	BreakpointsReference	否	断点切换参照物。（WindowSize：以窗口为参照，ComponentSize：以容器为参照。）