【HarmonyOS应用开发】Web组件的使用（十三）

news2024/11/16 20:52:07

文章末尾含：Web组件抽奖案例（ArkTS）-示例源码下载

Web组件的使用

在这里插入图片描述

一、概述

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

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

在这里插入图片描述
本文将为您介绍Web组件一些常用API的使用。

二、加载网页

2.1、加载在线网页

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

代码运行效果图如下：

在这里插入图片描述
访问在线网页时您需要在module.json5文件中申明网络访问权限：ohos.permission.INTERNET。

{
    "module" : {
        "requestPermissions":[
           {
             "name": "ohos.permission.INTERNET"
           }
        ]
    }
}
2.2、加载本地网页

前面实现了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

代码运行效果图如下：
在这里插入图片描述
为了方便开发者学习，后面用到的HTML都是以文件的形式放到rawfile目录下，加载本地网页。

三、网页缩放

有的网页可能不能很好适配手机屏幕，需要对其缩放才能有更好的效果，开发者可以根据需要给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 })
    }
  }
}

说明

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

3.1、文本缩放

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

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

效果图如下：
在这里插入图片描述
从上面的效果图可以看出使用textZoomAtio，文本会放大，但是图片不会随着文本一起放大。

四、Web组件事件

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

4.1、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文件：

效果图如下：
在这里插入图片描述

五、Web和JavaScript交互

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

5.1、启用JavaScript

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

Web({ src:'https://www.example.com', controller:this.controller })
    .javaScriptAccess(true)
5.2、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组件。

5.3、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对象。

六、处理页面导航

当我们在使用浏览器浏览网页时，可以执行返回、前进、刷新等操作，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()来检查是否存在前进历史记录。

七、调试网络应用

您可以使用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

案例源码下载：

Web组件抽奖案例（ArkTS）-示例源码

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

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

相关文章

vivado 运行编译

vivado 运行编译

运行合成 运行定义并配置在合成过程中使用的设计方面。一个合成run定义了以下内容： •AMD设备在合成过程中成为目标 •要应用的约束集 •启动单个或多个合成运行的选项 •控制合成引擎结果的选项 要定义RTL源文件和约束的运行，请执行以下操作&…
阅读更多...
Java 数据结构 二叉树（二）红黑树

Java 数据结构 二叉树（二）红黑树

目录 数据结构图-树 简介 规则 旋转 重新着色 红黑树构建过程 前言-与正文无关 生活远不止眼前的苦劳与奔波，它还充满了无数值得我们去体验和珍惜的美好事物。在这个快节奏的世界中，我们往往容易陷入工作的漩涡，忘记了停下脚步&#xf…
阅读更多...
关于华为应用市场上架，申请权限未告知目的被驳回问题的简单处理方式

关于华为应用市场上架，申请权限未告知目的被驳回问题的简单处理方式

关于华为应用市场上架过程中出现的【您的应用在运行时，未同步告知权限申请的使用目的，向用户索取（存储、拍照）等权限，不符合华为应用市场审核标准。】 使用方式： 1、引入 import permision from "/m…
阅读更多...
配置实例—交换机VLAN聚合配置实例

配置实例—交换机VLAN聚合配置实例

一、组网需求 某公司拥有多个部门且位于同一网段，为了提升业务安全性，将不同部门的用户划分到不同VLAN中。现由于业务需要，不同部门间的用户需要互通。如图1所示，VLAN2和VLAN3为不同部门，现需要实现不同VLAN间的用户可…
阅读更多...
【MySQL】学习如何通过DQL进行数据库数据的基本查询

【MySQL】学习如何通过DQL进行数据库数据的基本查询

🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​💫个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-KvH5jXnPNsRtMkOC {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…
阅读更多...
Java学习day28：线程池Pool（知识点非常非常的详解）

Java学习day28：线程池Pool（知识点非常非常的详解）

声明：该专栏本人重新过一遍java知识点时候的笔记汇总，主要是每天的知识点题解，算是让自己巩固复习，也希望能给初学的朋友们一点帮助，大佬们不喜勿喷(抱拳了老铁！) 往期回顾 Java学习day27：join方…
阅读更多...
YOLOv5算法进阶改进（15）— 引入密集连接卷积网络DenseNet

YOLOv5算法进阶改进（15）— 引入密集连接卷积网络DenseNet

前言：Hello大家好，我是小哥谈。DenseNet（密集连接卷积网络）是一种深度学习神经网络架构，它在2017年由Gao Huang等人提出。DenseNet的核心思想是通过密集连接（dense connection）来促进信息的流动和共享。在传统的卷积神经网络中，每个层的输入只来自于前一层的输出。而在…
阅读更多...
c语言---操作符（详解）

c语言---操作符（详解）

目录 一、操作符的分类二、算术操作符三、 移位操作符3.1<<左移操作符3.1.1移位规则3.1.2直接上代码以及解释 3.2>> 右移操作符3.2.1移位规则3.2.2画图解释 3.3注意 四、位操作符&#xff1a;&、|、^、~4.1&按位与4.1.1按位与的计算逻辑4.1.2代码4.1.3运行…
阅读更多...
Modbus协议学习第七篇之libmodbus库API介绍（modbus_write_bits等）

Modbus协议学习第七篇之libmodbus库API介绍（modbus_write_bits等）

写在前面 在第六篇中我们介绍了基于libmodbus库的演示代码&#xff0c;那本篇博客就详细介绍一下第六篇的代码中使用的基于该库的API函数。另各位读者&#xff0c;Modbus相关知识受众较少&#xff0c;如果觉得我的专栏文章有帮助&#xff0c;请一定点个赞&#xff0c;在此跪谢&…
阅读更多...
redis布隆过滤器（Bloom）详细使用教程

redis布隆过滤器（Bloom）详细使用教程

文章目录 布隆过滤器1. 原理2. 结构和操作3. 特点和应用场景4. 缺点和注意事项 应用-redis插件布隆过滤器使用详细过程安装以及配置springboot项目使用redis布隆过滤器下面是布隆过滤器的一些基础命令 扩展 布隆过滤器 Bloom 过滤器是一种概率型数据结构&#xff0c;用于快速判…
阅读更多...
算法学习——华为机考题库5（HJ31 - HJ35）

算法学习——华为机考题库5（HJ31 - HJ35）

算法学习——华为机考题库5&#xff08;HJ31 - HJ35&#xff09; HJ31 单词倒排 描述 对字符串中的所有单词进行倒排。 说明&#xff1a; 1、构成单词的字符只有26个大写或小写英文字母&#xff1b; 2、非构成单词的字符均视为单词间隔符&#xff1b; 3、要求倒排后的单…
阅读更多...
Jmeter，如何从数组参数中取值

Jmeter，如何从数组参数中取值

有个post请求&#xff0c;参数“equipment_ids”&#xff0c;是个数组&#xff0c;需求每次执行的时候&#xff0c;按顺序取equipment_ids中不同的值 要实现在 JMeter 中每次执行请求时按顺序取不同的 equipment_ids 中的值&#xff0c;你可以使用 Counter 元件来生成索引&…
阅读更多...
Linux 磁盘空间占用率100%的排查

Linux 磁盘空间占用率100%的排查

&#x1f4d1;前言 使用 Linux 操作系统时&#xff0c;可能会遇到磁盘空间不足的错误&#xff0c;这种错误通常会导致系统运行缓慢或崩溃。本文将介绍磁盘排查的方法。⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是青衿&#x1f947; ☁️博客首页&#xff1…
阅读更多...
【深入浅出Java性能调优】「底层技术原理体系」详细分析探索Java服务器性能监控Metrics框架的实现原理分析（Dropwizard度量基础案例指南)

【深入浅出Java性能调优】「底层技术原理体系」详细分析探索Java服务器性能监控Metrics框架的实现原理分析（Dropwizard度量基础案例指南)

深入探索Java服务器性能监控Metrics框架的实现原理分析 前提介绍Dropwizard MetricsDropwizard的特点Dropwizard的开发案例需要引入Maven依赖常用度量类型Meter（每秒请求数为单位测量请求率）定义度量核心MetricRegistry构建对应的Meter指标对象请求标记采样业务方法控制报告器…
阅读更多...
【C++入门到精通】C++的IO流（输入输出流） [ C++入门 ]

【C++入门到精通】C++的IO流（输入输出流） [ C++入门 ]

阅读导航 引言一、C语言的输入与输出二、流是什么三、CIO流1. C标准IO流&#xff08;1&#xff09;istream&#xff08;2&#xff09;ostream&#xff08;3&#xff09;iostream&#xff08;4&#xff09;cin 和 cout 2. C文件IO流&#xff08;1&#xff09;ifstream&#xff0…
阅读更多...
WPF简介

WPF简介

WPF早期名称为Avalon&#xff0c;是微软的一个项目&#xff0c;目的是构建统一的平面展示平台 WPF是一个与分辨率无关的UI框架&#xff0c;是一种基于矢量的呈现引擎技术&#xff1b;所用的语言为XAML(全称Extensible Application MarkupLanguage)&#xff0c;它的基本度量单位…
阅读更多...
02 使用jdk运行第一个java程序：HelloWorld

02 使用jdk运行第一个java程序：HelloWorld

使用jdk运行第一个java程序 1 HelloWorld小案例1.1 编写流程1.2 错误示例 首先在CMD命令行里面&#xff0c;使用javac xxxx.java&#xff0c; 进行编译&#xff0c;其中会有报错&#xff1b; 然后生成xxxx.class 文件&#xff0c;然后使用java xxxx.class 进行运行。 1 HelloWo…
阅读更多...
回归预测 | Matlab实现POA-CNN-LSTM-Attention鹈鹕算法优化卷积长短期记忆网络注意力多变量回归预测（SE注意力机制）

回归预测 | Matlab实现POA-CNN-LSTM-Attention鹈鹕算法优化卷积长短期记忆网络注意力多变量回归预测（SE注意力机制）

回归预测 | Matlab实现POA-CNN-LSTM-Attention鹈鹕算法优化卷积长短期记忆网络注意力多变量回归预测&#xff08;SE注意力机制&#xff09; 目录 回归预测 | Matlab实现POA-CNN-LSTM-Attention鹈鹕算法优化卷积长短期记忆网络注意力多变量回归预测&#xff08;SE注意力机制&…
阅读更多...
五大浏览器内核及代表浏览器，一文讲透!

五大浏览器内核及代表浏览器，一文讲透!

Hi,我是贝格前端工场&#xff0c;在进行web前端开发的时候&#xff0c;浏览器兼容性一直是让所有前端工程师头疼的问题&#xff0c;其根源在于不同的浏览器应用了不同的内核&#xff0c;其对html、css、js的解析规则也是不一样的&#xff0c;作为前端开发的你&#xff0c;如果不…
阅读更多...
2024美国大学生数学建模E题财产保险的可持续模型详解思路+具体代码季节性时序预测SARIMA天气预测建模

2024美国大学生数学建模E题财产保险的可持续模型详解思路+具体代码季节性时序预测SARIMA天气预测建模

上一篇已经对赛题进行详细分析了&#xff0c;而且大方向和基本的模型已经确定完毕&#xff0c;数据集都已经找到了&#xff0c;现在最重要的就是要分析风暴数据集以及建立时序预测模型&#xff0c;使用气候模型预测的数据&#xff0c;评估气候变化对未来极端天气事件频率和强度…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023