ArkWeb Page Jumping and Cross-Application Navigation - Advanced Applications

This article aims to deeply explore the technical details of the Huawei HarmonyOS Next system (up to API 12 as of now), and is summarized based on actual development practices.
It mainly serves as a vehicle for technical sharing and communication. Mistakes and omissions are inevitable. Colleagues are welcome to put forward valuable opinions and questions so that we can make progress together.
This article is original content, and any form of reprint must indicate the source and the original author.

Introduction

Page jumping is a common operation in Web applications, which can guide users to browse different page contents. The ArkWeb framework provides multiple ways to achieve page jumping, including intercepting page jump requests and using the router module of ArkUI. This article will introduce these methods in depth and provide some code examples.

Page Jumping

Jumping to Other Pages within the Application

You can intercept page jump requests using the onLoadIntercept interface and perform page jumping based on the URL. For example, you can intercept all URLs starting with native:// on the home page of the application and jump to the corresponding pages:

Web({ src: $rawfile("index.html") })
   .onLoadIntercept((event) => {
        if (event.data.getRequestUrl().startsWith("native://")) {
            const targetPage = event.data.getRequestUrl().substring(9);
            // Jump to the target page and pass parameters
            router.pushUrl({
                url: targetPage,
                params: {
                    key1: "value1",
                    key2: "value2"
                }
            });
            return true; // Intercept and handle the page jump
        }
        return false; // Allow the page jump
    });

In this code, we first check if the URL starts with native://. If it does, we use the router.pushUrl method to jump to the target page and pass parameters. Returning true indicates that the page jump is intercepted and handled, while returning false indicates that the page jump is allowed.

Jumping to Other Applications

You can use the router module of ArkUI for cross-application navigation. For example, you can use the following code to jump to the system settings application:

import { router } from '@ohos.arkui';
router.gotoApp({
    package: "com.example.systemsettings",
    ability: "com.example.systemsettings.MainAbility",
    params: {
        key1: "value1",
        key2: "value2"
    }
});

In this code, we specify the package name of the target application and the ability of the entry page, and pass parameters. You need to replace it with the actual target application information.

Using Intent Filters

You can use Intent filters for cross-application navigation. For example, you can use the following code to open the map application and search for a specific location:

import { Intent } from '@ohos.arkui';
const intent = new Intent();
intent.setAction("android.intent.action.VIEW");
intent.setData("geo:37.7749,-122.4194"); // Geographic coordinates
Intent.startActivity(intent);

In this code, we create an Intent object and set the action and data. You need to replace it with the actual target application information and the search location.

Cross-Application Navigation

Using the arkui.Intent Module

You can use the arkui.Intent module for cross-application navigation. For example, you can use the following code to open the phone application and make a call:

import { Intent } from '@ohos.arkui';
const intent = new Intent();
intent.setAction("android.intent.action.DIAL");
intent.setData("tel:[phone]"); // Telephone number
Intent.startActivity(intent);

In this code, we create an Intent object and set the action and data. You need to replace it with the actual target application information and the telephone number.

Using the arkui.PackageManager Module

You can use the arkui.PackageManager module to obtain application information, such as the package name and version number. For example:

import { PackageManager } from '@ohos.arkui';
PackageManager.getPackageInfo({
    packageName: "com.example.systemsettings",
    success: (info) => {
        console.log("Package name: " + info.packageName);
        console.log("Version name: " + info.versionName);
        console.log("Version code: " + info.versionCode);
    },
    fail: (err) => {
        console.log("Error: " + err.message);
    }
});

In this code, we specify the package name of the target application and obtain the package name, version name, and version code. You need to replace it with the actual target application package name.

Example Code

The following example code shows how to use the onLoadIntercept interface to jump to other pages within the application, as well as how to use the router module and Intent filters to jump to other applications:

import { webview } from '@ohos.web.webview';
import { router } from '@ohos.arkui';
import { Intent } from '@ohos.arkui';
@Entry
@Component
struct WebComponent {
    controller: webview.WebviewController = new webview.WebviewController();
    build() {
        Column() {
            // Jump to other pages within the application
            Web({ src: $rawfile("index.html") })
               .onLoadIntercept((event) => {
                    if (event.data.getRequestUrl().startsWith("native://")) {
                        const targetPage = event.data.getRequestUrl().substring(9);
                        // Jump to the target page and pass parameters
                        router.pushUrl({
                            url: targetPage,
                            params: {
                                key1: "value1",
                                key2: "value2"
                            }
                        });
                        return true; // Intercept and handle the page jump
                    }
                    return false; // Allow the page jump
                });
            // Jump to other applications
            Web({ src: $rawfile("index.html") })
               .onLoadIntercept((event) => {
                    if (event.data.getRequestUrl().startsWith("tel://")) {
                        const phoneNumber = event.data.getRequestUrl().substring(6);
                        // Use Intent filters to open the phone application and make a call
                        const intent = new Intent();
                        intent.setAction("android.intent.action.DIAL");
                        intent.setData("tel:" + phoneNumber);
                        Intent.startActivity(intent);
                        return true; // Intercept and handle the page jump
                    }
                    0: {
                        const targetPage = event.data.getRequestUrl().substring(9);
                        // Jump to the target page and pass parameters
                        router.pushUrl({
                            url: targetPage,
                            params: {
                                key1: "value1",
                                key2: "value2"
                            }
                        });
                        return true; // Intercept and handle the page jump
                    }
                    return false; // Allow the page jump
                });
        }
    }
}

Summary

By mastering the page jumping and cross-application navigation methods in the ArkWeb framework, you can easily implement the page jumping function of Web applications, guide users to browse different page contents, and even jump to other applications. We hope that the example code provided in this article can help you better understand and apply these functions.