HarmonyOS Next-三层架构之项目引用har包实战

废话不多说,首先我们从官网了解下分层架构设计-三层架构:

链接:developer.huawei.com/consumer/cn...

分层架构逻辑模型:

下面以项目为例-实现在 Personal.ets页面 中引用 feature 中mine的har组件并展示:

1.在feature/mine/src/main/ets/components/MainPage.ets新建一个har组件:

javascript 复制代码
@Component
export struct MainPage {
  @State message: string = 'mine---Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.需要在 product/phone 的 oh-package.json5 中添加对feature/mine 的依赖

javascript 复制代码
{
  "name": "phone",
  "version": "1.0.0",
  "description": "Please describe the basic information.",
  "main": "",
  "author": "",
  "license": "Apache-2.0",
  "dependencies": {
    "@ohos/mine": "file:../../features/mine"  // 添加这一行
  }
}

3.然后在feature/mine中导出需要的组件

javascript 复制代码
// 导出所有需要的组件
export { MainPage } from './src/main/ets/components/MainPage'

4.最后在 Personal.ets 中导入并使用组件

javascript 复制代码
import { MainPage } from 'mine'  // 导入 feature/mine 中的组件

@Entry
@Component
export struct Personal {
  build() {
    Stack() {
      Navigation() {
        List() {
          ListItem() {
            // 使用 feature/mine  中的 MainPage 组件
            MainPage()
          }
        }
        .padding({ left: 12, right: 12 })
        .width('100%')
        .height('100%')
        .backgroundColor(Color.White)
      }
    }
  }
}

项目目录结构如下:

展示效果如下图:

这个就展示到这里了,大家觉得有用处的话就帮忙点点赞!

相关推荐
球球和皮皮5 分钟前
Babylon.js学习之路《一、初识 Babylon.js:什么是 3D 开发与 WebGL 的完美结合?》
javascript·3d·前端框架·ar·vr
冬阳春晖26 分钟前
web animation API 锋利的css动画控制器 (更新中)
前端·javascript·css
浪裡遊2 小时前
Typescript中的对象类型
开发语言·前端·javascript·vue.js·typescript·ecmascript
杨-羊羊羊2 小时前
什么是深拷贝什么是浅拷贝,两者区别
开发语言·前端·javascript
发呆的薇薇°2 小时前
在vue里,使用dayjs格式化时间并实现日期时间的实时更新
前端·javascript·vue.js
m0_627827522 小时前
vue3中 input 中放大镜在后面
javascript·vue.js·elementui
从味书2 小时前
安装typescript时,npm install -g typescript报错
javascript·typescript·npm
前端小崔3 小时前
从零开始学习three.js(15):一文详解three.js中的纹理映射UV
前端·javascript·学习·3d·webgl·数据可视化·uv
belldeep3 小时前
vite:npm 安装 pdfjs-dist , PDF.js View 预览功能示例
javascript·pdf·pdfjs-dist·pdf.worker
Lysun0014 小时前
electron 结合 react(cra创建的) 创建桌面应用和打包桌面应用
javascript·react.js·electron