HarmonyOS4.0系统性深入开发38Web组件概述

Web组件概述

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

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

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

Web组件概述

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

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

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

设置深色模式

Web组件支持对前端页面进行深色模式配置。

  • 通过

    darkMode()

    接口可以配置不同的深色模式,

    WebDarkMode.Off

    模式表示关闭深色模式。

    WebDarkMode.On

    表示开启深色模式,并且深色模式跟随前端页面。

    WebDarkMode.Auto

    表示开启深色模式,并且深色模式跟随系统。

    在下面的示例中, 通过darkMode()接口将页面深色模式配置为跟随系统。

    // 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.Auto;build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).darkMode(this.mode)}}
    }
    
  • 通过

    forceDarkAccess()

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

    在下面的示例中, 通过forceDarkAccess()接口将页面强制配置为深色模式。

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

上传文件

Web组件支持前端页面选择文件上传功能,应用开发者可以使用onShowFileSelector()接口来处理前端页面文件上传的请求。

下面的示例中,当用户在前端页面点击文件上传按钮,应用侧在onShowFileSelector()接口中收到文件上传请求,在此接口中开发者将上传的本地文件路径设置给前端页面。

管理位置权限

Web组件提供位置权限管理能力。开发者可以通过onGeolocationShow()接口对某个网站进行位置权限管理。Web组件根据接口响应结果,决定是否赋予前端页面权限。获取设备位置,需要开发者配置ohos.permission.LOCATION权限。

在下面的示例中,用户点击前端页面"获取位置"按钮,Web组件通过弹窗的形式通知应用侧位置权限请求消息,示例代码如下:

  • 前端页面代码。

    <!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>
    
  • 应用代码。

    <!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>
    

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

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

相关文章

【自然语言处理三-自注意self attention】

自然语言处理三-自注意力 self attention 自注意力是什么&#xff1f;自注意力模型出现的原因是什么&#xff1f;词性标注问题解决方法1-扩展window&#xff0c;引用上下文解决方法2-运用seq2seq架构新问题来了&#xff1a;参数量增加、无法并行的顽疾 自注意力self attention模…

嵌入式学习第二十一天!(线程)

线程&#xff1a; 1. 基本概念&#xff1a; 线程&#xff1a;线程是一个轻量级的进程&#xff0c;位于进程空间内部&#xff0c;一个进程中可以创建多个线程 2. 线程创建&#xff1a; 线程独占栈空间&#xff0c;文本段、数据段和堆区与进程共享 3. 线程调度&#xff1a; 与进程…

攻防世界MISC-神秘的交易

题目&#xff1a;--宝贝儿约吗~ --约~老地方吗 --嗯呐~等你哦 --上次送你的那张会员卡&#xff0c;我是用我们的门牌号的密码&#xff0c;爱你 --晚上等我&#xff01; 惊了&#xff01;怪不得柠檬师傅最近总往北街跑。看他午休的时候&#xff0c;我悄悄拿走了他的会员卡&#…

Netty NIO 非阻塞模式2(完善)

1.概要 1.1 说明 Netty NIO 非阻塞模式-CSDN博客 真对上面的问题&#xff0c;做些修正。主要解决如下问题。当客户端关闭或者强制关闭的时候&#xff0c;服务端关闭对应的SelectionKey。这样可以避免因异常退出&#xff0c;和不断的重复读取数据。 1.1.1客户端强制退出&…

变大再变大,matplotlib坐标轴刻度设置

文章目录 对数坐标系自定义映射对数图表重置刻度 matplotlib教程&#xff1a;初步&#x1f4c8;子图绘制&#x1f4c8;坐标投影 matplotlib支持重设坐标轴刻度&#xff0c;包括刻度值的重新映射和刻度标签的重新映射。前者可以调整坐标刻度的缩放比例&#xff0c;后者可以更改…

python基础-1

目录 print获取输出 input获取输入 python的基本数据类型 数字、字符串、列表 数字&#xff08;Number&#xff09; 字符串&#xff08;String&#xff09; 列表&#xff08;List&#xff09; 元组、集合、字典 元组&#xff08;Tuple&#xff09; 集合&#xff08;Se…

基于springboot实现的海鲜销售系统

一、系统架构 前端&#xff1a;html | bootstrap | vue | js | css 后端&#xff1a;springboot | springdata-jpa 环境&#xff1a;jdk1.8 | mysql | maven | redis 二、代码及数据库 三、功能介绍 01. web端-注册 02. web端-登录 03. web端-首页 04. web端-…

【MyBatis-Plus】之queryWrapper.apply用法

目录 一、queryWrapper.apply的含义及其用法 二、其他方法 三、注意事项 官网地址&#xff1a;MyBatis-Plus https://baomidou.com/ 一、queryWrapper.apply的含义及其用法 QueryWrapper.apply() 是 MyBatis-Plus 提供的方法&#xff0c;用于构建动态 SQL 查询条件。它允许…

Gateway网关实战

目录 什么是API网关&#xff1f; 网关为什么出现&#xff1f; 什么是Spring Cloud Gateway&#xff1f; 核心概念 Spring Cloud Gateway实战 路由断言工厂&#xff08;Route Predicate Factories&#xff09;配置 路径匹配 Header匹配 过滤器工厂&#xff08; Gateway…

【kubernetes】二进制部署k8s集群之cni网络插件flannel和calico工作原理

k8s集群的三种接口 k8s集群有三大接口&#xff1a; CRI&#xff1a;容器进行时接口&#xff0c;连接容器引擎--docker、containerd、cri-o、podman CNI&#xff1a;容器网络接口&#xff0c;用于连接网络插件如&#xff1a;flannel、calico、cilium CSI&#xff1a;容器存储…

NVIDIA\CUDA\cudnn安装以及visual studio2022编译安装ceres2.2.0库

一、NVIDIA驱动安装 网址:官方驱动 | NVIDIA 因为本文之后需要visual studio2022进行编译&#xff0c;所以在安装NVIDIA\CUDA\cudnn之前你先得安装visual studio2022 点击NVIDIA控制面板&#xff0c;NVIDIA Control Panel 查看产品家族 根据产品家族选择驱动&#xff0c;点…

[算法沉淀记录] 排序算法 —— 选择排序

排序算法 —— 选择排序 基本概念 选择排序是一种简单的排序算法&#xff0c;它的工作原理是每次从待排序的列表中选择最小&#xff08;或最大&#xff09;的元素&#xff0c;将其与列表中的第一个位置交换&#xff0c;然后继续对剩余的元素进行排序&#xff0c;直到整个列表…

基于Java SSM框架实现家庭食谱管理系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现家庭食谱管理系统演示 摘要 本论文主要论述了如何使用JAVA语言开发一个家庭食谱管理系统 &#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论…

【Git】window下大小写不敏感问题处理

在Windows环境下&#xff0c;Git因为文件名的大小写敏感性而导致了一些问题。 首先&#xff0c;Windows文件系统是不区分大小写的&#xff0c;这意味着在Windows中创建的两个文件名只有大小写不同&#xff0c;但字母顺序和字符完全相同的文件会被视为相同的文件。然而&#xf…

省内顺丰寄一台电脑多少钱,顺丰不会乱丢包裹

省内用顺丰快递寄电脑要多少钱&#xff1f; 使用顺丰速运。 顺丰快递不会乱扔包裹。 根据地区不同&#xff0c;邮费预计在120至150元左右。 有些地方顺丰不允许寄电脑&#xff0c;因为电脑特别容易损坏。 一般来说&#xff0c;您需要自己做。 有的顺丰还帮忙在电脑主机的外箱上…

喜报|迪捷软件入选工信部“2023年信息技术应用创新解决方案”

为进一步推进信创生态建设&#xff0c;激发产业自主创新活力&#xff0c;高效促进供需协同发展&#xff0c;加强区域联动和资源整合&#xff0c;国家工业和信息化部网络安全产业发展中心&#xff08;工业和信息化部信息中心&#xff09;联合相关单位&#xff0c;遴选了一批可复…

2024年江苏事业单位招聘报名指南

江苏事业单位目前已出的公告中&#xff0c;扬州和常州的报名时间相对较早&#xff0c;2月27日就开始报名了&#xff1b;其他大多在2月28日或3月1日起开始报名。 报名请移步<江苏人事考试网> 【报名时间】 2月28日9:00-3月4日16:00#图文万粉激励计划# 【资格初审】2月28…

招聘系统架构的设计与实现

在当今竞争激烈的人才市场中&#xff0c;有效的招聘系统对企业吸引、筛选和管理人才至关重要。本文将探讨招聘系统的架构设计与实现&#xff0c;帮助企业构建一个高效、可靠的人才招聘平台。 ## 1. 系统架构设计 ### 1.1 微服务架构 招聘系统通常采用微服务架构&#xff0c;将…

提高办公效率:Excel在文秘与行政办公中的应用技巧

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 在当今信息化时代&#xff0c;Excel作为一款常…

C# 经典:ref 和 out 的区别详解

在C#中&#xff0c;ref和out关键字用于按引用传递变量&#xff0c;它们在变量传递、输出参数、返回值以及异常处理等方面有一些重要区别。本文将详细阐述这些差异。 1. 变量传递 ref和out关键字都可以用于方法的参数传递。它们的主要区别在于如何处理变量的引用。 ref关键字…