鸿蒙开发之使用Web组件加载页面

最新推荐文章于 2024-07-04 19:45:47 发布

Misdirection_XG

最新推荐文章于 2024-07-04 19:45:47 发布

阅读量789

点赞数 24

文章标签： harmonyos

本文链接：https://blog.csdn.net/Misdirection_XG/article/details/138959484

版权

页面加载是Web组件的基本功能。根据页面加载数据来源可以分为三种常用场景，包括加载网络页面、加载本地页面、加载HTML格式的富文本数据。

页面加载过程中，若涉及网络资源获取，需要配置ohos.permission.INTERNET网络访问权限。

加载网络页面

开发者可以在Web组件创建的时候指定默认加载的网络页面。在默认页面加载完成后，如果开发者需要变更此Web组件显示的网络页面，可以通过调用loadUrl()接口加载指定网络网页。

在下面的示例中，在Web组件加载完“www.example.com”页面后，开发者可通过loadUrl接口将此Web组件显示页面变更为“www.example1.com”。

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadUrl，跳转到www.example1.com
            this.webviewController.loadUrl('www.example1.com');
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      // 组件创建时，加载www.example.com
      Web({ src: 'www.example.com', controller: this.webviewController})
    }
  }
}

加载本地页面

将本地页面文件放在应用的rawfile目录下，开发者可以在Web组件创建的时候指定默认加载的本地页面，并且加载完成后可通过调用loadUrl()接口变更当前Web组件的页面。

在下面的示例中展示加载本地页面文件的方法：

1.将资源文件放置在应用的resources/rawfile目录下。

资源文件路径
应用侧代码

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadUrl，跳转到local1.html
            this.webviewController.loadUrl($rawfile("local1.html"));
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      // 组件创建时，通过$rawfile加载本地文件local.html
      Web({ src: $rawfile("local.html"), controller: this.webviewController })
    }
  }
}

local.html页面代码

<!-- local.html -->
<!DOCTYPE html>
<html>
  <body>
    <p>Hello World</p>
  </body>
</html>

加载HTML格式的文本数据

Web组件可以通过loadData接口实现加载HTML格式的文本数据。当开发者不需要加载整个页面，只需要显示一些页面片段时，可通过此功能来快速加载页面。

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadData，加载HTML格式的文本数据
            this.controller.loadData(
              "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
              "text/html",
              "UTF-8"
            );
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      // 组件创建时，加载www.example.com
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

怎样学习鸿蒙？

首先必学的是开发语言 ArkTS，这是重中之重，然后就是ArkUI声明式UI开发、Stage模型、网络/数据库管理、分布式应用开发、进程间通信与线程间通信技术、OpenHarmony多媒体技术……。中间还有许多的知识点，都整理成思维导图来分享给大家~
在这里插入图片描述
此外，小编精心准备了一份联合鸿蒙官方发布笔记整理收纳的《鸿蒙开发学习笔记》，内容包含ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

【有需要的小伙伴，可以扫描下方二维码免费领取！！！】

快速入门

开发准备
构建第一个ArkTS应用（Stage模型）
构建第一个ArkTS应用（FA模型）
构建第一个JS应用（FA模型）

开发基础知识

应用程序包基础知识
应用配置文件（Stage模型）
应用配置文件概述（FA模型）

资源分类与访问

资源分类与访问
创建资源目录和资源文件
资源访问

学习ArkTs语言

初识ArkTS语言
基本语法
状态管理
其他状态管理
渲染控制

基于ArkTS声明式开发范式

UI开发（ArkTS声明式开发范式）概述
开发布局
添加组件
显示图片
使用动画
支持交互事件
性能提升的推荐方法

在这里插入图片描述

兼容JS的类Web开发范式

概述
框架说明
构建用户界面
常见组件开发指导
动效开发指导
自定义组件

Web组件

概述
设置基本属性和事件
并发
窗口管理
WebGL
媒体
安全
网络与连接
电话服务
数据管理
…

应用模型

概述
Stage模型开发指导
FA模型开发指导

2024完整鸿蒙学习资料领取方式：扫描下方二维码即可~

Misdirection_XG

关注

24
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
鸿蒙开发之使用Web组件加载页面

页面加载是Web组件的基本功能。根据页面加载数据来源可以分为三种常用场景，包括加载网络页面、加载本地页面、加载HTML格式的富文本数据。页面加载过程中，若涉及网络资源获取，需要配置ohos.permission.INTERNET网络访问权限。
复制链接

扫一扫