【HarmonyOS】【鸿蒙应用开辟】DevEco Studio小白必看开辟项目中UI结构框架 ...

知识点：

模块module、UIAbility、page页面三者的创建 跳转 结构关系


概括

在鸿蒙开辟中，一个项目中可以存在多个模块，然后会在模块中定义UIAbility，并在UIAbility中创建和配置Page页面。Page页面则通过组合和配置不同的组件来构建复杂的用户界面，实现与用户的交互。这种结构框架使得鸿蒙的UI开辟更加灵活和高效。

创建并简单先容

模块module 

项目创建的时间会默认创建一个模块，但是也可以别的创建多个模块。像entry、entry2就是两个不同的模块，模块是项目下最基本的单元，在手机APP中，不同的模块在APP的后台可以独立存在，同一个项目中，只有模块可以在手机后台互相独立存在。如下所示

UIAbility

UIAbility在创建项目时也默认创建了，其作为一种界面本领，在同一个模块内，不同的UIAbility可以共享相同的Page页面。这种计划方式允许开辟者在不重复编写相同页面代码的情况下，实现多个界面本领的复用。这极大地减少了开辟成本，提高了开辟服从。

page页面

page是在UI直接展示的界面，其也是最底子最直观展示的部分。

实现跳转


模块间跳转：

entry跳转到自己新建的entry2模块

1. import { common, Want } from '@kit.AbilityKit';
3. @Entry
4. @Component
5. struct Index {
6.   @State message: string = 'entry';
7.   //获取当前上下文
8.   private context = getContext(this) as common.UIAbilityContext;
9.   build() {
10.     Row() {
11.       Column() {
12.         Text(this.message)
13.           .fontSize(50)
14.           .fontWeight(FontWeight.Bold)
15.         Button('跳转entry2模块')
16.           .onClick(()=>{
17.             // context为Ability对象的成员，在非Ability对象内部调用需要
18.             // 将Context对象传递过去
19.             let wantInfo: Want = {
20.               //不用填
21.               deviceId: '', // deviceId为空表示本设备
22.               //应用标识符 在AppScope路径下的app.json5文件里面可以找到自己项目对应的应用标识符
23.               bundleName: 'com.example.firforstage',
24.               //填写要跳转到的模块的名字
25.               moduleName: 'entry2', // moduleName非必选
26.               //填写要跳转到的模块下的UIAbility 因为既然跳转其实在UI显示上直观切换的是page页面，而page页面也在UIAbility下
27.               abilityName: 'Entry2Ability',
28.               parameters: {
29.                 // 自定义信息
30.                 info: '来自EntryAbility Page_UIAbilityComponentsInteractive页面'
31.               },
32.             }
33.             this.context.startAbility(wantInfo)
34.           })
35.       }
36.       .width('100%')
37.     }
38.     .height('100%')
39.   }
40. }

复制代码

项目内UIAbility跳转：

在项目内每个UIAbility有自己的默认打开页面，可以在如下每个UIAbility中对应的文件中找到

跳转方法与模块间跳转相同，只不外没有模块的变化，只需要填写UIAbility的变化即可

页面Page的跳转：

用router组件实现即可，具体可以翻阅文档OpenAtom OpenHarmony

1. import router from '@ohos.router';
3. @Entry
4. @Component
5. struct Index2Page {
6.   @State message: string = 'Hello World';
8.   build() {
9.     Row() {
10.       Column() {
11.         Button('页面跳转')
12.           .onClick(()=>{
13.           router.pushUrl({
14.             url:'pages/Index'
15.           })
16.           })
17.       }
18.       .width('100%')
19.     }
20.     .height('100%')
21.   }
22. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。