ArkWeb页面跳转与跨应用导航 - 高级应用原创

SameX

发布于 2024-10-18 14:43

4354浏览

0收藏

本文旨在深入探讨华为鸿蒙HarmonyOS Next系统（截止目前API12）的技术细节，基于实际开发实践进行总结。
主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。
本文为原创内容，任何形式的转载必须注明出处及原作者。

简介

页面跳转是Web应用中常见的操作，可以引导用户浏览不同的页面内容。ArkWeb框架提供了多种方式实现页面跳转，包括拦截页面跳转请求和使用ArkUI的router模块。本文将深入介绍这些方法，并提供一些代码示例。

页面跳转

跳转到应用内其他页面

您可以使用onLoadIntercept接口拦截页面跳转请求，并根据URL进行页面跳转。例如，您可以在应用的首页拦截所有以native://开头的URL，并跳转到相应的页面：

Web({ src: $rawfile("index.html") })
    .onLoadIntercept((event) => {
        if (event.data.getRequestUrl().startsWith("native://")) {
            const targetPage = event.data.getRequestUrl().substring(9);
            // 跳转到目标页面，并传递参数
            router.pushUrl({
                url: targetPage,
                params: {
                    key1: "value1",
                    key2: "value2"
                }
            });
            return true; // 拦截并处理页面跳转
        }
        return false; // 允许页面跳转
    });
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

在这段代码中，我们首先检查URL是否以native://开头。如果是，我们使用router.pushUrl方法跳转到目标页面，并传递参数。返回true表示拦截并处理页面跳转，返回false表示允许页面跳转。

跳转到其他应用

您可以使用ArkUI的router模块进行跨应用导航。例如，您可以使用以下代码跳转到系统设置应用：

import { router } from '@ohos.arkui';
router.gotoApp({
    package: "com.example.systemsettings",
    ability: "com.example.systemsettings.MainAbility",
    params: {
        key1: "value1",
        key2: "value2"
    }
});
1.
2.
3.
4.
5.
6.
7.
8.
9.

在这段代码中，我们指定了目标应用的包名和入口页面的ability，并传递了参数。您需要替换为实际的目标应用信息。

使用Intent过滤器

您可以使用Intent过滤器进行跨应用导航。例如，您可以使用以下代码打开地图应用并搜索特定地点：

import { Intent } from '@ohos.arkui';
const intent = new Intent();
intent.setAction("android.intent.action.VIEW");
intent.setData("geo:37.7749,-122.4194"); // 地理坐标
Intent.startActivity(intent);
1.
2.
3.
4.
5.

在这段代码中，我们创建了一个Intent对象，并设置了action和数据。您需要替换为实际的目标应用信息和搜索地点。

跨应用导航

使用arkui.Intent模块

您可以使用arkui.Intent模块进行跨应用导航。例如，您可以使用以下代码打开电话应用并拨打电话：

import { Intent } from '@ohos.arkui';
const intent = new Intent();
intent.setAction("android.intent.action.DIAL");
intent.setData("tel:1234567890"); // 电话号码
Intent.startActivity(intent);
1.
2.
3.
4.
5.

在这段代码中，我们创建了一个Intent对象，并设置了action和数据。您需要替换为实际的目标应用信息和电话号码。

使用arkui.PackageManager模块

您可以使用arkui.PackageManager模块获取应用信息，例如包名和版本号。例如：

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: (error) => {
        console.log("Error: " + error.message);
    }
});
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

在这段代码中，我们指定了目标应用的包名，并获取了包名、版本名和版本号。您需要替换为实际的目标应用包名。

示例代码

以下示例代码展示了如何使用onLoadIntercept接口跳转到应用内其他页面，以及如何使用router模块和Intent过滤器跳转到其他应用：

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() {
            // 跳转到应用内其他页面
            Web({ src: $rawfile("index.html") })
                .onLoadIntercept((event) => {
                    if (event.data.getRequestUrl().startsWith("native://")) {
                        const targetPage = event.data.getRequestUrl().substring(9);
                        // 跳转到目标页面，并传递参数
                        router.pushUrl({
                            url: targetPage,
                            params: {
                                key1: "value1",
                                key2: "value2"
                            }
                        });
                        return true; // 拦截并处理页面跳转
                    }
                    return false; // 允许页面跳转
                });
            // 跳转到其他应用
            Web({ src: $rawfile("index.html") })
                .onLoadIntercept((event) => {
                    if (event.data.getRequestUrl().startsWith("tel://")) {
                        const phoneNumber = event.data.getRequestUrl().substring(6);
                        // 使用Intent过滤器打开电话应用并拨打电话
                        const intent = new Intent();
                        intent.setAction("android.intent.action.DIAL");
                        intent.setData("tel:" + phoneNumber);
                        Intent.startActivity(intent);
                        return true; // 拦截并处理页面跳转
                    }
                    return false; // 允许页面跳转
                });
        }
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.