废话不多说,首先我们从官网了解下分层架构设计-三层架构:
链接: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)
}
}
}
}
项目目录结构如下:
展示效果如下图:
这个就展示到这里了,大家觉得有用处的话就帮忙点点赞!