ArkWeb页面加载与浏览记录导航 - 基础操作 原创

SameX
发布于 2024-10-18 14:41
浏览
0收藏

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

简介

在ArkWeb框架中,页面加载和浏览记录导航是开发者经常需要使用的功能。通过掌握这些功能,您可以轻松地加载Web页面、管理浏览记录,并提升用户体验。本文将介绍ArkWeb框架中页面加载和浏览记录导航的基础操作。

页面加载

加载网络页面

您可以使用两种方式加载网络页面:

  • 使用src属性: 在Web组件的src属性中指定网络页面的URL,例如:
Web({ src: "https://www.example.com" });
  • 使用loadUrl方法: 在Web组件创建后,使用loadUrl方法加载网络页面,例如:
Web({ src: $rawfile("local.html") })
    .onControllerAttached(() => {
        this.controller.loadUrl("https://www.example.com");
    });

您可以使用loadUrl方法在Web组件创建后动态更改加载的页面。

加载本地页面

您可以使用两种方式加载本地页面:

  • 使用$rawfile: 在Web组件的src属性中使用$rawfile函数加载本地页面,例如:
Web({ src: $rawfile("local.html") });
  • 使用loadUrl方法: 在Web组件创建后,使用loadUrl方法加载本地页面,例如:
Web({ src: $rawfile("local.html") })
    .onControllerAttached(() => {
        this.controller.loadUrl($rawfile("another_local.html"));
    });

您可以使用loadUrl方法在Web组件创建后动态更改加载的页面。

加载HTML文本数据

您可以使用loadData方法加载HTML文本数据,例如:

Web({ src: $rawfile("local.html") })
    .onControllerAttached(() => {
        this.controller.loadData("<html><body>Hello, World!</body></html>", "text/html", "UTF-8");
    });

您需要指定数据类型、编码格式和内容。

加载模式

ArkWeb框架支持两种加载模式:

  • 同步渲染模式: 默认模式,Web渲染与系统组件一起进行。
  • 异步渲染模式: Web组件作为独立节点渲染,性能更高,但受限于最大尺寸。
    您可以使用renderMode属性设置加载模式,例如:
Web({ src: "https://www.example.com", renderMode: RenderMode.ASYNC_RENDER });

加载进度监听

您可以使用onProgressChange接口监听页面加载进度,例如:

Web({ src: "https://www.example.com" })
    .onProgressChange((event) => {
        console.log("Loading progress: " + event.newProgress);
    });

浏览记录导航

前进和后退

您可以使用forward和backward方法进行页面前进和后退操作,例如:

Web({ src: "https://www.example.com" })
    .onControllerAttached(() => {
        this.controller.forward(); // 前进
        this.controller.backward(); // 后退
    });

您可以使用accessForward和accessBackward方法检查是否存在前进或后退的历史记录,例如:

Web({ src: "https://www.example.com" })
    .onControllerAttached(() => {
        if (this.controller.accessForward()) {
            this.controller.forward(); // 存在前进历史记录,可以前进
        }
        if (this.controller.accessBackward()) {
            this.controller.backward(); // 存在后退历史记录,可以后退
        }
    });

示例代码

以下示例代码展示了如何加载网络页面、加载本地页面和加载HTML文本数据,以及如何进行浏览记录导航:

import { webview } from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
    controller: webview.WebviewController = new webview.WebviewController();
    build() {
        Column() {
            // 加载网络页面
            Web({ src: "https://www.example.com" });
            // 加载本地页面
            Web({ src: $rawfile("local.html") });
            // 加载HTML文本数据
            Web({ src: $rawfile("local.html") })
                .onControllerAttached(() => {
                    this.controller.loadData("<html><body>Hello, World!</body></html>", "text/html", "UTF-8");
                });
            // 浏览记录导航
            Web({ src: "https://www.example.com" })
                .onControllerAttached(() => {
                    this.controller.forward(); // 前进
                    this.controller.backward(); // 后退
                });
        }
    }
}

总结

通过掌握ArkWeb框架中页面加载和浏览记录导航的基础操作,您可以轻松地加载Web页面、管理浏览记录,并提升用户体验,希望能够帮到您,嘿嘿。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
收藏
回复
举报
回复
    相关推荐