Page Navigation in HarmonyOS Next
Page Navigation Within the Same Application
When clicking on a link in a webpage to navigate to other pages within the application, the onLoadIntercept() interface of the Web component can be used to achieve this.
Example: Navigating to a Profile Page
In the following example, the application's home page Index.ets loads the frontend page route.html. When a hyperlink in the route.html page is clicked, it navigates to the application's ProfilePage.ets page.
Application Home Page Code (Index.ets)
// index.ets
import { webview } from '@kit.ArkWeb';
import { router } from '@kit.ArkUI';
@Entry
@Component
struct WebComponent {
webviewController: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
// The route.html file is stored in the path src/main/resources/rawfile
Web({ src: $rawfile('route.html'), controller: this.webviewController })
.onLoadIntercept((event) => {
if (event) {
let url: string = event.data.getRequestUrl();
if (url.indexOf('native://') === 0) {
// Navigate to another page
router.pushUrl({ url: url.substring(9) });
return true;
}
}
return false;
})
}
}
}
Frontend Page Code (route.html)
<!-- route.html -->
<!DOCTYPE html>
<html>
<body>
<div>
<a href="native://pages/ProfilePage">Profile</a>
</div>
</body>
</html>
Profile Page Code (ProfilePage.ets)
@Entry
@Component
struct ProfilePage {
@State message: string = 'Hello World';
build() {
Column() {
Text(this.message)
.fontSize(20)
}
}
}
Cross-Application Navigation
The Web component can also be used to navigate to other applications by clicking on hyperlinks in the frontend page.
Example: Navigating to the Phone Dialer
In the following example, clicking on a hyperlink in the call.html frontend page navigates to the phone application's dialer interface.
Application-Side Code
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { call } from '@kit.TelephonyKit';
@Entry
@Component
struct WebComponent {
webviewController: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Web({ src: $rawfile('call.html'), controller: this.webviewController })
.onLoadIntercept((event) => {
if (event) {
let url: string = event.data.getRequestUrl();
// Check if the link is a dialing link
if (url.indexOf('tel://') === 0) {
// Navigate to the dialer interface
call.makeCall(url.substring(6), (err) => {
if (!err) {
console.info('make call succeeded.');
} else {
console.info('make call fail, err is:' + JSON.stringify(err));
}
});
return true;
}
}
return false;
})
}
}
}
Frontend Page Code (call.html)
<!-- call.html -->
<!DOCTYPE html>
<html>
<body>
<div>
<a href="tel://1234567890">Make a Call</a>
</div>
</body>
</html>
Top comments (0)