【愚公系列】2023年12月 HarmonyOS教学课程 054-Web组件(基本使用和属性)

在这里插入图片描述

🏆 作者简介,愚公搬代码
🏆《头衔》:华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,51CTO博客专家等。
🏆《近期荣誉》:2023年华为云十佳博主,2022年CSDN博客之星TOP2,2022年华为云十佳博主等。
🏆《博客内容》:.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

文章目录

  • 🚀前言
  • 🚀一、Web组件详解
    • 🔎1.概述
    • 🔎2.使用Web组件加载页面
      • 🦋2.1 加载网络页面
      • 🦋2.2 加载本地页面
      • 🦋2.3 加载HTML格式的文本数据
    • 🔎3.设置基本属性和事件
      • 🦋3.1 设置深色模式
      • 🦋3.2 上传文件
      • 🦋3.3 在新窗口中打开页面
      • 🦋3.4 管理位置权限
  • 🚀感谢:给读者的一封信


🚀前言

Web是一种基于互联网的技术和资源的网络服务系统。它是指由许多互连的计算机组成的全球性计算机网络,使用户能够通过浏览器访问和交互式使用各种信息和资源,如网页、文档、图片、视频、音频等。通过Web,用户可以浏览网页、发送电子邮件、参与在线社交网络、进行在线购物等各种活动。Web的核心技术包括超文本传输协议(HTTP),超文本标记语言(HTML)和统一资源定位器(URL)。

🚀一、Web组件详解

🔎1.概述

HarmonyOS中的Web组件是一种基于Web技术的组件,可以在HarmonyOS应用程序中嵌入Web内容。通过使用Web组件,开发人员可以将Web页面或应用程序嵌入到HarmonyOS应用程序中,实现更丰富的用户界面和功能。

Web组件提供了一系列的API和工具,开发人员可以使用这些API和工具来控制和操作内嵌的Web页面。例如,开发人员可以使用JavaScript和CSS来操作和样式化Web页面的元素,还可以使用HTML5的各种功能来实现各种交互和媒体功能。

Web组件还支持与HarmonyOS应用程序的其他部分进行通信和交互。开发人员可以使用JavaScript和HarmonyOS的API来实现应用程序的功能,例如访问设备的传感器、调用系统的功能等。此外,Web组件还可以通过与应用程序的其他组件进行交互来实现更复杂的功能,例如在应用程序的其他组件中显示Web页面的内容、发送和接收消息等。

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

🔎2.使用Web组件加载页面

🦋2.1 加载网络页面

1、权限配置

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET" // 使用网络权限
  }
]

在这里插入图片描述

2、加载网页

import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Button('愚公博客首页')
        .onClick(() => {
          try {
            // 点击按钮时,通过loadUrl,跳转到www.example1.com
            this.controller.loadUrl('blog.csdn.net/aa2528877987');
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      // 组件创建时,加载www.example.com
      Web({ src: 'www.baidu.com', controller: this.controller})
    }
  }
}

在这里插入图片描述
在这里插入图片描述

🦋2.2 加载本地页面

1、ets 文件

// 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 })
    }
  }
}

2、本地页面

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

在这里插入图片描述

🦋2.3 加载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 })
    }
  }
}

在这里插入图片描述

🔎3.设置基本属性和事件

🦋3.1 设置深色模式

通过darkMode()接口可以配置不同的深色模式。

  • WebDarkMode.Off模式表示关闭深色模式。

  • WebDarkMode.On表示开启深色模式,且深色模式跟随前端页面。

  • WebDarkMode.Auto表示开启深色模式,且深色模式跟随系统。

  • forceDarkAccess()接口可将前端页面强制配置深色模式,且深色模式不跟随前端页面和系统。配置该模式时候,需要将深色模式配置成WebDarkMode.On。

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

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State mode: WebDarkMode = WebDarkMode.On;
  @State access: boolean = true;
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .darkMode(this.mode)
        .forceDarkAccess(this.access)
    }
  }
}

在这里插入图片描述

🦋3.2 上传文件

HarmonyOS中Web组件的onShowFileSelector()方法用于显示文件选择器,让用户选择文件。它可以用于在应用中上传文件或选择本地文件等操作。

// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      // 加载本地local.html页面
      Web({ src: $rawfile('local.html'), controller: this.controller })
        .onShowFileSelector((event) => {
            // 开发者设置要上传的文件路径
           let fileList: Array<string> = [
              'xxx/test.png',
           ]
           event.result.handleFileList(fileList)
           return true;
        })
    }
  }
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>

<body>
// 点击文件上传按钮
<input type="file" value="file"></br>
</body>
</html>

在这里插入图片描述

🦋3.3 在新窗口中打开页面

开发者可以使用multiWindowAccess()接口来设置网页是否可以在新窗口中打开。通过调用此接口并传入相应的参数,可以控制网页是否允许使用新窗口。

当网页请求在新窗口中打开时,应用将收到Web组件的新窗口事件,可以通过onWindowNew()接口来处理此事件。在此接口中,开发者可以根据需要创建新的窗口来处理Web组件的窗口请求。

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

//在同一page页有两个web组件。在WebComponent新开窗口时,会跳转到NewWebViewComp。
@CustomDialog
struct NewWebViewComp {
controller?: CustomDialogController
webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
build() {
    Column() {
      Web({ src: "", controller: this.webviewController1 })
        .javaScriptAccess(true)
        .multiWindowAccess(false)
        .onWindowExit(()=> {
          console.info("NewWebViewComp onWindowExit")
          if (this.controller) {
            this.controller.close()
          }
        })
      }
  }
}

@Entry
@Component
struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    dialogController: CustomDialogController | null = null
    build() {
      Column() {
        Web({ src:$rawfile("window.html"), controller: this.controller })
          .javaScriptAccess(true)
         //需要使能multiWindowAccess
          .multiWindowAccess(true)
          .allowWindowOpenMethod(true)
          .onWindowNew((event) => {
          if (this.dialogController) {
            this.dialogController.close()
          }
          let popController:web_webview.WebviewController = new web_webview.WebviewController()
          this.dialogController = new CustomDialogController({
            builder: NewWebViewComp({webviewController1: popController})
          })
          this.dialogController.open()
          //将新窗口对应WebviewController返回给Web内核。
          //如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。
          //若不调用event.handler.setWebController接口,会造成render进程阻塞。
          event.handler.setWebController(popController)
        })
    }
  }
}
 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WindowEvent</title>
</head>
<body>
<input type="button" value="新窗口中打开网页" onclick="OpenNewWindow()">
<script type="text/javascript">
    function OpenNewWindow()
    {
        let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollvars=no");
        openedWindow.document.write("<p>这是我的窗口</p>");
        openedWindow.focus();
    }
</script>
</body>
</html>

🦋3.4 管理位置权限

对于某个网站进行位置权限管理的过程中,开发者可以通过onGeolocationShow()接口来向用户请求位置权限。该接口会触发一个位置权限请求对话框,用户可以选择是否授权该网站获取设备的位置信息。

Web组件会根据用户的选择,将权限授予或拒绝。如果权限被授予,前端页面将能够获取设备的位置信息。如果权限被拒绝,前端页面将无法获取设备的位置信息。

在进行位置权限请求之前,开发者需要在应用的配置文件中添加ohos.permission.LOCATION权限,以确保应用有权限获取设备的位置信息。

<!DOCTYPE html>
<html>
<body>
<p id="locationInfo">位置信息</p>
<button onclick="getLocation()">获取位置</button>
<script>
var locationInfo=document.getElementById("locationInfo");
function getLocation(){
  if (navigator.geolocation) {
    <!-- 前端页面访问设备地理位置 -->
    navigator.geolocation.getCurrentPosition(showPosition);
  }
}
function showPosition(position){
  locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Web({ src:$rawfile('getLocation.html'), controller:this.controller })
        .geolocationAccess(true)
        .onGeolocationShow((event) => {  // 地理位置权限申请通知
          AlertDialog.show({
            title: '位置权限请求',
            message: '是否允许获取位置信息',
            primaryButton: {
              value: 'cancel',
              action: () => {
                event.geolocation.invoke(event.origin, false, false);   // 不允许此站点地理位置权限请求
              }
            },
            secondaryButton: {
              value: 'ok',
              action: () => {
                event.geolocation.invoke(event.origin, true, false);    // 允许此站点地理位置权限请求
              }
            },
            cancel: () => {
              event.geolocation.invoke(event.origin, false, false);   // 不允许此站点地理位置权限请求
            }
          })
        })
    }
  }
}

🚀感谢:给读者的一封信

亲爱的读者,

我在这篇文章中投入了大量的心血和时间,希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验,我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助,我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担,但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章,是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命,也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作,请扫描下面二维码,您的支持将不胜感激。同时,如果您有任何反馈或建议,也欢迎与我分享。

在这里插入图片描述

再次感谢您的阅读和支持!

最诚挚的问候, “愚公搬代码”

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【python】使用fitz包读取PDF文件报错“ModuleNotFoundError: No module named ‘frontend‘”

【python】使用fitz包读取PDF文件报错“ModuleNotFoundError: No module named ‘frontend’” 正确解决过程 在读取PDF文件时&#xff0c;我使用了fitz包&#xff0c;当使用代码import fitz导入该包时&#xff0c;出现了报错&#xff1a; 于是我直接使用以下代码安装fronten…

Vmware安装windowsServer2022版本

虚拟机配置 文件->新建虚拟机 典型安装与自定义安装 典型安装&#xff1a;VMware会将主流的配置应用在虚拟机的操作系统上&#xff0c;对于新手来很友好。 自定义安装&#xff1a;自定义安装可以针对性的把一些资源加强&#xff0c;把不需要的资源移除。避免资源的浪费。…

二叉树的直径,力扣

目录 题目地址&#xff1a; 题目&#xff1a; 我们直接看题解吧&#xff1a; 审题目事例提示&#xff1a; 解题方法&#xff1a; 难度分析&#xff1a; 解题方法分析&#xff1a; 解题分析&#xff1a; 补充说明&#xff1a; 代码优化&#xff1a; 题目地址&#xff1a; 543. 二…

设计模式的艺术P1基础—2.2 类与类的UML图示

设计模式的艺术P1基础—2.2 类与类的UML图示 在UML 2.0的13种图形中&#xff0c;类图是使用频率最高的两种UML图之一&#xff08;另一种是用于需求建模的用例图&#xff09;&#xff0c;它用于描述系统中所包含的类以及它们之间的相互关系&#xff0c;帮助人们简化对系统的理解…

指针传参误区

C语言中指针作为形参传递时&#xff0c;func&#xff08;*a, *b&#xff09; 这种形式的话&#xff0c;是无法通过简单的 ab来修改的&#xff0c;在函数体内a的地址确实被修改成b的地址了&#xff0c;但是当函数执行结束时&#xff0c;a的地址会重新回到原本的地址里面&#xf…

Mac安装upx及不同os计算md5值

Mac安装upx 最近需要将exe文件打包到pod内部&#xff0c;为了减少包占用磁盘空间&#xff0c;需要借用upx对windows exe文件进行压缩。 1 概念&#xff1a;压缩工具 UPX 全称是 “Ultimate Packer for eXecutables”&#xff0c;是一个免费、开源、编写、可扩展、高性能的可执行…

【C语言】编程世界的不朽基石与未来展望

C语言&#xff0c;一种经久不衰的高级编程语言&#xff0c;自1972年由Dennis Ritchie在AT&T贝尔实验室开发以来&#xff0c;已深深扎根于编程语言的发展历程中。它既是计算机科学史上的一个重要里程碑&#xff0c;也是现代软件开发的核心支柱。从操作系统到嵌入式系统的构建…

设计模式的艺术P1基础—第1章 概述

刘伟&#xff0c;2020 概述&#xff1a;4部分&#xff0c;26章。 P1:基础&#xff08;1-2章&#xff09; P2:创建型设计模式&#xff08;创建艺术&#xff0c;3-8章&#xff09; P3:结构型设计模式&#xff08;组合艺术&#xff0c;9-15章&#xff09; P4:行为型设计模式&…

基于Python的车牌识别系统实现

本文将以基于Python的车牌识别系统实现为方向,介绍车牌识别技术的基本原理、常用算法和方法,并详细讲解如何利用Python语言实现一个完整的车牌识别系统。 精彩专栏持续更新推荐订阅,收藏关注不迷路 微信小程序实战开发专栏 目录 引言车牌识别技术的应用场景Python在车牌识别…

从零学Java - String类

Java String类 文章目录 Java String类1 String1.1 常用两种创建方式1.2 比较两种创建方式1.3 字符串不可变性1.4 面试题 2 常用方法2.1 练习 3 可变字符串3.1 常用方法3.2 验证StringBuilder的高效性3.3 练习3.4 面试题: 4 正则表达式4.1 元字符4.2 其他字符4.2.1 预定义字符4…

MLP(多层感知机) 虚战1

使用Keras实现MLP 前两节地址&#xff1a; CSDNmatplotlib 虚战1-CSDN博客 &#xff08;数据的获取在这有说明&#xff09; 数据预处理 虚战1-CSDN博客CSDN 数据预处理的最后一步&#xff1a;将数据集分为 训练数据集、测试数据集和校验数据集。 训练数据集&#xff1a…

C++学习笔记——友元及重载运算符

目录 一、友元 1.1声明友元函数 1.2声明友元类 二、运算符重载 2.1重载加号运算符 2.2重载流插入运算符 三、一个简单的银行管理系统 四、 详细的介绍 一、友元 在 C 中&#xff0c;友元是一个函数或类&#xff0c;它可以访问另一个类的私有成员或保护成员。通常情况下…

RT-Thread 线程管理

线程管理 在日常生活中&#xff0c;我们要完成一个大任务&#xff0c;一般会将它分解成多个简单、容易解决的小问题&#xff0c;小问题逐个被解决&#xff0c;大问题也就随之解决了。 在多线程操作系统中&#xff0c;也同样需要开发人员把一个复杂的应用分解成多个小的、可调…

k8s--集群调度(kube-scheduler)

了解kube-scheduler 由之前博客可知kube-scheduler是k8s中master的核心组件之一 scheduler&#xff1a;负责调度资源。把pod调度到node节点。他有两种策略&#xff1a; 预算策略&#xff1a;人为部署&#xff0c;指定node节点去部署新建的pod 优先策略&#xff1a;通过算法选…

FineBI实战项目一(11):每日不同商品分类订单个数统计

1 明确数据分析目标 统计所有订单中的每种分类对应的商品的个数&#xff0c;构建词云图 2 创建用于保存数据分析结果的表 create table app_cat_cnt(id int primary key auto_increment,daystr varchar(20),catName varchar(100),cnt int ); 3 编写SQL语句进行数据分析 se…

亲测有效:腾讯云免费服务器30天申请流程

腾讯云免费服务器申请入口 https://curl.qcloud.com/FJhqoVDP 免费服务器可选轻量应用服务器和云服务器CVM&#xff0c;轻量配置可选2核2G3M、2核8G7M和4核8G12M&#xff0c;CVM云服务器可选2核2G3M和2核4G3M配置&#xff0c;腾讯云百科txybk.com分享2024年最新腾讯云免费服务器…

「MCU」SD NAND芯片之国产新选择优秀

文章目录 前言 传统SD卡和可贴片SD卡 传统SD卡 可贴片SD卡 实际使用 总结 前言 随着目前时代的快速发展&#xff0c;即使是使用MCU的项目上也经常有大数据存储的需求。可以看到经常有小伙伴这样提问&#xff1a; 大家好&#xff0c;请问有没有SD卡芯片&#xff0c;可以…

程序员必备的面试技巧

程序员必备的面试技巧 程序员必备的面试技巧&#xff0c;就像是编写一段完美的代码一样重要。在面试战场上&#xff0c;我们需要像忍者一样灵活&#xff0c;像侦探一样聪明&#xff0c;还要像无敌铁金刚一样坚定。只有掌握了这些技巧&#xff0c;我们才能在面试的舞台上闪耀光…

C# .Net学习笔记—— 异步和多线程(Task)

一、概念 Task是DotNet3.0之后所推出的一种新的使用多线程的方式&#xff0c;它是基于ThreadPool线程进行封装的。 二、使用多线程的时机 任务能够并发运行的时候&#xff0c;提升速度&#xff1b;优化体验 三、基本使用方法 private void button5_Click(object sender, Ev…

猫头虎分享已解决Bug || Go Error: cannot use str (type string) as type int in assignment

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通Golang》…