Web组件的使用

文章目录

  • 1 概述
  • 2 加载网页
    • 加载在线网页
    • 加载本地网页
  • 3 网页缩放
    • 文本缩放
  • 4 Web组件事件
    • Web组件处理JS confirm事件
  • 5 Web和JavaScript交互
    • 启用JavaScript
    • Web组件调用JS方法
    • JS调用Web组件方法
  • 6 处理页面导航
  • 7 调试网络应用
  • 8 参考链接

1 概述

相信大家都遇到过这样的场景,有时候我们点击应用的页面,会跳转到一个类似浏览器加载的页面,加载完成后,才显示这个页面的具体内容,这个加载和显示网页的过程通常都是浏览器的任务。

ArkUI为我们提供了Web组件来加载网页,借助它我们就相当于在自己的应用程序里嵌入一个浏览器,从而非常轻松地展示各种各样的网页。

img

本文将为您介绍Web组件一些常用API的使用。

2 加载网页

加载在线网页

Web组件的使用非常简单,只需要在Page目录下的ArkTS文件中创建一个Web组件,传入两个参数就可以了。其中src指定引用的网页路径,controller为组件的控制器,通过controller绑定Web组件,用于实现对Web组件的控制。

// xxx.ets
@Entry
@Component
struct WebComponent {controller: WebController = new WebController();build() {Column() {Web({ src: 'https://developer.harmonyos.com/', controller: this.controller })}}
}

代码运行效果图如下:

img

访问在线网页时您需要在module.json5文件中申明网络访问权限:ohos.permission.INTERNET。

{"module" : {"requestPermissions":[{"name": "ohos.permission.INTERNET"}]}
}

加载本地网页

前面实现了Web组件加载在线网页,Web组件同样也可以加载本地网页。首先在main/resources/rawfile目录下创建一个HTML文件,然后通过$rawfile引用本地网页资源,示例代码如下:

// xxx.ets
@Entry
@Component
struct SecondPage {controller: WebController = new WebController();build() {Column() {Web({ src: $rawfile('index.html'), controller: this.controller })}}
}
// xxx.html

代码运行效果图如下:

img

为了方便开发者学习,后面用到的HTML都是以文件的形式放到rawfile目录下,加载本地网页。

3 网页缩放

有的网页可能不能很好适配手机屏幕,需要对其缩放才能有更好的效果,开发者可以根据需要给Web组件设置zoomAccess属性,zoomAccess用于设置是否支持手势进行缩放,默认允许执行缩放。Web组件默认支持手势进行缩放。

Web({ src:'www.example.com', controller:this.controller }).zoomAccess(true)

您还可以使用zoom(factor: number)方法用于设置网站的缩放比例。其中factor表示缩放倍数,下面示例,当点击一次按钮时,页面放大为原来的1.5倍。

// xxx.ets
@Entry
@Component
struct WebComponent {controller: WebController = new WebController();factor: number = 1.5;build() {Column() {Button('zoom').onClick(() => {this.controller.zoom(this.factor);})Web({ src: 'www.example.com', controller: this.controller })}}
}

img

需要注意的是只有网页自身支持缩放,才能在Web组件里面进行缩放。

文本缩放

如果需要对文本进行缩放,可以使用textZoomAtio(textZoomAtio: number)方法。其中textZoomAtio用于设置页面的文本缩放百分比,默认值为100,表示100%,以下示例代码将文本放大为原来的1.5倍。

Web({ src:'www.example.com', controller:this.controller }).textZoomAtio(150)

效果图如下:

img

从上面的效果图可以看出使用textZoomAtio,文本会放大,但是图片不会随着文本一起放大。

4 Web组件事件

Web组件还提供了处理Javascript的对话框、网页加载进度及各种通知与请求事件的方法。例如onProgressChange可以监听网页的加载进度,onPageEnd在网页加载完成时触发该回调,且只在主frame触发,onConfirm则在网页触发confirm告警弹窗时触发回调。下面以onConfirm事件为例讲解Web组件事件的使用,更多Web组件事件可以查看事件。

Web组件处理JS confirm事件

如果您希望响应Web组件中网页的警告弹窗事件,您可以在onAlert或者onConfirm的回调方法中处理这些事件。以confirm弹窗为例,在网页触发onConfirm()告警弹窗时,显示一个AlertDialog弹窗。

// xxx.ets
@Entry
@Component
struct WebComponent {controller:WebController = new WebController();build() {Column() {Web({ src:$rawfile('index.html'), controller:this.controller }).onConfirm((event) => {AlertDialog.show({title: 'title',message: event.message,confirm: {value: 'onAlert',action: () => {event.result.handleConfirm();}},cancel: () => {event.result.handleCancel();}})return true;})}}
}

当onConfirm回调返回false时,触发默认弹窗。当回调返回true时,系统应用可以调用系统弹窗能力(包括确认和取消),并且需要根据用户的确认或取消操作调用JsResult通知Web组件。

在rawfile目录下创建如下HTML文件:

效果图如下:

img

5 Web和JavaScript交互

在开发专为适配Web组件的网页时,您可以实现Web组件和JavaScript代码之间的交互。Web组件可以调用JavaScript方法,JavaScript也可以调用Web组件里面的方法。

启用JavaScript

如果您希望加载的网页在Web组件中运行JavaScript,则必须为您的Web组件启用JavaScript功能,默认情况下是允许JavaScript执行的。

Web({ src:'https://www.example.com', controller:this.controller }).javaScriptAccess(true)

Web组件调用JS方法

您可以在Web组件onPageEnd事件中添加runJavaScript方法。事件是网页加载完成时的回调,runJavaScript方法可以执行HTML中的JavaScript脚本。

// xxx.ets
@Entry
@Component
struct WebComponent {controller: WebController = new WebController();@State webResult: string = ''build() {Column() {Text(this.webResult).fontSize(20)Web({ src: $rawfile('index.html'), controller: this.controller }).javaScriptAccess(true).onPageEnd(e => {this.controller.runJavaScript({script: 'test()',callback: (result: string)=> {this.webResult = result;}});})}}
}

当页面加载完成时,触发onPageEnd事件,调用HTML文件中的test方法并将结果返回给Web组件。

JS调用Web组件方法

您可以使用registerJavaScriptProxy将Web组件中的JavaScript对象注入到window对象中,这样网页中的JS就可以直接调用该对象了。需要注意的是,要想registerJavaScriptProxy方法生效,须调用refresh方法。下面的示例将ets文件中的对象testObj注入到了window对象中。

// xxx.ets
@Entry
@Component
struct WebComponent{@State dataFromHtml: string = ''controller: WebController = new WebController()testObj = {test: (data) => {this.dataFromHtml = data;return 'ArkUI Web Component';},toString: () => {console.log('Web Component toString');}}build() {Column() {Text(this.dataFromHtml).fontSize(20)Row() {Button('Register JavaScript To Window').onClick(() => {this.controller.registerJavaScriptProxy({object: this.testObj,name: 'objName',methodList: ['test', 'toString'],});this.controller.refresh();})}Web({ src: $rawfile('index.html'), controller: this.controller }).javaScriptAccess(true)}}
}

其中object表示参与注册的对象,name表示注册对象的名称为objName,与window中调用的对象名一致;methodList表示参与注册的应用侧JavaScript对象的方法,包含test、toString两个方法。在HTML中使用的时候直接使用objName调用methodList里面对应的方法即可,示例如下:

// index.html调用Web组件里面的方法

您还可以使用deleteJavaScriptRegister删除通过registerJavaScriptProxy注册到window上的指定name的应用侧JavaScript对象。

6 处理页面导航

当我们在使用浏览器浏览网页时,可以执行返回、前进、刷新等操作,Web组件同样支持这些操作。您可以使用backward()返回到上一个页面,使用forward()前进一个页面,您也可以使用refresh()刷新页面,使用clearHistory()来清除历史记录。下面通过一个简单的”浏览器”示例呈现这些功能。

// xxx.ets
@Entry
@Component
struct Page5 {controller: WebController = new WebController();build() {Column() {Row() {Button("前进").onClick(() => {this.controller.forward();})Button("后退").onClick(() => {this.controller.backward();})Button("刷新").onClick(() => {this.controller.refresh();})Button("停止").onClick(() => {this.controller.stop();})Button("清除历史").onClick(() => {this.controller.clearHistory();})}.padding(12).backgroundColor(Color.Gray).width('100%')Web({ src: 'https://developer.harmonyos.com/', controller: this.controller })}.height('100%')}
}

您可以使用accessBackward()来检查当前页面是否有后退来时记录,如果有则该方法返回 true。同样,您可以使用 accessForward()来检查是否存在前进历史记录。

7 调试网络应用

您可以使用onConsole获取网页输出的调试日志信息,当你在你的网页中使用console打印日志时,HarmonyOS系统都会调用相应的onConsole方法,这样你就可以获取到网页日志信息了。下面展示了如何在Web组件中使用onConsole输出网页中的日志:

// xxx.ets
@Entry
@Component
struct WebComponent {controller: WebController = new WebController();build() {Column() {Web({ src: $rawfile('index.html'), controller: this.controller }).onConsole((event) => {console.log('getMessage:' + event.message.getMessage());console.log('getMessageLevel:' + event.message.getMessageLevel());return false;})}}
}
// index.html

event的内容为ConsoleMessage,它包括一个对象来表示正在传递的日志信息的MessageLevel类型。您可以使用getMessageLevel()查询消息级别以确定消息的严重性,然后根据自身业务采取相应的操作。上面的示例代码,会打印如下所示的 日志消息:

08-27 19:47:27.476 27869-27937/com.example.webtest D 03B00/JSApp:  app Log: getMessage:info message
08-27 19:47:27.476 27869-27937/com.example.webtest D 03B00/JSApp:  app Log: getMessageLevel:3
08-27 19:47:27.478 27869-27937/com.example.webtest D 03B00/JSApp:  app Log: getMessage:error message
08-27 19:47:27.478 27869-27937/com.example.webtest D 03B00/JSApp:  app Log: getMessageLevel:1

8 参考链接

  1. Web组件的相关API参考:Web组件。
  2. 应用权限参考:访问控制。

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

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

相关文章

Mixtral Moe代码解读

一直对稀疏专家网络好奇,有些专家没被选中,那么梯度是否为0,这一轮被选中有梯度,下一轮没被选中无梯度,模型可以训练收敛吗? 由于每个token都会选择topk个专家,所以在每一轮epoch中,…

python工具-udp-tcp-client-server-demo

python工具-udp-tcp-client-server-demo server tcp-server: python xxx.py -type tcp -ip “127.0.0.1” -port 1234udp-server: python xxx.py -type udp -ip “127.0.0.1” -port 1234 client python xxx.py -type udp -ip “127.0.0.1” -port 1111python xxx.py -type tc…

依赖Kafka的Go单元测试例解

Kafka[1]是Apache基金会开源的一个分布式事件流处理平台,是Java阵营(最初为Scala)中的一款杀手级应用,其提供的高可靠性、高吞吐量和低延迟的数据传输能力,让其到目前为止依旧是现代企业级应用系统以及云原生应用系统中使用的重要中间件。 在…

pytorch无法把共享内存写入文件

环境: 在容器中跑pytorch模型的训练 问题表现: ERROR: Unexpected bus error encountered in worker. This might be caused by insufficient shared memory (shm). Traceback (most recent call last): File "/root/anaconda3/lib/python3.8/m…

flutter getTemporaryDirectory()的使用

下面是上传音视频流的截图,先保存在缓存,然后请求接口,成功或者失败会删除文件。 可以在Device File Explorer查看, Android: 会返回 /data/data//cache 这个目录,是应用私有的缓存目录。 iOS: 会返回 Library/Caches 下的一个…

Java学习笔记-day06-响应式编程Reactor API大全(上)

Reactor 是一个基于响应式编程的库&#xff0c;主要用于构建异步和事件驱动的应用程序。Reactor 提供了丰富的 API&#xff0c;包括创建、转换、过滤、组合等操作符&#xff0c;用于处理异步数据流。以下是一些 Reactor 的主要 API 示例&#xff1a; pom依赖 <dependencyMan…

191. 位1的个数

编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&#xff09;&#xff0c;返回其二进制表达式中数字位数为 1 的个数&#xff08;也被称为汉明重量&#xff09;。 提示&#xff1a; 请注意&#xff0c;在某些语言&#xff08;如 Java&#xff09;中…

LeetCode 2645. 构造有效字符串的最少插入数

一、题目 1、题目描述 LeetCode 给你一个字符串 word &#xff0c;你可以向其中任何位置插入 "a"、"b" 或 "c" 任意次&#xff0c;返回使 word 有效 需要插入的最少字母数。如果2645. 构造有效字符串的最少插入数 2、接口描述 ​ class Solut…

SpringCloud微服务 【实用篇】| RabbitMQ快速入门、SpringAMQP

目录 一&#xff1a;初始RabbitMQ 1. 同步和异步通讯 1.1 同步调用 1.2 异步调用 2. MQ常见框架 二&#xff1a;RabbitMQ快速入门 1. RabbitMQ概述和安装 2. 常见消息队列模型 3. 快速入门案例 三&#xff1a;SpringAMQP 1. Basic Queue 简单队列模型 2. Work Queu…

Hive事务表转换为非事务表

环境&#xff1a;hive3.1.0 由于建表时默认会建为非事务表 CREATE TABLE bucket_text_table2(column1 string,column2 string,column3 int) CLUSTERED BY (column3) into 5 BUCKETS STORED AS TEXTFILE; 执行完成后&#xff0c;查看默认建表语句&#xff1a; ---------------…

PHP 微信小程序获取 手机号码

PHP代码 $param $_POST; $app_id ""; $app_secret "";$url_get https://api.weixin.qq.com/cgi-bin/token?grant_typeclient_credential&appid . $app_id . &secret . $app_secret;$tmptoken json_decode(curl($url_get), true);$token $tm…

ORACLE RAC DG文件路径错乱解决办法

最近接手了一个客户的RAC-RAC dg环境的维护,登录上去之后发现dg延迟了8天,由于主库的空间非常紧张,归档日志早就删除了,所以准备使用rman基于scn点的备份恢复的方案恢复dg同步 在备份完成之后,使用新的控制文件进行数据恢复的时候报错datafile 43 not found: 检查了一下发现当…

SpringBoot中使用单例模式+ScheduledExecutorService实现异步多线程任务(若依源码学习)

场景 若依前后端分离版手把手教你本地搭建环境并运行项目&#xff1a; 若依前后端分离版手把手教你本地搭建环境并运行项目_本地运行若依前后端分离-CSDN博客 设计模式-单例模式-饿汉式单例模式、懒汉式单例模式、静态内部类在Java中的使用示例&#xff1a; 设计模式-单例模…

数据库 MySQL 索引的原理

在数据库中&#xff0c;索引是一种重要的数据结构&#xff0c;它用于加快数据的检索速度和提高查询性能。在 MySQL 中&#xff0c;索引的实现基于 B树结构。 索引的基本思想是通过维护一个有序的数据结构&#xff0c;来快速定位和访问表中的数据。B树是一种自平衡的二叉搜索树…

Python requirements.txt 详解

文章目录 1 概述1.1 作用1.2 注意 2 操作2.1 生成 requirements.txt2.2 安装 requirements.txt 3 示例3.1 新建 Django 项目3.2 找到 Scripts 目录&#xff0c;执行生成 requirements.txt 命令 1 概述 1.1 作用 作用&#xff1a;记录 当前项目下 所有 依赖包及其版本号&#…

Polars使用指南(一)

pandas是Python数据处理中非常经典的一个科学计算库&#xff0c;表形式的数据结构、丰富的API和灵活的编程语法使得pandas成为最常用的的数据分析工具。但是pandas也有一个最致命的缺陷&#xff0c;就是效率问题&#xff0c;尤其是不支持并行计算。pandas2在性能方面有了极大的…

不知道题目是啥

本题是学校的集训里的题&#xff0c;所有不知道题目名字是啥&#xff0c;直接看题目就好 解题思路&#xff1a;因为字符串只含有小写字母&#xff0c;所以可以创建两个数组分别来存s和t的每个字母出现次数&#xff0c;然后遍历数组&#xff0c;如果s字符串中的某个字母比t的小&…

输电线路分布式故障诊断装置的四大特点介绍-深圳鼎信

输电线路分布式故障诊断装置是一种利用行波测距、无线通信等技术手段实现电网故障定位的设备。这对于电网的故障处理和恢复具有重要意义&#xff0c;可以帮助运维人员提高故障处理的效率&#xff0c;缩短故障处理时间&#xff0c;减少停电时间&#xff0c;提高用户的供电可靠性…

premiere简约大气3D动画logo片头Pr模板Mogrt免费下载

Premiere简约大气3D动画logo片头pr模板mogrt下载&#xff0c;无需插件&#xff0c;高清分辨率&#xff0c;易于自定义&#xff0c;包括教程&#xff0c;不包括音频和图像。免费下载&#xff1a;https://prmuban.com/37065.html

Linux学习(1):目录结构、编辑器和用户管理

Linux学习&#xff08;1&#xff09;&#xff1a;目录结构、编辑器和用户管理 1 Linux目录结构2 vi和vim编辑器2.1 快捷键练习 3 用户管理3.1 添加用户3.2 删除用户即主目录3.3 切换用户 4 用户组 1 Linux目录结构 在linux世界里&#xff0c;一切皆为文件。 linux目录结构&a…