鸿蒙next开发-struct如何封装共用模块

在鸿蒙应用开发(基于ArkTS)中,使用 struct 封装共用模块主要涉及可复用UI组件逻辑模块化两种场景。以下是详细解决方案:

一、UI组件封装(使用 struct)

通过 @Component 装饰器创建可复用的UI组件,适用于按钮、卡片等可视化元素。

示例:封装通用按钮组件

css 复制代码
// components/CommonButton.ets@Componentexport struct CommonButton {  private btnText: string = '默认按钮'  private onTap: () => void = () => {}  build() {    Button(this.btnText)      .width(120)      .height(40)      .backgroundColor(Color.Blue)      .onClick(() => {        this.onTap()      })  }  // 设置按钮文字  public setText(value: string): CommonButton {    this.btnText = value    return this  }  // 设置点击事件  public setOnClick(action: () => void): CommonButton {    this.onTap = action    return this  }}

调用方式

sql 复制代码
// 使用组件import { CommonButton } from '../components/CommonButton'@Entry@Componentstruct HomePage {  build() {    Column() {      CommonButton()        .setText('立即登录')        .setOnClick(() => {          console.log('按钮被点击')        })    }  }}

二、逻辑模块封装(非UI)

对于工具类、服务层等非UI逻辑,使用 ES模块化 进行封装。

示例:网络请求工具类

python 复制代码
// utils/http.etsimport { HttpRequestOptions, HttpResponse } from '@ohos.net.http'export class HttpUtil {  static async get(url: string): Promise<HttpResponse> {    let http = http.createHttp()    return await http.request(url, {      method: http.RequestMethod.GET    })  }  static async post(url: string, data: object): Promise<HttpResponse> {    let http = http.createHttp()    return await http.request(url, {      method: http.RequestMethod.POST,      header: { 'Content-Type': 'application/json' },      extraData: JSON.stringify(data)    })  }}

调用方式

javascript 复制代码
import { HttpUtil } from '../utils/http'async fetchData() {  try {    let response = await HttpUtil.get('https://api.example.com/data')    console.log('响应数据:', response.result)  } catch (error) {    console.error('请求失败:', error)  }}

三、进阶技巧

1. 状态共享

使用 AppStorage 实现全局状态管理:

typescript 复制代码
// stores/userStore.ets
import { AppStorage } from '@ohos.application'

AppStorage.SetOrCreate<string>('username', 'Guest')

export function getUserName(): string {
  return AppStorage.Get<string>('username')
}

export function setUserName(name: string): void {
  AppStorage.Set<string>('username', name)
}

2. 组件插槽

通过 @BuilderParam 实现插槽功能:

scss 复制代码
  @Component
struct CardContainer {
  @BuilderParam content: () => void

  build() {
    Column() {
      this.content()
    }
    .padding(20)
    .backgroundColor(Color.White)
    .borderRadius(8)
  }
}

// 使用
CardContainer({
  content: () => {
    Text('自定义内容').fontSize(16)
  }
})

四、项目结构建议

scss 复制代码
src/
├── components/      // 公共组件
├── utils/           // 工具类
├── services/        // 业务服务
├── models/          // 数据模型
├── resources/       // 静态资源
└── pages/           // 页面目录关键点总结
  1. UI组件 :使用 @Component + struct 封装带视图的模块

  2. 逻辑模块:通过类/函数 + ES Module 导出

  3. 状态管理 :结合 AppStorage 或自有状态管理方案

  4. 类型安全:推荐使用TypeScript增强代码健壮性

根据实际场景选择封装方式,平衡复用性与灵活性。对于高频使用的功能模块,建议通过抽象接口实现更松散的耦合。

相关推荐
别说我什么都不会10 小时前
OpenHarmony源码分析之分布式软总线:trans_service模块(2)/会话管理之新会话
分布式·嵌入式·harmonyos
蓝枫Amy11 小时前
鸿蒙应用程序包HAP的开发与使用
harmonyos
冬冬小圆帽12 小时前
防止手机验证码被刷:React + TypeScript 与 Node.js + Express 的全面防御策略
前端·后端·react.js·typescript
别说我什么都不会14 小时前
OpenHarmony源码分析之分布式软总线:trans_service模块(1)/认证通道管理
分布式·嵌入式·harmonyos
全栈若城14 小时前
84.HarmonyOS NEXT 路由导航与页面管理:构建清晰的应用架构
华为·架构·harmonyos·harmonyos next
全栈若城15 小时前
87.HarmonyOS NEXT 单元测试与自动化测试指南:构建可靠的测试体系
华为·单元测试·harmonyos·harmonyos next
没有了遇见16 小时前
HarmonyOS学习ArkUI之线性布局 (Row/Column)
harmonyos·arkts
小p16 小时前
初探typescript装饰器在一些场景中的应用
前端·typescript·nestjs
晓得迷路了16 小时前
栗子前端技术周刊第 72 期 - 快 10 倍的 TypeScript、React Router 7.3、Astro 5.5...
前端·javascript·typescript
别说我什么都不会17 小时前
OpenHarmony轻量系统服务管理|鸿蒙业务模型重要概念详解
物联网·嵌入式·harmonyos