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

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


一、UI组件封装(使用 struct

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

示例:封装通用按钮组件
go 复制代码
// components/CommonButton.ets
@Component
export 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
    returnthis
  }

// 设置点击事件
public setOnClick(action: () =>void): CommonButton {
    this.onTap = action
    returnthis
  }
}
调用方式
go 复制代码
// 使用组件
import { CommonButton } from'../components/CommonButton'

@Entry
@Component
struct HomePage {
  build() {
    Column() {
      CommonButton()
        .setText('立即登录')
        .setOnClick(() => {
          console.log('按钮被点击')
        })
    }
  }
}

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

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

示例:网络请求工具类
go 复制代码
// utils/http.ets
import { HttpRequestOptions, HttpResponse } from'@ohos.net.http'

exportclass HttpUtil {
staticasyncget(url: string): Promise<HttpResponse> {
    let http = http.createHttp()
    returnawait http.request(url, {
      method: http.RequestMethod.GET
    })
  }

staticasync post(url: string, data: object): Promise<HttpResponse> {
    let http = http.createHttp()
    returnawait http.request(url, {
      method: http.RequestMethod.POST,
      header: { 'Content-Type': 'application/json' },
      extraData: JSON.stringify(data)
    })
  }
}
调用方式
go 复制代码
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 实现全局状态管理:

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

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

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

exportfunction setUserName(name: string): void {
  AppStorage.Set<string>('username', name)
}
2. 组件插槽

通过 @BuilderParam 实现插槽功能:

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

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

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

四、项目结构建议

go 复制代码
src/
├── components/      // 公共组件
├── utils/           // 工具类
├── services/        // 业务服务
├── models/          // 数据模型
├── resources/       // 静态资源
└── pages/           // 页面目录

关键点总结

  1. UI组件 :使用 @Component + struct 封装带视图的模块

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

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

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

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

关注我获取更多知识或者投稿

相关推荐
像是套了虚弱散4 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
鸿蒙小白龙8 小时前
OpenHarmony 6.0 低空飞行器开发实战:从AI感知检测到组网协同
人工智能·harmonyos·鸿蒙·鸿蒙系统·open harmony
大雷神9 小时前
【成长纪实】Flutter中Dart 与Harmony中 ArkTS 异步编程对比:从 Future 到 Promise
flutter·harmonyos
Swift社区9 小时前
在 HarmonyOS 中平滑切换“点状粒子”与“图片粒子”(含可运行 ArkTS 示例)
华为·harmonyos
猫林老师9 小时前
HarmonyOS多媒体开发:自定义相机与音频播放器实战
数码相机·音视频·harmonyos
逻极9 小时前
HarmonyOS 5 鸿蒙应用签名机制与安全开发实战指南
harmonyos
zhuweisky15 小时前
实现一个纯血鸿蒙版(HarmonyOS)的聊天Demo,并可与其它PC、手机端互通!
harmonyos·im·聊天软件
多测师_王sir15 小时前
鸿蒙hdc命令【杭州多测师】
华为·harmonyos
一点七加一16 小时前
Harmony鸿蒙开发0基础入门到精通Day01--JavaScript篇
开发语言·javascript·华为·typescript·ecmascript·harmonyos
那年窗外下的雪.17 小时前
鸿蒙ArkUI布局与样式进阶(十二)——自定义TabBar + class类机制全解析(含手机商城底部导航案例)
开发语言·前端·javascript·华为·智能手机·harmonyos·arkui