ArkWeb頁面跳轉與跨應用導航 - 高階應用

SameX發表於2024-10-18
Web

本文旨在深入探討華為鴻蒙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; // 允許頁面跳轉
    });

在這段程式碼中，我們首先檢查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"
    }
});

在這段程式碼中，我們指定了目標應用的包名和入口頁面的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);

在這段程式碼中，我們建立了一個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);

在這段程式碼中，我們建立了一個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);
    }
});

在這段程式碼中，我們指定了目標應用的包名，並獲取了包名、版本名和版本號。您需要替換為實際的目標應用包名。

示例程式碼

以下示例程式碼展示瞭如何使用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; // 允許頁面跳轉
                });
        }
    }
}

總結

透過掌握ArkWeb框架中的頁面跳轉和跨應用導航方法，您可以輕鬆地實現Web應用的頁面跳轉功能，並引導使用者瀏覽不同的頁面內容，甚至跳轉到其他應用。希望本文提供的示例程式碼能夠幫助您更好地理解和應用這些功能。

相關文章