当前位置： 首页 > news >正文

HarmonyOS—使用Web组件加载页面

news 2026/5/21 5:35:16

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

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

加载网络页面

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

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

// xxx.etsimport web_webview from '@ohos.web.webview';
@Entry@Componentstruct 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 组件的页面。

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

● 将资源文件放置在应用的 resources/rawfile 目录下。图 1 资源文件路径

● 应用侧代码

// xxx.etsimport web_webview from '@ohos.web.webview';
@Entry@Componentstruct 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.etsimport web_webview from '@ohos.web.webview';
@Entry@Componentstruct 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 })    }  }}

点击关注阅读原文，了解更多资讯

相关文章：

HarmonyOS—使用Web组件加载页面

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

编程日记 2023/9/3 2:35:41

Redis 缓存穿透、击穿、雪崩

一、缓存穿透 1、含义 缓存穿透是指查询一个缓存中和数据库中都不存在的数据&#xff0c;导致每次查询这条数据都会透过缓存&#xff0c;直接查库&#xff0c;最后返回空。 2、解决方案 1&#xff09;缓存空对象 就是当数据库中查不到数据的时候&#xff0c;我缓存一个空对象…...

编程日记 2023/9/3 2:34:39

设计模式-原型模式详解

文章目录 前言理论基础1. 原型模式定义2. 原型模式角色3. 原型模式工作过程4. 原型模式的优缺点 实战应用1. 原型模式适用场景2. 原型模式实现步骤3. 原型模式与单例模式的区别 原型模式的变体1. 带有原型管理器的原型模式2. 懒汉式单例模式的原型模式实现3. 细粒度原型模式 总…...

编程日记 2023/9/3 2:33:38

大语言模型之七- Llama-2单GPU微调SFT

&#xff08;T4 16G&#xff09;模型预训练colab脚本在github主页面。详见Finetuning_LLama_2_0_on_Colab_with_1_GPU.ipynb 在上一篇博客提到两种改进预训练模型性能的方法Retrieval-Augmented Generation (RAG) 或者 finetuning。本篇博客过一下模型微调。 微调&#xff1a…...

编程日记 2023/9/3 2:32:38

房地产行业专题报告：日本房地产市场借鉴

目录 1. 日本房地产泡沫的形成与崩溃 1.1 背景：实际需求减弱、宽松货币和弱金融监管推动泡沫形成 1.1.1 宏观环境：日本 80 年代起生育率降低，房地产基本面支撑力不足 1.1.2 货币政策：宽松货币政策叠加金融自由化促进泡沫生成 1.1.3 助推因素：企业积极参与土地投机、股…...

编程日记 2023/9/3 2:31:37

Educational Codeforces Round 154 (Rated for Div. 2)

Educational Codeforces Round 154 (Rated for Div. 2) A. Prime Deletion 思路&#xff1a; 因为1到9每个数字都有&#xff0c;所以随便判断也质素即可 代码 #include<bits/stdc.h> using namespace std; #define int long long #define rep(i,a,n) for(int ia;i<…...

编程日记 2023/9/3 2:30:35

elasticsearch批量删除(查询删除)

注:delete by query只适用于低于elasticsearch2.0的版本(不包含2.0)。有两种形式: 1.无请求体 curl -XDELETE localhost:9200/twitter/tweet/_query?quser:kimchy 2.有请求体 使用请求体的时候&#xff0c;请求体中只能使用query查询&#xff0c;不能使用filter curl -XD…...

编程日记 2023/9/3 2:29:34

容器技术Linux Namespaces和Cgroups

对操作系统了解多少&#xff0c;仅仅敲个命令吗 操作系统虚拟化&#xff08;容器技术&#xff09;的发展历程 1979 年&#xff0c;UNIX 的第 7 个版本引入了 Chroot 特性。Chroot 现在被认为是第一个操作系统虚拟化&#xff08;Operating system level virtualization&#x…...

编程日记 2023/9/3 2:28:33

GO语言圣经 第四章习题

练习4.1 编写一个函数&#xff0c;计算两个SHA256哈希码中不同bit的数目。&#xff08;参考2.6.2节的PopCount函数。) func PopCount(ptr *[32]byte) int {var res intfor i : 0; i < 32; i {x : int(ptr[i])for x ! 0 {res x & 1x >> 1}}return res }练习4.2 编…...

编程日记 2023/9/3 2:27:31

远程连接Ubuntu 22.04

远程连接Ubuntu 22.04 安装openssh-server sudo apt install openssh-server检查服务运行状态 systemctl status sshd重启服务状态 sudo systemctl restart ssh开启防火墙 sudo ufw enable开启ssh传输端口 sudo ufw allow ssh设置开机启动服务 sudo systemctl enable ssh配置服…...

编程日记 2023/9/3 2:26:30

字节前端实习的两道算法题，看看强度如何

最长严格递增子序列 题目描述 给你一个整数数组nums&#xff0c;找到其中最长严格递增子序列的长度。 子序列是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3,6,2,7] 是数组 [0,3,1,6,2,2,7…...

编程日记 2023/9/3 2:25:29

设计模式—策略模式

目录 一、定义 二、特点 三、优点 四、缺点 五、实例 六.涉及到的知识点 1、一个类里面有哪些东西&#xff1f; 2、类和实例 什么是类&#xff1f; 什么是实例&#xff1f; 什么是实例化&#xff1f; 3、字段和属性 什么是字段&#xff1f; 属性是什么&#xff1…...

编程日记 2023/9/3 2:24:26

LPDDR4、DDR4

核心信息&#xff1a; 2400Mbps&#xff08;每秒传输2400*1百万bit&#xff09; 2400MT/s&#xff08;百万次/秒&#xff09; 信号...

编程日记 2023/9/3 2:23:25

ESP32C3 LuatOS RC522①写入数据并读取M1卡

LuatOS RC522官方示例 官方示例没有针对具体开发板&#xff0c;现以ESP32C3开发板为例。 选用的RC522模块 ESP32C3-CORE开发板 注意ESP32C3的 SPI引脚位置&#xff0c;SPI的id2 示例代码 -- LuaTools需要PROJECT和VERSION这两个信息 PROJECT "helloworld" VERSIO…...

编程日记 2023/9/3 2:22:23

MusicBrainz Picard for Mac :音乐文件ID3编辑器

MusicBrainz Picard for Mac是一款macOS平台的音乐文件ID3编辑器&#xff0c;能够帮助我们在Mac电脑上编辑音乐文件的ID3标签信息&#xff0c;包括艺人、专辑等信息&#xff0c;非常快速和简单方便。Picard是下一代MusicBrainz标记应用程序。 这个新的标签概念是面向专辑的&…...

编程日记 2023/9/3 2:21:22

❤ Uniapp使用

❤ Uniapp使用 一、介绍 uni-app官网&#xff1a;https://uniapp.dcloud.io/api/media/image?idpreviewimage 微信小程序官网&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html 二、使用 1、uniapp 实现图片预览 单图预…...

编程日记 2023/9/3 2:20:19

解密Spring事务生效的内部机制

声明式事务和编程式事务对比&#xff1a; 声明式事务&#xff1a; 使用注解或XML配置的方式&#xff0c;在代码中声明事务的属性和行为。通过AOP和代理模式实现&#xff0c;将事务管理与业务逻辑代码解耦。适用于大多数情况&#xff0c;简化了代码&#xff0c;提高了可维护性和…...

编程日记 2023/9/3 2:19:17

大数据时代下的数据安全防护

随着大数据时代的来临&#xff0c;数据安全防护成为了一个重要的问题。在大数据时代&#xff0c;数据的规模和价值都得到了极大的提升&#xff0c;因此数据安全的重要性也变得越来越突出。本文将从数据加密、访问控制、网络安全和人员管理四个方面来介绍大数据时代下的数据安全…...

编程日记 2023/9/3 2:18:15

RabbitMQ-常用命令

RabbitMQ常用命令 3.1 启动停止rabbitMQ命令 # 前台启动Erlang VM 和 RabbitMQ 当窗口关闭或者ctrlc时&#xff0c;使退出了。 rabbitmq-server# 使用系统命令启动 systemctl start rabbitmq-server# 后台启动 rabbitmq-server -detached# 停止rabbitMQ和Erlang VM rabbitmq-…...

编程日记 2023/9/3 2:17:14

Spring中依赖注入的继承bean的细节问题

介绍 有时我们会对一种类型的bean进行继承&#xff0c;在Spring生成bean的时候&#xff0c;返回类型有时是子类类型&#xff0c;有时会父类类型。那么到底在什么情况下用哪种类型呢&#xff1f;肯定有不少人会忽略这点&#xff0c;本篇文章就是把这个细节讲清楚 案例 父类Ba…...

编程日记 2023/9/3 2:16:12

Augmentoolkit事实数据生成管道：打造精准问答AI的终极方法

Augmentoolkit事实数据生成管道&#xff1a;打造精准问答AI的终极方法 【免费下载链接】augmentoolkit Create Custom LLMs 项目地址: https://gitcode.com/gh_mirrors/au/augmentoolkit 想要创建专属的领域专家AI吗&#xff1f;Augmentoolkit事实数据生成管道为您提供了…...

编程新知 2026/5/21 4:16:33

免费本地语音识别的终极解决方案：3步实现完全离线实时语音转文字

免费本地语音识别的终极解决方案&#xff1a;3步实现完全离线实时语音转文字 【免费下载链接】TMSpeech 腾讯会议摸鱼工具 项目地址: https://gitcode.com/gh_mirrors/tm/TMSpeech 在数字化办公和在线学习日益普及的今天&#xff0c;你是否还在为云端语音识别服务的隐私…...

编程新知 2026/5/21 0:26:18

科研学术篇---文献引用格式

面对五花八门的引用格式&#xff0c;你只需要记住一个核心&#xff1a;不同的学科&#xff0c;就像不同的“方言区”&#xff0c;各自有一套约定俗成的引用“语法”。学会识别和使用它们&#xff0c;是学术写作的基本功。下面通俗地介绍最常见的几种格式&#xff0c;帮你一眼看…...

编程新知 2026/5/21 0:02:04

OpenAI Codex 安装部署指南：从零到跑通，2026最新版

⏱️ 阅读时间&#xff1a;8分钟 | &#x1f4cc; 难度&#xff1a;入门级 | &#x1f527; 适用系统&#xff1a;macOS / Linux / Windows(WSL2) 前言 距离上次写 Codex 测评已经有一段时间了&#xff0c;这期间 Codex 又经历了好几轮大更新&#xff1a;Computer Use 能力、内…...

编程新知 2026/5/20 23:49:38

实在Agent架构实战：彻底化解工厂员工入转调离流程繁琐与HR行政超负荷困局

摘要&#xff1a; 站在2026年这个数字化深水区的节点&#xff0c;制造企业正面临前所未有的管理韧性挑战。工厂员工入转调离流程繁琐已不再仅仅是行政效率问题&#xff0c;而是演变为制约企业规模化扩张与人力成本控制的战略瓶颈。传统数字化手段往往受困于系统烟囱、老旧OA/ER…...

编程新知 2026/5/20 23:25:29

卡尔曼滤波在目标跟踪中的应用：原理、建模与工程调参实战

1. 项目概述&#xff1a;从“猜”到“算”的跟踪艺术在目标跟踪这个领域&#xff0c;无论是自动驾驶中预测前车的轨迹&#xff0c;还是无人机锁定移动的物体&#xff0c;亦或是视频监控里框住一个行走的人&#xff0c;我们核心要解决的都是一个问题&#xff1a;如何在充满噪声和…...

编程新知 2026/5/20 23:20:50

一站式PCBA制造专家：天地通22年如何赋能智能硬件产业？

公司概况与实力证明 深圳市天地通电子有限公司成立于2004年&#xff0c;是22年深耕电子制造的一站式PCBA服务商。公司总部位于深圳市宝安区西乡街道&#xff0c;毗邻宝安机场&#xff0c;并在深圳沙井、惠州、珠海设有生产基地&#xff0c;合计厂房面积超7000平方米&#xff0c…...

编程新知 2026/5/20 22:40:43

保姆级教程：在Ubuntu 22.04上为DCU-Z100（ZiFang）安装ROCm 4.5.2驱动及完整工具链

国产AI加速卡DCU-Z100&#xff08;ZiFang&#xff09;全栈部署指南&#xff1a;从驱动安装到开发环境配置 在人工智能计算领域&#xff0c;国产硬件正逐步崭露头角。DCU-Z100&#xff08;代号ZiFang&#xff09;作为一款自主研发的深度学习计算单元&#xff0c;为开发者提供了全…...

编程新知 2026/5/20 21:04:45

Perplexity体育搜索冷启动难题终结方案：从数据源注册到热点事件自动聚类，全程12分钟极速上线（含CLI脚本）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Perplexity体育新闻搜索 Perplexity 是一款以实时网络检索与精准问答能力见长的 AI 搜索工具&#xff0c;其在体育新闻领域的应用显著区别于传统搜索引擎——它不依赖静态索引&#xff0c;而是动态调用…...

编程新知 2026/5/20 20:48:26

深入PHY芯片：从88E1512的Loopback模式理解千兆以太网PCS/PMA/PMD分层

深入解析88E1512 PHY芯片&#xff1a;用环回模式透视千兆以太网物理层架构 在硬件网络调试的深水区&#xff0c;当常规的软件工具无法定位链路故障时&#xff0c;工程师需要一把能够解剖物理层数据流的"手术刀"。Marvell 88E1512这款高度集成的千兆以太网PHY芯片&…...

编程新知 2026/5/20 20:06:16