【HarmonyOS】【鸿蒙应用开辟】DevEco Studio小白必看开辟项目中UI结构框架
知识点：模块module、UIAbility、page页面三者的创建 跳转 结构关系
概括
在鸿蒙开辟中，一个项目中可以存在多个模块，然后会在模块中定义UIAbility，并在UIAbility中创建和配置Page页面。Page页面则通过组合和配置不同的组件来构建复杂的用户界面，实现与用户的交互。这种结构框架使得鸿蒙的UI开辟更加灵活和高效。
https://i-blog.csdnimg.cn/blog_migrate/db21e9efbbbad5919076c8ef40564ddd.png
创建并简单先容
模块module
https://i-blog.csdnimg.cn/blog_migrate/5512fe8846001914a816fe8e2fa58683.png
项目创建的时间会默认创建一个模块，但是也可以别的创建多个模块。像entry、entry2就是两个不同的模块，模块是项目下最基本的单元，在手机APP中，不同的模块在APP的后台可以独立存在，同一个项目中，只有模块可以在手机后台互相独立存在。如下所示
https://i-blog.csdnimg.cn/blog_migrate/d708d9ad65c18bf269b66f1339d1d627.png
UIAbility
https://i-blog.csdnimg.cn/blog_migrate/da01285e41a53f58886c0c63ba511a1c.png
https://i-blog.csdnimg.cn/blog_migrate/d58bc5829e7b34d27cf196851e84bfbd.png
UIAbility在创建项目时也默认创建了，其作为一种界面本领，在同一个模块内，不同的UIAbility可以共享相同的Page页面。这种计划方式允许开辟者在不重复编写相同页面代码的情况下，实现多个界面本领的复用。这极大地减少了开辟成本，提高了开辟服从。
page页面
https://i-blog.csdnimg.cn/blog_migrate/97e5453689a346a093fdc826fdf81188.png
page是在UI直接展示的界面，其也是最底子最直观展示的部分。
实现跳转
模块间跳转：
entry跳转到自己新建的entry2模块
import { common, Want } from '@kit.AbilityKit';
@Entry
@Component
struct Index {
@State message: string = 'entry';
//获取当前上下文
private context = getContext(this) as common.UIAbilityContext;
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button('跳转entry2模块')
.onClick(()=>{
// context为Ability对象的成员，在非Ability对象内部调用需要
// 将Context对象传递过去
let wantInfo: Want = {
//不用填
deviceId: '', // deviceId为空表示本设备
//应用标识符 在AppScope路径下的app.json5文件里面可以找到自己项目对应的应用标识符
bundleName: 'com.example.firforstage',
//填写要跳转到的模块的名字
moduleName: 'entry2', // moduleName非必选
//填写要跳转到的模块下的UIAbility 因为既然跳转其实在UI显示上直观切换的是page页面，而page页面也在UIAbility下
abilityName: 'Entry2Ability',
parameters: {
// 自定义信息
info: '来自EntryAbility Page_UIAbilityComponentsInteractive页面'
},
}
this.context.startAbility(wantInfo)
})
}
.width('100%')
}
.height('100%')
}
} 项目内UIAbility跳转：
在项目内每个UIAbility有自己的默认打开页面，可以在如下每个UIAbility中对应的文件中找到
跳转方法与模块间跳转相同，只不外没有模块的变化，只需要填写UIAbility的变化即可
https://i-blog.csdnimg.cn/blog_migrate/bfabfbd52e2ec255753480af3cd337d0.png
页面Page的跳转：
用router组件实现即可，具体可以翻阅文档OpenAtom OpenHarmony
import router from '@ohos.router';
@Entry
@Component
struct Index2Page {
@State message: string = 'Hello World';
build() {
Row() {
Column() {
Button('页面跳转')
.onClick(()=>{
router.pushUrl({
url:'pages/Index'
})
})
}
.width('100%')
}
.height('100%')
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]