鸿蒙Web组件_学习

Web组件概述

Web组件用于在应用程序中显示Web页面内容,为开发者提供页面加载、页面交互、页面调试等能力。

  • 页面加载:Web组件提供基础的前端页面加载的能力,包括加载网络页面、本地页面、Html格式文本数据。
  • 页面交互:Web组件提供丰富的页面交互的方式,包括:设置前端页面深色模式,新窗口中加载页面,位置权限管理,Cookie管理,应用侧使用前端页面JavaScript等能力。
  • 页面调试:Web组件支持使用Devtools工具调试前端页面。

下面通过常见使用场景举例,来具体介绍Web组件功能特性

使用Web组件加载页面

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

加载网络页面 开发者可以在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.comthis.webviewController.loadUrl('www.example1.com');} catch (error) {console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);}})// 组件创建时,加载www.example.comWeb({ src: 'www.example.com', controller: this.webviewController})}}
}

加载本地页面

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

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

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

image.png

应用侧代码

// 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.htmlthis.webviewController.loadUrl($rawfile("local1.html"));} catch (error) {console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);}})// 组件创建时,通过$rawfile加载本地文件local.htmlWeb({ 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.comWeb({ src: 'www.example.com', controller: this.controller })}}
}

最后

本文主要讲解了鸿蒙的Web组件简单介绍和使用,更多的Harmony开发技术可以查看我主页学习更多技术类容。下面附上一份鸿蒙开发学习路线图(略缩图),【详细高清图】可以找我拿一下。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/220997.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1038 统计同成绩学生

本题要求读入 N 名学生的成绩&#xff0c;将获得某一给定分数的学生人数输出。 输入格式&#xff1a; 输入在第 1 行给出不超过 105 的正整数 N&#xff0c;即学生总人数。随后一行给出 N 名学生的百分制整数成绩&#xff0c;中间以空格分隔。最后一行给出要查询的分数个数 K…

LeetCode 2697. 字典序最小回文串

【LetMeFly】2697.字典序最小回文串 力扣题目链接&#xff1a;https://leetcode.cn/problems/lexicographically-smallest-palindrome/ 给你一个由 小写英文字母 组成的字符串 s &#xff0c;你可以对其执行一些操作。在一步操作中&#xff0c;你可以用其他小写英文字母 替换…

产品经理之如何编写竞品分析(医疗HIS系统管理详细案例模板)

目录 一.项目周期 二.竞品分析的目的 三.竞品分析包含的维度 四.如何选择竞品 五.竞品画布 六.案例模板 一.项目周期 在整个项目的周期&#xff0c;产品经理所做的事情主要在项目前期做市场分析、需求调研等&#xff0c;下面一张图概况了整个项目周期产品经理、开发工程师…

成都工业学院2021级操作系统专周课程设计FCFS,SSTF,SCAN,LOOK算法的实现

运行环境 操作系统&#xff1a;Windows 11 家庭版 运行软件&#xff1a;CLion 2023.2.2 源代码文件 #include <iostream> #include <vector> #include <algorithm> #include <random> using namespace std;// 生成随机数 int generateRandomNumber…

工业级以太网交换机的功能介绍

随着互联网技术的迅猛发展&#xff0c;工业以太网在工业通信领域中发挥着重要作用。在整个工业通信行业中&#xff0c;工业以太网交换机作为关键的通信设备&#xff0c;具有非常重要的功能。那么&#xff0c;什么是工业以太网交换机呢&#xff0c;它有哪些功能呢&#xff1f; …

为什么 inline 函数经常使用 static 修饰

内联函数探究 - noinline、always_inline&#xff0c;static inline&#xff0c;内联展开 - 嵌入式C语言自我修养 | 宅学部落 个人理解&#xff1a; 头文件里声明了inline的函数&#xff0c;编译期不一定将其内联展开&#xff0c;而仍将其编译为函数对象&#xff0c;如果不加…

TypeScript 实现扑克数据花色、数值获取和生成

1、TypeScript 实现扑克数据中获取花色和数值的功能的代码 type CardData number;const LOGIC_MASK_COLOR 0xF0; // 花色掩码 const LOGIC_MASK_VALUE 0x0F; // 数值掩码// 获取数值 function GetCardValue(cardData: CardData): number {return cardData & LOGIC_MASK…

栈——OJ题

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、最小栈1、题目讲解2、思路讲解3、代码实现 二、栈的压入、弹出序列1、题目讲解2、思路讲解…

华为交换机——配置策略路由(基于IP地址)示例

一、组网需求&#xff1a; 汇聚层Switch做三层转发设备&#xff0c;接入层设备LSW做用户网关&#xff0c;接入层LSW和汇聚层Switch之间路由可达。汇聚层Switch通过两条链路连接到两个核心路由器上&#xff0c;一条是高速链路&#xff0c;网关为10.1.20.1/24&#xff1b;另外一…

06进程间关系-学习笔记

Orphan Process孤儿进程 父进程先于子进程退出&#xff0c;子进程失去托管&#xff0c;这种子进程统称为孤儿进程 失效进程&#xff08;孤儿进程&#xff09;&#xff1a;导致内存泄漏&#xff0c;影响新进程的创建孤儿进程的危害不可预测&#xff0c;如果一个孤儿进程持续的申…

汽车标定技术(十三)--标定概念再详解

目录 1.概述 2.基于Flash的标定 3.基于RAM的标定 4.AUTOSAR基于指针标定概念

AWS Ubuntu设置DNS解析(解决resolve.conf被覆盖问题)

众所周知&#xff1a; Ubuntu在域名解析时&#xff0c;最直接使用的是/etc/resolve.conf文件&#xff0c;它是/run/systemd/resolve/resolve.conf的软链接&#xff0c;而对于刚装完的ubuntu系统&#xff0c;该文件的内容如下 ubuntuip-172-31-36-184:/etc$ cat resolv.conf #…

【软考】-- 信息系统项目管理师(高级)历年论文题目

考试年度 试题一 试题二 2023年下11.05 资源管理 2023年下11.04 合同管理 2023年下10.29 工作绩效域 2023年下10.28 干系人管理 2023年上 风险管理 2022年下 质量管理 2022年上 干系人管理 2021年上 范围管理 合同管理 2020年下 成本管理 采购管理 2019…

计算机毕业设计 SpringBoot的医院门诊在线挂号系统 Javaweb项目 Java实战项目 前后端分离 文档报告 代码讲解 安装调试

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

D28|买卖股票的最佳时机+跳跃游戏

122.买卖股票的最佳时机 II 初始思路&#xff1a; 这道题解题的时候比较像在找规律&#xff0c;发现只要计算这个过程中的两数之差然后相加即可。 题解复盘&#xff1a; 可以更加清晰的发现如何从题意中获得贪心的思路。 如何贪心&#xff1a;局部最优&#xff1a;收集每天的…

CentOS 7 部署pure-ftp

文章目录 &#xff08;1&#xff09;简介&#xff08;2&#xff09;准备工作&#xff08;3&#xff09;更新系统&#xff08;4&#xff09;安装依赖环境&#xff08;5&#xff09;下载和解压pure-ftp源码包&#xff08;6&#xff09;编译和安装pure-ftp&#xff08;7&#xff0…

01读《物联网安全研究综述:威胁、检测与防御》随笔

01读《物联网安全研究综述&#xff1a;威胁、检测与防御》随笔 摘要3 研究现状3.1 安全威胁3.1.1 云平台访问控制缺陷3.1.2 云平台恶意应用3.1.3 云平台实体和应用交互漏洞3.1.4 通信协议漏洞3.1.5 通信流量侧信道信息泄露3.1.6 设备固件漏洞3.1.7 基于语音信道的攻击3.1.8 基于…

大学老师职称怎么评定

作为一名大学老师&#xff0c;想要在职业生涯中更上一层楼&#xff0c;评定职称是不可避免的一步。那么&#xff0c;如何评定大学老师的职称呢&#xff1f;下面我来给大家分享几点建议。 了解评职称的基本条件。不同高校、不同学科的职称评定条件可能会有所不同&#xff0c;因此…

N通道沟槽电源 场效应管 FMB30H100SL

亿胜盈科FMB30H100SL是一款N通道沟槽电源的场效应管&#xff08;MOS管&#xff09;&#xff0c;FMB30H100SL封装为&#xff1a;TOLL4-6R。

智能优化算法应用:基于树种算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于树种算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于树种算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.树种算法4.实验参数设定5.算法结果6.参考文献7.MA…