mirror of
https://gitee.com/openharmony/codelabs
synced 2024-11-30 10:00:28 +00:00
UIAbility内页面间的跳转（ArkTS）Codelinter整改
Signed-off-by: 13871184879 <452399386@qq.com>
This commit is contained in:
13871184879
parent
771b3250c3
commit
f55aadc76a
@ -1,7 +1,9 @@
|
||||
# UIAbility内页面间的跳转（ArkTS）
|
||||
# Ability内页面间的跳转（ArkTS）
|
||||
|
||||
## 介绍
|
||||
本篇Codelab基于Stage模型下的UIAbility开发，实现UIAbility内页面间的跳转和数据传递。最终效果图如图所示：
|
||||
本篇Codelab基于Stage模型下的Ability开发，实现Ability内页面间的跳转和数据传递。
|
||||
|
||||
最终效果图如下：
|
||||
|
||||
|
||||
|
||||
@ -13,13 +15,13 @@
|
||||
|
||||
### 软件要求
|
||||
|
||||
- [DevEco Studio](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/start-overview.md#%E5%B7%A5%E5%85%B7%E5%87%86%E5%A4%87)版本：DevEco Studio 3.1 Release及以上版本。
|
||||
- OpenHarmony SDK版本：API version 9及以上版本。
|
||||
- [DevEco Studio](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/start-overview.md#%E5%B7%A5%E5%85%B7%E5%87%86%E5%A4%87)版本：DevEco Studio 3.1 Release。
|
||||
- OpenHarmony SDK版本：API version 9。
|
||||
|
||||
### 硬件要求
|
||||
|
||||
- 开发板类型：[润和RK3568开发板](https://gitee.com/openharmony/docs/blob/master/zh-cn/device-dev/quick-start/quickstart-appendix-rk3568.md)。
|
||||
- OpenHarmony系统：3.2 Release及以上版本。
|
||||
- OpenHarmony系统：3.2 Release。
|
||||
|
||||
### 环境搭建
|
||||
|
||||
@ -40,15 +42,17 @@
|
||||
|
||||
## 代码结构解读
|
||||
|
||||
本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在gitee中提供。
|
||||
本篇Codelab只对核心代码进行讲解，完整代码可以直接从gitee获取。
|
||||
|
||||
```
|
||||
├──entry/src/main/ets // 代码区
|
||||
│ ├──common
|
||||
│ │ └──constants
|
||||
│ │ └──CommonConstants.ets // 公共常量类
|
||||
│ │ ├──constants
|
||||
│ │ │ └──CommonConstants.ets // 公共常量类
|
||||
│ │ └──utils
|
||||
│ │ └──Logger.ets // 日志类
|
||||
│ ├──entryability
|
||||
│ │ └──EntryAbility.ts // 程序入口类
|
||||
│ │ └──EntryAbility.ets // 程序入口类
|
||||
│ └──pages
|
||||
│ ├──IndexPage.ets // 入口页面
|
||||
│ └──SecondPage.ets // 跳转页
|
||||
@ -58,10 +62,11 @@
|
||||
|
||||
## 页面跳转
|
||||
|
||||
1. 在工程pages目录中，选中Index.ets，点击鼠标右键 \> Refactor \> Rename，改名为IndexPage.ets。改名后，修改工程entryability目录下EntryAbility.ts文件中windowStage.loadContent方法第一个参数为pages/IndexPage。
|
||||
1. 在工程pages目录中，选中Index.ets，点击鼠标右键 \> Refactor \> Rename，改名为IndexPage.ets。改名后，修改工程entryability目录下EntryAbility.ets文件中windowStage.loadContent方法第一个参数为pages/IndexPage。
|
||||
|
||||
```typescript
|
||||
onWindowStageCreate(windowStage: Window.WindowStage) {
|
||||
// EntryAbility.ets
|
||||
onWindowStageCreate(windowStage: Window.WindowStage): void {
|
||||
...
|
||||
windowStage.loadContent('pages/IndexPage', (err, data) => {
|
||||
...
|
||||
@ -79,6 +84,7 @@
|
||||
IndexPage页面有一个Text文本和Button按钮，点击按钮跳转到下一个页面，并传递数据。IndexPage.ets代码如下：
|
||||
|
||||
```typescript
|
||||
// IndexPage.ets
|
||||
import router from '@ohos.router';
|
||||
import CommonConstants from '../common/constants/CommonConstants';
|
||||
|
||||
@ -101,8 +107,10 @@
|
||||
params: {
|
||||
src: CommonConstants.SECOND_SRC_MSG
|
||||
}
|
||||
});
|
||||
})
|
||||
}).catch((error: Error) => {
|
||||
Logger.info(TAG, 'IndexPage push error' + JSON.stringify(error));
|
||||
});
|
||||
})
|
||||
}
|
||||
...
|
||||
}
|
||||
@ -114,6 +122,7 @@
|
||||
SecondPage页面有两个Text文本，其中一个文本展示从IndexPage页面传递过来的数据。SecondPage.ets代码如下：
|
||||
|
||||
```typescript
|
||||
// SecondPage.ets
|
||||
import router from '@ohos.router';
|
||||
import CommonConstants from '../common/constants/CommonConstants';
|
||||
|
||||
@ -121,7 +130,7 @@
|
||||
@Component
|
||||
struct Second {
|
||||
@State message: string = CommonConstants.SECOND_MESSAGE;
|
||||
@State src: string = router.getParams()?.[CommonConstants.SECOND_SRC_PARAM];
|
||||
@State src: string = (router.getParams() as Record<string, string>)[CommonConstants.SECOND_SRC_PARAM];
|
||||
|
||||
build() {
|
||||
Row() {
|
||||
@ -142,6 +151,7 @@
|
||||
在SecondPage页面中，Button按钮添加onClick()事件。调用router.back()方法，实现返回上一页面的功能。
|
||||
|
||||
```typescript
|
||||
// SecondPage.ets
|
||||
Button($r('app.string.back'))
|
||||
...
|
||||
.onClick(() => {
|
||||
@ -152,6 +162,6 @@ Button($r('app.string.back'))
|
||||
|
||||
您已经完成了本次Codelab的学习，并了解到以下知识点：
|
||||
|
||||
1. 使用页面路由实现UIAbility内页面间的跳转。
|
||||
1. 使用页面路由实现应用内页面跳转。
|
||||
|
||||
|
||||
@ -28,27 +28,27 @@ export class Logger {
|
||||
this.domain = 0xFF00;
|
||||
}
|
||||
|
||||
debug(...args: any[]) {
|
||||
debug(...args: string[]): void {
|
||||
hilog.debug(this.domain, this.prefix, this.format, args);
|
||||
}
|
||||
|
||||
info(...args: any[]) {
|
||||
info(...args: string[]): void {
|
||||
hilog.info(this.domain, this.prefix, this.format, args);
|
||||
}
|
||||
|
||||
warn(...args: any[]) {
|
||||
warn(...args: string[]): void {
|
||||
hilog.warn(this.domain, this.prefix, this.format, args);
|
||||
}
|
||||
|
||||
error(...args: any[]) {
|
||||
error(...args: string[]): void {
|
||||
hilog.error(this.domain, this.prefix, this.format, args);
|
||||
}
|
||||
|
||||
fatal(...args: any[]) {
|
||||
fatal(...args: string[]): void {
|
||||
hilog.fatal(this.domain, this.prefix, this.format, args);
|
||||
}
|
||||
|
||||
isLoggable(level: number) {
|
||||
isLoggable(level: number): void {
|
||||
hilog.isLoggable(this.domain, this.prefix, level);
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,16 +15,19 @@
|
||||
|
||||
import UIAbility from '@ohos.app.ability.UIAbility'
|
||||
import Logger from '../common/utils/Logger';
|
||||
import Want from '@ohos.app.ability.Want';
|
||||
import AbilityConstant from '@ohos.app.ability.AbilityConstant';
|
||||
import window from '@ohos.window';
|
||||
|
||||
const TAG = '[EntryAbility]';
|
||||
|
||||
export default class EntryAbility extends UIAbility {
|
||||
onCreate(want, launchParam) {
|
||||
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
|
||||
Logger.info(TAG, 'onCreate');
|
||||
globalThis.abilityWant = want;
|
||||
AppStorage.SetOrCreate('abilityWant', want);
|
||||
}
|
||||
|
||||
onWindowStageCreate(windowStage) {
|
||||
onWindowStageCreate(windowStage: window.WindowStage): void {
|
||||
// Main window is created, set main page for this ability
|
||||
Logger.info(TAG, 'onWindowStageCreate');
|
||||
windowStage.loadContent('pages/IndexPage', (err, data) => {
|
||||
|
||||
@ -45,7 +45,7 @@ struct IndexPage {
|
||||
params: {
|
||||
src: CommonConstants.SECOND_SRC_MSG
|
||||
}
|
||||
}).catch((error) => {
|
||||
}).catch((error: Error) => {
|
||||
Logger.info(TAG, 'IndexPage push error' + JSON.stringify(error));
|
||||
});
|
||||
})
|
||||
|
||||
@ -23,7 +23,7 @@ import CommonConstants from '../common/constants/CommonConstants';
|
||||
@Component
|
||||
struct SecondPage {
|
||||
@State message: string = CommonConstants.SECOND_MESSAGE;
|
||||
@State src: string = router.getParams()?.[CommonConstants.SECOND_SRC_PARAM];
|
||||
@State src: string = (router.getParams() as Record<string, string>)[CommonConstants.SECOND_SRC_PARAM];
|
||||
|
||||
build() {
|
||||
Row() {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"hvigorVersion": "2.0.0",
|
||||
"hvigorVersion": "2.4.2",
|
||||
"dependencies": {
|
||||
"@ohos/hvigor-ohos-plugin": "2.0.0"
|
||||
"@ohos/hvigor-ohos-plugin": "2.4.2"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user