The data transfer of HarmonyOS ArkTS Ability includes page jump and data transfer within the Ability, data jump and data transfer between Abilities. This section mainly explains the page jump and data transfer in Ability.
Open DevEco Studio, select an Empty Ability project template, and create a project named "ArkUIPagesRouter" as a demonstration example.
2.4.1 Create a new page in Ability
After initializing the project, the following code is generated.
- In the src/main/ets/entryability directory, an Ability file EntryAbility.ts is initially generated. You can implement the life cycle callback content of Ability in the EntryAbility.ts file according to business needs.
- In the src/main/ets/pages directory, an Index page will be generated. This is also the entry page for applications based on Ability. The functions of the entry page can be realized on the Index page according to business needs.
In order to realize page jump and data transfer, a new page needs to be created. In the src/main/ets/pages directory, you can create a new page by right-clicking "New->Page" as shown in Figure 2-5 below.
Based on the original Index page, create a new page named Second, as shown in Figure 2-6 below.
After the Second page is created, two actions will be performed automatically.
One action is to create a Second.ets file in the src/main/ets/pages directory. The content of the file is as follows:
@Entry
@Component
struct Second {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
Another action is to configure the Second page information into the src/main/resources/base/profile/main_pages.json file. The content of the main_pages.json file is as follows:
{
"src": [
"pages/Index",
"pages/Second"
]
}
Change the message variable values of Index.ets and Second.ets to "Index page" and "Second page" respectively to show the difference.
2.4.2 Page jump and parameter passing
Navigation between pages can be implemented through the page routing router module. The page routing module finds the target page according to the page url, so as to realize the jump. Through the page routing module, different URLs can be used to access different pages, including jumping to a specified page in the Ability, replacing the current page with a page in the Ability, returning to the previous page or a specified page, etc. Pass parameters through params.
Before using page routing, you need to import the router module, as shown in the following code.
// 导入router模块
import router from '@ohos.router';
There are several ways to jump to the page, just choose a way to jump according to your needs.
1. router.push()
Jump to the specified page in the Ability by calling the router.push() method. Each time the router.push() method is called, a new page will be created. By default, the number of page stacks will be increased by 1, and the maximum number of pages supported by the page stack is 32.
When the number of page stacks is large or exceeds 32, you can call the router.clear() method to clear all historical pages in the page stack, and only keep the current page as the top page of the stack.
An example usage is as follows:
router.push({
url: 'pages/Second',
params: {
src: 'Index页面传来的数据',
}
})
2. router.push() plus mode parameter
The router.push() method adds a mode parameter, which can be configured as router.RouterMode.Single single instance mode and router.RouterMode.Standard standard mode.
In single instance mode, if the url of the target page already exists in the page stack with the same url page, the page with the same url closest to the top of the stack will be moved to the top of the stack, and the moved page is a new page, and the original page still exists in the stack , the number of page stacks remains unchanged; if the url of the target page does not exist in the page stack with the same url page, jump according to the standard mode, and the number of page stacks will increase by 1.
An example usage is as follows:
router.push({
url: 'pages/Second',
params: {
src: 'Index页面传来的数据',
}
}, router.RouterMode.Single)
3. router.replace()
Jump to the specified page in the Ability by calling the router.replace() method. Even if the current page is replaced with a new page and the replaced current page is destroyed, the number of page stacks remains unchanged.
An example usage is as follows:
router.replace({
url: 'pages/Second',
params: {
src: 'Index页面传来的数据',
}
})
3. router.replace() plus mode parameter
The router.replace() method adds a mode parameter, which can be configured as router.RouterMode.Single single instance mode and router.RouterMode.Standard standard mode.
In single instance mode, if the url of the target page already exists in the page stack with the same url page, the page with the same url closest to the top of the stack will be moved to the top of the stack, replace the current page, and destroy the replaced current page. The page is a newly created page, and the number of page stacks will be reduced by 1; if the url of the target page does not exist in the page stack with the same url page, jump according to the standard mode, and the number of page stacks will remain unchanged.
An example usage is as follows:
router.replace({
url: 'pages/Second',
params: {
src: 'Index页面传来的数据',
}
}, router.RouterMode.Single)
Finally, add a button in the Index.ets file to trigger the jump. Index.ets code is as follows:
// 导入router模块
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State message: string = 'Index页面'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮，触发跳转
Button('跳转')
.fontSize(40)
.onClick(() => {
router.push({
url: 'pages/Second',
params: {
src: 'Index页面传来的数据',
}
});
})
}
.width('100%')
}
.height('100%')
}
}
2.4.3 Parameter reception
Get the custom parameters passed from the Index page by calling the router.getParams() method.
import router from '@ohos.router';
@Entry
@Component
struct Second {
@State src: string = router.getParams()?.['src'];
// 页面刷新展示
...
}
You can call the router.back() method to return to the previous page.
Ultimately, the complete Second.ets code is as follows:
// 导入router模块
import router from '@ohos.router';
@Entry
@Component
struct Second {
@State message: string = 'Second页面'
@State src: string = router.getParams()?.['src'];
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 显示传参的内容
Text(this.src)
.fontSize(30)
// 添加按钮，触发返回
Button('返回')
.fontSize(40)
.onClick(() => {
router.back();
})
}
.width('100%')
}
.height('100%')
}
}
2.4.4 Running
After running the project, the initialization interface is shown in Figure 2-7.
On the Index page, click "Jump" to jump from the Index page to the Second page, and receive parameters and refresh the page on the Second page. The interface effect is shown in Figure 2-8.
When you click "Back" on the Second page, you will return to the Index page shown in Figure 2-7.
The above is the complete process of page jump, parameter passing and receiving parameters.
618 big book discount
No pain, no gain, learn HarmonyOS application development well, challenge high salary!
Taking advantage of the 618 activity season, recharge yourself more. Playing less with mobile phones and studying more is the kingly way! At present, Dangdang and JD.com have launched a 50% discount promotion for book purchases on the platform, which can be described as very affordable!
Of course, there are also children's shoes who don't like text, but like to watch videos, so there are also online video courses. For example, the "Hongmeng System Practical Short Video App Mastering HarmonyOS from 0 to 1" on Menmoke.com is very good and can teach you Develop a short video app similar to Douyin from scratch. A total of 39 hours, the content is also very comprehensive!
References
- Liu Weiwei. HarmonyOS mobile phone application development practice [M]. Beijing: Tsinghua University Press, 2022.
- Liu Weiwei. Hongmeng HarmonyOS application development from entry to mastery [M]. Beijing: Peking University Press, 2022.
- Liu Weiwei. Learn HarmonyOS development from Lao Wei [EB/OL]. https://github.com/waylau/harmonyos-tutorial , 2020-12-13/2022-12-29
- Weiwei Liu. HarmonyOS Exam Bank [EB/OL]. https://github.com/waylau/harmonyos-exam , 2022-11-04/2022-12-29