鸿蒙应用开发 Web 组件抽奖

1 概述

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

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

本文将为您介绍 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 })}}
}

代码运行效果图如下：

访问在线网页时您需要在 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>

代码运行效果图如下：

为了方便开发者学习，后面用到的 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 })}}
}

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

文本缩放

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

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

效果图如下：

从上面的效果图可以看出使用 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>

效果图如下：

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 案例：Web 组件抽奖

简介

本篇 Codelab 是基于 ArkTS 的声明式开发范式的样例，主要介绍了 Web 组件如何加载本地和云端 H5 小程序。

相关概念

  • Web：提供具有网页显示能力的 Web 组件。
  • runJavaScript：异步执行 JavaScript 脚本，并通过回调方式返回脚本执行的结果。
  • onConfirm：网页调用 confirm()告警时触发此回调。本篇 Codelab 用于回显抽奖结果。

相关权限

访问在线网页时需添加网络权限：ohos.permission.INTERNET。

约束与限制

  1. 本示例仅支持标准系统上运行，支持设备：华为手机或运行在 DevEco Studio 上的华为手机设备模拟器。
  2. 本示例为 Stage 模型，支持 API version 9。
  3. 本示例需要使用 DevEco Studio 3.1 Release 版本进行编译运行。

源码地址

在公众号「Android指南」后台回复关键字「Web抽奖」即可获取。

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

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

相关文章

小米汽车 SU7 技术发布会-智能驾驶猜想，真的“吊打”特斯拉？

小米汽车 SU7 技术发布会-智能驾驶猜想，真的“吊打”特斯拉？

核心主题 本人AI数据工程师&#xff0c;看完小米汽车 SU7 技术发布会&#xff0c;主谈智能驾驶猜想。 小米汽车披露&#xff1a;智能驾驶要2024年跻身第一梯队 发布会前沿致敬经典&#xff0c;挺好的毕竟礼多人不怪。 见面道辛苦&#xff0c;必定是江湖。 见面致经典&#…
阅读更多...
hyperf console 执行

hyperf console 执行

一、原理描述 hyperf中&#xff0c;不难发现比如自定义控制器中获取参数&#xff0c;hyperf.php中容器获取&#xff0c;传入的都是接口&#xff0c;而不是实体类。 这是因为框架中的配置文件有设置对应抽象类的子类&#xff0c;框架加载的时候将其作为数组&#xff0c;使用的…
阅读更多...
《Linux系统与网络管理》复习题库---简答题

《Linux系统与网络管理》复习题库---简答题

1、简述这些分区的名字以及各自的作用。 答&#xff1a; /boot 存放内核镜像的地方&#xff0c;这个文件夹独立分区的意义在于降低不能开机的风险。 /根目录&#xff0c;一般采用 etx3 文件系统&#xff0c;分区的容量一定要大于安装软件包的容量。 /usr 多数软件的默认安装的地…
阅读更多...
ssm基于vue框架的点餐系统的设计与实现+vue论文

ssm基于vue框架的点餐系统的设计与实现+vue论文

基于vue框架的点餐系统的设计与实现 摘要 当下&#xff0c;正处于信息化的时代&#xff0c;许多行业顺应时代的变化&#xff0c;结合使用计算机技术向数字化、信息化建设迈进。传统的点餐信息管理模式&#xff0c;采用人工登记的方式保存相关数据&#xff0c;这种以人力为主的…
阅读更多...
私有部署ELK，搭建自己的日志中心（六）-- 引入kafka对采集日志进行削峰填谷

私有部署ELK，搭建自己的日志中心（六）-- 引入kafka对采集日志进行削峰填谷

一、背景 首先&#xff0c;要说明一点&#xff0c;elk日志中心&#xff0c;是可以缺少kafka组件的。 其次&#xff0c;如果是研发环境下&#xff0c;机器资源紧张的情况下&#xff0c;也是可不部署kafka。 最后&#xff0c;因为kafka的部署是可以独立的&#xff0c;所以本文将…
阅读更多...
Scrapy使用案例——爬取豆瓣Top 250电影数据

Scrapy使用案例——爬取豆瓣Top 250电影数据

文章目录 什么是Scrapy&#xff1f;创建Scrapy项目编写Scrapy Spider创建Item类配置数据存储运行Scrapy爬虫处理常见问题结论Python技术资源分享1、Python所有方向的学习路线2、学习软件3、入门学习视频4、实战案例5、清华编程大佬出品《漫画看学Python》6、Python副业兼职与全…
阅读更多...
2023年03月22日_谷歌Bard开放公测的解读

2023年03月22日_谷歌Bard开放公测的解读

文章目录 定位谷歌的求生欲Bard的演示翻车 2023年3月22日 面对OpenAI和微软的步步紧逼 谷歌这次终于呢不再坐以待毙了 昨天 谷歌正式宣布开放旗下Bard的公测 作为跟ChatGPT的正面竞争 首先呢面向英国和美国地区启动 目前这两个国家的用户呢 都可以在Bard.google.com 上…
阅读更多...
【网络安全】网络隔离设备

【网络安全】网络隔离设备

一、网络和终端隔离产品 网络和终端隔离产品分为终端隔离产品和网络隔离产品两大类。终端隔离产品一般指隔离卡或者隔离计算机。网络隔离产品根据产品形态和功能上的不同&#xff0c;该类产品可以分为协议转换产品、网闸和网络单向导入产品三种。 图1为终端隔离产品的一个典型…
阅读更多...
提升客户体验！十大热门客户服务软件解决方案推荐

提升客户体验！十大热门客户服务软件解决方案推荐

现代企业深切认识到客户关系对于成功至关重要。如今&#xff0c;顾客越来越偏向于个性化和情境化服务的企业。根据Forrester的研究&#xff0c;将优先考虑建立更好客户关系以实现长期增长将是2023年业务成功的关键。 为了评估和改善客户关系&#xff0c;您需要一个系统化的方式…
阅读更多...
自激振荡电路笔记 电弧打火机

自激振荡电路笔记 电弧打火机

三极管相关 三极管的形象描述 二极管 简单求解&#xff08;理想&#xff09; 优先导通&#xff08;理想&#xff09; 恒压降 稳压管&#xff08;二极管plus&#xff09; 基础工作模块 理想稳压管的工作特性 晶体管之三极管(“两个二极管的组合” ) 电弧打火机电路 1.闭合开…
阅读更多...
【MySQL】主从异步复制配置

【MySQL】主从异步复制配置

您好&#xff0c;我是码农飞哥&#xff08;wei158556&#xff09;&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精…
阅读更多...
uniapp中uview组件库的丰富Upload 上传上午用法

uniapp中uview组件库的丰富Upload 上传上午用法

目录 基础用法 #上传视频 #文件预览 #隐藏上传按钮 #限制上传数量 #自定义上传样式 API #Props #Methods #Slot #Events 基础用法 可以通过设置fileList参数(数组&#xff0c;元素为对象)&#xff0c;显示预置的图片。其中元素的url属性为图片路径 <template>…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023