UIAbility Page Redirection - Huawei Developer HarmonyOS NEXT Codelabs
How to implement UIAbility Page Redirection
1 Introduction
This codelab introduces how to develop a UIAbility in the stage model, implementing page redirection and data transfer within the UIAbility.
Example:
Concepts
Page router: allows an application to access pages through URLs, especially like navigating to a specified page in an application, replacing the current page with another one in an application, and returning to the previous page or a specified page.
2 Environment Setup
You need to set up the HarmonyOS development environment.
Software Requirements
DevEco Studio version: DevEco Studio NEXT Beta1 or later
HarmonyOS SDK version: HarmonyOS NEXT Beta1 or later
Hardware Requirements
Device type: Huawei phone
HarmonyOS: HarmonyOS NEXT Developer Beta1 or later
Environment Setup
Install DevEco Studio. For details, see Downloading Software and Installing Software.
Configure the DevEco Studio development environment, which requires access to the Internet for proper functioning. For details, please refer to Configuring the Development Environment.
Complete app debugging by referring to the following:
3 Code Structure
This codelab introduces only the core code. For the complete code, download it from the attachment or Gitee source code.
No Preview
├──entry/src/main/ets // ArkTS code area
│ ├──common
│ │ ├──constants
│ │ │ └──CommonConstants.ets // Common constants
│ │ └──utils
│ │ └──Logger.ets // Logger
│ ├──entryability
│ │ └──EntryAbility.ets // Application entry
│ └──pages
│ ├──IndexPage.ets // Entry page
│ └──SecondPage.ets // Page to be redirected to
└──entry/src/main/resources // Directory of resource files
4 Page Creation
Start DevEco Studio and create a project. In the pages directory of the project, right-click Index.ets and choose Refactor > Rename from the shortcut menu to rename the file IndexPage.ets. Change the first parameter of the windowStage.loadContent method in the EntryAbility.ets file in the entryability directory of the project to pages/IndexPage. Then, the IndexPage is automatically loaded when the app is started.
Go to the entry > src > main > ets > pages directory of the project, right-click and choose New > Page, and create a page named SecondPage. DevEco Studio automatically adds pages/SecondPage to the entry > src > main > resources > base > profile > main_pages.json file in the project directory.
Note: All created pages must be configured in the main_pages.json file. Pages created in DevEco Studio are automatically configured. If you manually copy the page file to the entry > src > main > ets > pages directory, you need to manually configure the corresponding page in the main_pages.json file.
5 Page Redirection
To implement redirection from IndexPage to SecondPage and transfer data, do the following:
Import the router module to the two pages.
On IndexPage, add a click event to the Button component. Use the router.pushUrl() method to add the SecondPage path to the URL. params is a custom parameter.
SecondPage uses the router.getParams() method to obtain the custom parameter passed from IndexPage.
IndexPage has a piece of text and a button. Tap the button to go to the next page and transfer data. The IndexPage.ets code is as follows:
The SecondPage has two pieces of text, one of which displays the data transferred from IndexPage. The code of SecondPage.ets is as follows:
On SecondPage, add the onClick() event for Button and call the router.back() method to return to the previous page.
7 Congratulations
Well done. You have successfully completed this codelab and learned how to:
Use the page router to implement page redirection.
Original source: Huawei Developers - UIAbility Page Redirection