鸿蒙实战：页面跳转

1. 实战概述

• 实战概述：本实战通过ArkUI框架，在鸿蒙系统上开辟了一个简单的两页面应用。首页显示问候语和“下一页”按钮，点击后跳转到第二页。第二页展示欢迎信息并提供“返回”按钮。通过路由模块实现页面跳转，并在控制台纪录操纵效果。
  

2. 实现步调

2.1 创建项目

• 选择类型与模板：Application - Empty Ability
  
  
  
  
• 设置项目根本信息
  
  
  
  
• 单击【Finish】按钮，天生项目根本框架
  
  
  
  
• 运行步伐，查看效果（需要创建模拟器，没有模拟器，可以用previewer）
  
  
  
  
• 单击绿色的运行按钮
  
  
  
  

2.2 预备图片素材

• 将两个页面所需配景图片放入resources\base\media目录里
  
  
  
  

2.3 编写首页代码

• 首页pages/Index.ets
  
  
  
  

1. // 导入页面路由模块，它提供了页面间跳转的功能
2. import { router } from '@kit.ArkUI';
3. // 导入业务错误处理模块，用于处理业务逻辑中可能出现的错误
4. import { BusinessError } from '@kit.BasicServicesKit';
6. // 使用@Entry装饰器标记这个组件为页面的入口点
7. @Entry
8.   // 使用@Component装饰器定义这个组件
9. @Component
10. struct Index {
11.   // 定义一个状态变量message，用于存储要显示的文本内容，初始值为'Hi, My Friend'
12.   @State message: string = '你好，我的朋友~';
13.   // 定义一个状态变量next，用于存储按钮上的文本内容，初始值为'Next'
14.   @State next: string = '下一页';
16.   // build方法用于构建和返回组件的UI结构
17.   build() {
18.     Stack() {
19.       // 使用Image组件设置背景图片，图片资源通过$r函数引用
20.       Image($r('app.media.first'))
21.         .width('100%') // 设置图片宽度为父容器宽度的100%
22.         .height('100%') // 设置图片高度为父容器高度的100%
23.         .objectFit(ImageFit.Cover) // 设置图片适应方式为覆盖整个容器，保持图片比例
25.       // 使用Row组件创建一个水平布局容器
26.       Row() {
27.         // 使用Column组件创建一个垂直布局容器，用于放置文本和按钮
28.         Column() {
29.           // 使用Text组件显示message状态变量的值
30.           Text(this.message)
31.             .fontSize(40) // 设置文本字体大小为40
32.             .fontWeight(FontWeight.Bold) // 设置文本字体加粗
33.             .fontColor(Color.Green) // 设置文本绿色
35.           // 使用Button组件创建一个按钮
36.           Button() {
37.             // 按钮内的文本，显示next状态变量的值
38.             Text(this.next)
39.               .fontSize(30) // 设置按钮内文本字体大小为30
40.               .fontWeight(FontWeight.Bold) // 设置按钮内文本字体加粗
41.           }
42.           // 设置按钮的类型为胶囊形
43.           .type(ButtonType.Capsule)
44.           // 设置按钮顶部外边距为20
45.           .margin({
46.             top: 20
47.           })
48.           // 设置按钮的背景颜色为蓝色
49.           .backgroundColor('#0D9FFB')
50.           // 设置按钮的宽度为父容器宽度的40%
51.           .width('40%')
52.           // 设置按钮的高度为父容器高度的10%
53.           .height('10%')
55.           // 为按钮绑定点击事件处理函数
56.           .onClick(() => {
57.             // 点击按钮时，在控制台输出成功点击的信息
58.             console.info('单击【下一页】按钮~');
59.             // 执行页面跳转操作，跳转到'pages/Second'页面
60.             // 使用router.pushUrl方法进行页面跳转，并处理跳转结果
61.             router.pushUrl({ url: 'pages/Second' }).then(() => {
62.               // 跳转成功后，在控制台输出跳转成功的信息
63.               console.info('成功跳转到第二页~');
64.             }).catch((err: BusinessError) => {
65.               // 捕获跳转过程中可能发生的错误，并处理
66.               // 这里假设错误对象是BusinessError类型，并输出错误码和错误信息
67.               console.error(`跳转到下一页失败。错误码：${err.code}, 错误信息：is ${err.message}`);
68.             });
69.           });
70.         }
71.         // 设置Column容器的宽度为父容器的100%，确保布局填满整个水平空间
72.         .width('100%')
73.       }
74.       // 设置Row容器的高度为父容器的100%，确保布局填满整个垂直空间
75.       .height('100%')
76.     }
77.   }
78. }

复制代码

• 代码说明：这段代码界说了一个ArkUI框架下的页面组件Index，作为鸿蒙系统的用户界面入口。它包含配景图片、文本和按钮。点击按钮后，页面会跳转到pages/Second，同时处理跳转成功或失败的环境，并在控制台输出相干信息。
  

2.4 创建第二个页面

• 在pages目录上单击右键，New | Page | Empty Page
  
  
  
  
• 设置页面名称 - Second
  
  
  
  
• 单击【Finish】按钮
  
  
  
  
• 查看主页配置文件 - main_pages.json
  
  
  
  
• 编写Second.ets代码
  

1. // 导入页面路由模块，用于页面间的导航
2. import { router } from '@kit.ArkUI';
3. // 导入业务错误处理模块，用于捕获和处理业务相关的错误
4. import { BusinessError } from '@kit.BasicServicesKit';
6. // 使用@Entry注解标记Second组件为页面入口点
7. @Entry
8.   // 使用@Component注解定义Second为一个组件
9. @Component
10. struct Second {
11.   // 定义一个状态变量message，用于存储页面上要显示的文本
12.   @State message: string = '泸职院欢迎你';
13.   // 定义一个状态变量back，用于存储返回按钮上的文本
14.   @State back: string = '返回';
16.   // build方法用于构建和返回组件的UI结构
17.   build() {
18.     Stack() {
19.       // 使用Image组件设置背景图片，图片资源通过$r函数引用
20.       Image($r('app.media.second'))
21.         .width('100%') // 设置图片宽度为父容器宽度的100%
22.         .height('100%') // 设置图片高度为父容器高度的100%
23.         .objectFit(ImageFit.Cover) // 设置图片适应方式为覆盖整个容器，保持图片比例
25.       // 使用Row组件创建一个水平布局容器
26.       Row() {
27.         // 使用Column组件创建一个垂直布局容器，用于放置文本和按钮
28.         Column() {
29.           // 使用Text组件显示message状态变量的值
30.           Text(this.message)
31.             .fontSize(40) // 设置文本字体大小为40
32.             .fontWeight(FontWeight.Bold) // 设置文本字体加粗
33.             .fontColor(Color.Red) // 设置文本红色
35.           // 使用Button组件创建一个按钮
36.           Button() {
37.             // 按钮内的文本，显示back状态变量的值
38.             Text(this.back)
39.               .fontSize(30) // 设置按钮内文本字体大小为30
40.               .fontWeight(FontWeight.Bold) // 设置按钮内文本字体加粗
41.           }
42.           // 设置按钮的类型为胶囊形
43.           .type(ButtonType.Capsule)
44.           // 设置按钮顶部外边距为20
45.           .margin({
46.             top: 20
47.           })
48.           // 设置按钮的背景颜色为蓝色
49.           .backgroundColor('#0D9FFB')
50.           // 设置按钮的宽度为父容器宽度的40%
51.           .width('40%')
52.           // 设置按钮的高度为父容器高度的10%
53.           .height('10%')
55.           // 为按钮绑定onClick事件处理函数
56.           .onClick(() => {
57.             // 点击按钮时，在控制台输出成功点击的信息
58.             console.info('成功单击【返回】按钮~')
59.             try {
60.               // 调用router.back()方法尝试返回到上一页
61.               router.back()
62.               // 如果返回成功，在控制台输出成功返回的信息
63.               console.info('成功返回第一页~')
64.             } catch (err) {
65.               // 如果返回失败，捕获错误并处理
66.               // 尝试将错误对象转换为BusinessError类型，并获取错误码和错误信息
67.               let code = (err as BusinessError).code;
68.               let message = (err as BusinessError).message;
69.               // 在控制台输出失败返回的信息，包括错误码和错误信息
70.               console.error(`返回第一页失败。错误码：${err.code}, 错误信息：is ${err.message}`);
71.             }
72.           })
73.         }
74.         // 设置Column容器的宽度为父容器宽度的100%
75.         .width('100%')
76.       }
77.       // 设置Row容器的高度为父容器高度的100%，确保布局填满整个页面
78.       .height('100%')
79.     }
80.   }
81. }

复制代码

• 代码说明：这段代码界说了一个ArkUI的页面组件Second，作为鸿蒙系统的界面之一。它包含配景图、红色加粗文本“泸职院欢迎你”和蓝色胶囊形返回按钮。点击按钮实验返回上一页，并在控制台纪录操纵效果，包括成功或失败的错误信息。
  

3. 测试效果

• 在模拟器上运行步伐
  
  
  
  
• 单击【下一页】按钮，跳转到第二个页面
  
  
  
  
• 单击【返回】按钮，返回第一个页面
  
  
  
  
• 查看操纵录屏
  
  
  
  

4. 实战总结

• 通过本次实战，在鸿蒙系统上使用ArkUI框架开辟了一个包含两个页面的简单应用。首页展示了问候语和一个按钮，点击后可以或许跳转到第二页。第二页则展示了欢迎信息和一个返回按钮。通过路由模块实现了页面间的跳转，并在控制台纪录了操纵效果。这个项目不仅加深了对ArkUI框架的理解，也锻炼了在鸿蒙系统上进行应用开辟的实践能力。通过现实操纵，学会了如何设置项目、预备素材、编写代码以及测试应用，为未来更复杂的项目打下了坚实的底子。
  

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