HarmonyOS4.0从零开始的开发教程14Web组件的使用

news2024/12/26 22:20:48

HarmonyOS（十二）Web组件的使用

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <img src="pad.jpg">
</body>
</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文件：

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
</body>
<script type="text/javascript">
   confirm("confirm message from html")
</script>
</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;
          }});
      })
    }
  }
}
<!-- index.html -->
<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <body>
  </body>
  <script type="text/javascript">
  function test() {
      return "This value is from index.html"
  }
  </script>
</html>

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

JS调用Web组件方法

您可以使用registerJavaScriptProxy将Web组件中的JavaScript对象注入daowindow对象中，这样网页中的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
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<button onclick="htmlTest()">调用Web组件里面的方法</button>
</body>
<script type="text/javascript">
    function htmlTest() {
        str = objName.test("param from Html");
    }
</script>
</html>

您还可以使用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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
</body>
<script type="text/javascript">
    console.info('info message');
    console.error('error message');
</script>
</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.coloradmin.cn/o/1306923.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据库——安全性

数据库——安全性

智能2112杨阳 一、目的与要求&#xff1a; 1、设计用户子模式 2、根据实际需要创建用户角色及用户&#xff0c;并授权 3、针对不同级别的用户定义不同的视图&#xff0c;以保证系统的安全性 二、内容&#xff1a; 先创建四类用户角色&#xff1a; 管理员角色Cusm、客户角…
阅读更多...
YashanDB亮相2023年深圳市高校教育信息化学会学术年会，加码高校数字基座建设

YashanDB亮相2023年深圳市高校教育信息化学会学术年会，加码高校数字基座建设

12月3日&#xff0c;“2023年深圳市高校教育信息化学会学术年会”在深圳顺利召开。深圳计算科学研究院&#xff08;简称&#xff1a;深算院&#xff09;YashanDB团队受邀出席&#xff0c;同来自深圳高校、政府教育部门、教育信息化专家学者等共同探讨教育信息化前沿技术与应用的…
阅读更多...
06线性回归衍生算法

06线性回归衍生算法

目录&#xff1a; ridge算法 lasso算法 elastic-Net算法 from sklearn.linear_model import Ridge from sklearn.linear_model import SGDRegressor, LinearRegression from sklearn.linear_model import Lasso import numpy as np# 1. Ridge 岭回归# 生成随机数据 X np.…
阅读更多...
linux 调试工具 GDB 使用

linux 调试工具 GDB 使用

gdb是linux下常用的代码调试工具&#xff0c;本文记录常用命令。 被调试的应用需要使用 -g 参数进行编译&#xff0c;如不确定可使用如下命令查看是否支持debug readelf -S filename | grep "debug" 启动调试 gdb binFile 例如要调试sshd&#xff1a; 调试带参数…
阅读更多...
汉诺塔（函数递归）

汉诺塔（函数递归）

前言 汉诺塔问题是一个经典的数学谜题&#xff0c;也是函数递归的一个经典问题&#xff0c;起源于印度。问题的设定是有三个柱子&#xff0c;第一个柱子上有一组不同大小的圆盘&#xff0c;按照从上到下依次变大的顺序摆放。目标是将所有的圆盘从第一个柱子移动到第三个柱子上&…
阅读更多...
RV1126/RV1109 ISP调试方案

RV1126/RV1109 ISP调试方案

最近一直在做瑞芯微rv1126的开发&#xff0c;由于项目性质&#xff0c;与camera打的交道比较多&#xff0c;包括图像的采集&#xff0c;ISP处理&#xff0c;图像处理&#xff0c;H.264/H.265编解码等各个方面吧。学到了不少&#xff0c;在学习的过程中&#xff0c;也得到了不少…
阅读更多...
Flutter的BuildContext简介

Flutter的BuildContext简介

文章目录 BuildContext 简介BuildContext的主要作用 BuildContext 简介 BuildContext是Flutter中的一个重要概念&#xff0c;表示当前Widget在树中的位置上下文。它是一个对Widget树的一个位置的引用&#xff0c;用于查找、访问和操作该位置上的相关信息。每个Widget都有一个关…
阅读更多...
家长的责任是什么

家长的责任是什么

我们经常讨论各种话题&#xff0c;包括家长的责任。作为家长&#xff0c;我们的责任不仅仅是抚养孩子&#xff0c;更是塑造他们的未来。那么&#xff0c;家长的责任究竟是什么呢&#xff1f; 为孩子提供一个稳定、和谐的家庭环境。家庭是孩子成长的第一个课堂&#xff0c;家长需…
阅读更多...
自激活T细胞为肿瘤免疫治疗提供新思路—高分文献分享

自激活T细胞为肿瘤免疫治疗提供新思路—高分文献分享

CD28是在所有小鼠和人类T细胞上表达的共刺激受体&#xff0c;用来调节T细胞受体(TCR) 的响应。异常的CD28 信号传导是癌症、自身免疫和病毒感染中T细胞功能障碍的决定性特征之一。早期的一些研究表明CD28对CD4 T细胞更重要&#xff0c;但也有越来越多的研究者发现其对CD8 T细胞…
阅读更多...
Java：TCP 通信方法（基本发送 + 接收）并 实现文件传输且反馈

Java：TCP 通信方法（基本发送 + 接收）并 实现文件传输且反馈

TCP 通信编程 TCP:是一种可靠的网络协议&#xff0c;再通信两端都建立一个Socket对象。 通信之前要保证连接已经建立。 通过Socket产生IO流进行通信。 创建对象时&#xff0c;会连接服务器&#xff0c;连接不上&#xff0c;会报错。 所以&#xff0c;先运行服务端&#xff0c;再…
阅读更多...
SCT2632QSTER4.2V-60V Vin，3A，高效、频率可调、降压DCDC转换器

SCT2632QSTER4.2V-60V Vin，3A，高效、频率可调、降压DCDC转换器

SCT2632Q是一款3A降压转换器&#xff0c;具有宽输入电压&#xff0c;从4.2V到60V&#xff0c;集成了220mΩ高压侧MOSFET。SCT2632Q采用峰值电流模式控制&#xff0c;支持脉冲跳过调制&#xff08;PSM&#xff09;&#xff0c;以帮助转换器在轻负载或待机状态下实现高效率条件。…
阅读更多...
逻辑回归原理及代码

逻辑回归原理及代码

逻辑回归原理 线性回归主要用于预测连续的数值输出&#xff0c;基于线性关系模型&#xff0c;其目标是最小化实际值和预测值之间的差异。 逻辑回归主要用于分类问题&#xff0c;尤其是二元分类&#xff0c;它预测属于某一类别的概率&#xff0c;并基于概率输出进行决策&#x…
阅读更多...
壹家人温暖宁夏中卫，34个孩子收到壹基金温暖包

壹家人温暖宁夏中卫，34个孩子收到壹基金温暖包

这个12月&#xff0c;2023年度壹基金温暖包在宁夏中卫的发放活动顺利开展&#xff0c;镇罗中学的4个孩子和山羊场小学28个孩子领到了这份温暖的冬日礼物&#xff0c;后续还有丰台村2个孩子也会领到这份冬天的礼物。 2023年壹基金温暖包共筹集温暖包34个&#xff0c;经过我们…
阅读更多...
数字图像处理（实践篇）二十四 使用dlib实现人脸对齐

数字图像处理（实践篇）二十四 使用dlib实现人脸对齐

目录 1 安装依赖库 2 下载shape_predictor_68_face_landmarks.dat文件 3 人脸对齐方案 4 涉及的函数 5 实践 1 安装依赖库 使用如下命令即可安装dlib： pip install dlib 在使用
阅读更多...
AMEYA360：海康存储PCIe4.0固态硬盘A4000介绍

AMEYA360：海康存储PCIe4.0固态硬盘A4000介绍

海康存储即将发布PCIe4.0固态硬盘新品A4000&#xff0c;搭载全新定制主控及高品质3D NAND闪存颗粒&#xff0c;最大顺序读取速度达7100MB/s&#xff0c;提供五年质保服务。 2022年&#xff0c;海康存储开始在PCIe 4.0固态硬盘领域全面发力&#xff0c;推出C4000 ECO、C4000等多…
阅读更多...
多元统计课程 --整理

多元统计课程 --整理

第五週 Principal components_哔哩哔哩_bilibili &#xff08;【多变量分析 Multivariate Analysis】台湾交通大学 - 黃冠華 教授&#xff09; 厦门大学多元统计课程-哔哩哔哩视频 (bilibili.com) 杰大大大大大人的个人空间哔哩哔哩视频 (bilibili.com) 【b站数学视频-知乎】…
阅读更多...
解决方案-复杂电磁环境适应性试验系统

解决方案-复杂电磁环境适应性试验系统

复杂电磁环境适应性试验系统 简述&#xff1a; 复杂电磁环境适应性试验系统主要用于构建想定场景下的复杂电磁环境&#xff0c;为通信、导航等无线收发设备的设计、开发、试验提供先进的仿真与试验验证评估条件&#xff0c;提高设计建模、在线仿真、半实物仿真验证及评估能力&…
阅读更多...
【计算机设计大赛】冬残奥会可视化系统_附源码—信息可视化赛道获奖项目深入剖析【可视化项目案例-19】

【计算机设计大赛】冬残奥会可视化系统_附源码—信息可视化赛道获奖项目深入剖析【可视化项目案例-19】

🎉🎊🎉 你的技术旅程将在这里启航！ 记得看本专栏里顶置的可视化宝典导航贴哦！ 🚀🚀 本专栏为可视化专栏，包含现有的所有可视化技术。订阅专栏用户在文章底部可下载对应案例完整源码以供大家深入的学习研究。 🎓 每一个案例都会提供完整代码和详细的讲解，不论你…
阅读更多...
慢SQL的治理经验

慢SQL的治理经验

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、慢SQL导致的后果 二、可能导致慢SQL的原因 三、如何发现慢SQL 3.1 JVM Sandbox 四、识别高危SQL 4.1 阿里的重点强制SQL规…
阅读更多...
多线程案例-定时器(附完整代码)

多线程案例-定时器(附完整代码)

定时器是什么 定时器是软件开发中的一个重要组件.类似于一个"闹钟".达到一个设定的时间之后,就执行某个指定好的代码. 定时器是一种实际开发中非常常用的组件. 比如网络通信种,如果对方500ms内没有返回数据,则断开尝试重连. 比如一个Map,希望里面的某个key在3s之后过…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023