DEV Community

SameX
SameX

Posted on

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

本文旨在深入探讨华为鸿蒙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; // 允许页面跳转
    });
Enter fullscreen mode Exit fullscreen mode

在这段代码中,我们首先检查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"
    }
});
Enter fullscreen mode Exit fullscreen mode

在这段代码中,我们指定了目标应用的包名和入口页面的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);
Enter fullscreen mode Exit fullscreen mode

在这段代码中,我们创建了一个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);
Enter fullscreen mode Exit fullscreen mode

在这段代码中,我们创建了一个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);
    }
});
Enter fullscreen mode Exit fullscreen mode

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

示例代码

以下示例代码展示了如何使用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; // 允许页面跳转
                });
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

总结

通过掌握ArkWeb框架中的页面跳转和跨应用导航方法,您可以轻松地实现Web应用的页面跳转功能,并引导用户浏览不同的页面内容,甚至跳转到其他应用。希望本文提供的示例代码能够帮助您更好地理解和应用这些功能。

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay