当前位置：首页 > 科技 > 软件

浅谈ArkUI之Web组件的基础用法

来源：责编：时间：2024-01-02 09:31:36 143观看

导读想了解更多关于开源的内容，请访问：51CTO 开源基础软件社区https://ost.51cto.com最近研究了ArkUI中的一些常用组件，其中Web组件是很常用且相对独立的一种组件。本文总结了Web组件的常用函数，以及基本用法。先来一个AI画的

想了解更多关于开源的内容，请访问：

51CTO 开源基础软件社区

https://ost.51cto.com

最近研究了ArkUI中的一些常用组件，其中Web组件是很常用且相对独立的一种组件。本文总结了Web组件的常用函数，以及基本用法。先来一个AI画的Web组件助助兴（好吧，不能说毫无关系，只能说一点也不像）：

在ArkUI中，Web组件用于显示Web网页，可以理解为一个嵌入式的小型浏览器，用于展示Web内容，实现Web的混合开发。例如，在API 9中目前还没有地图组件可用，那么我们就可以借助Web组件显示OpenLayers、OSM等提供的地图空间和地图服务。据说ArkUI的Web组件采用了chromium内核，应当还是非常高效的。

1、开发环境要求

● DevEco Studio版本：DevEco Studio 3.1 Release
● HarmonyOS SDK版本：API version 9

2、基本用法

使用Web组件分为3个基本步骤：

导入WebView库。

import webview from '@ohos.web.webview';

创建Web视图控制器（WebViewController）：通过Web视图控制器可以对Web组件的显示内容进行控制，实现加载、交互等操作。

webCtr : webview.WebviewController = new webview.WebviewController();

创建Web组件：在创建Web组件时可以传入默认加载地址和控制器对象。比如，默认加载百度网站的首页，代码如下：

Web({src : "https://m.baidu.com", controller : this.webCtr})

此时，这个Web组件就和webCtr对象绑定在一起了。开发者就可以通过webCtr对象的方法对Web组件中的内容进行控制了。
不要忘了，访问网站时需要添加互联网访问权限。在entry模块下的module.json5文件中，添加ohos.permission.INTERNET权限，代码如下：

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

随后，运行程序就可以显示相应的页面了，显示效果如下：

3、页面加载

加载互联网页面的代码如下：

this.webCtr.loadUrl('m.bilibili.com');

加载本地页面的代码如下：

this.webCtr.loadUrl($rawfile("test.html"));

前提是需要将test.html加入到entry/src/main/resources/rawfile目录下。
当然，还可以通过loadData函数加载HTML代码，这种方式通常用于显示简单的数据。例如，通过loadData显示“Hello, HarmonyOS”，代码如下：

this.controller.loadData("<html><body>Hello, <b>Harmony<span style="text-decoration:underline;">O</span>S</b></body></html>","text/html","UTF-8");

loadData有3个参数，第一个是文本代码，第二个用于指定文本代码的格式，如text/html、text/plain等；第三个是字符编码方式，如UTF-8、GB2312、GBK等

显示效果如所示：

#星计划#浅谈ArkUI之Web组件的基础用法-鸿蒙开发者社区

4、页面交互

页面交互包括在ArkTS中执行Web组件中的JavaScript函数以及对象注入等2个主要功能。另外，还可以通过createWebMessagePorts函数创建消息端口来实现Web组件和ArkTS语言环境的数据通信，轻松实现数据传递。

调用JavaScript函数。
通过runJavaScript函数就可以轻松实现前端函数的调用，代码如下：

this.webviewController.runJavaScript('run()');

当然，前端要提前设计好run()函数才可以正常运行。

对象注入。
所谓对象注入，就是将ArkTS的对象注入到Web组件的前端代码中。例如，在ArkTS中定义Test类，代码如下：

class Test {  constructor() {  }  hello(): string {    return "Hello, JavaScript!";  }  toString(): void {    console.log('This is from ArkTS');  }}

创建Test类的实例，代码如下：

@State test: Test = new Test();

最后，即可通过Web组件的javaScriptProxy函数将test对象注入到前端代码中：

Web({ ... })  .javaScriptProxy({    object: this.test,    name: "jsTest",    methodList: ["hello", "toString"],    controller: this.webCtr})

其中，object用于指定需要注入的对象；name表示注入后的对象名称；methodList用于声明注入对象的函数；controller指定了Web视图控制器。
当然，还可以通过WebViewController的registerJavaScriptProxy函数注入对象，代码如下：

this.webCtr.registerJavaScriptProxy(this.test, "jsTest", ["hello", "toString"]);

随后，在前端就可以访问到jsTest对象，代码如下：

let str = jsTest.hello();let st2 = jsTest.toString();

5、页面调试

在DevEco Studio中，通过DevTools工具可以很轻松地对Web组件中的页面进行调试，不过，需要通过setWebDebuggingAccess函数开启调试模式，代码如下：

this.webCtr.setWebDebuggingAccess(true);

随后，通过以下命令在电脑端配置映射，如下所示：

// 添加映射 hdc fport tcp:9222 tcp:9222 // 查看映射 hdc fport ls

映射建立成功后，就可以通过Chrome、Edge等浏览器通过USB线对Web页面进行调试了。在页面中输入地址chrome://inspect/#devices，即可调试Web组件中的界面了。

想了解更多关于开源的内容，请访问：

51CTO 开源基础软件社区

https://ost.51cto.com

本文链接：http://www.28at.com/showinfo-26-55263-0.html浅谈ArkUI之Web组件的基础用法

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：浅谈ArkUI之Web组件的基础用法

下一篇： Spring事务长了个腿？轻松掌握技巧告别长事务烦恼！

标签：

热门焦点

官方承诺：K60至尊版将会首批升级MIUI 15

全新的MIUI 15今天也有了消息，在官宣了K60至尊版将会搭载天玑9200+处理器和独显芯片X7的同时，Redmi给出了官方承诺，K60至尊重大更新首批升级，会首批推送MIUI 15。也就是说虽然
一加首款折叠屏！一加Open渲染图出炉：罕见单手可握小尺寸

8月5日消息，此前就有爆料称，一加首款折叠屏手机将会在第三季度上市，如今随着时间临近，新机的各种消息也开始浮出水面。据悉，这款新机将会被命名为“On
量化指标是与非：挽救被量化指标扼杀的技术团队

作者 | 刘新翠整理 | 徐杰承本文整理自快狗打车技术总监刘新翠在WOT2023大会上的主题分享，更多精彩内容及现场PPT，请关注51CTO技术栈公众号，发消息【WOT2023PPT】即可直接领取
如何使用JavaScript创建一只图像放大镜？

译者 | 布加迪审校 | 重楼如果您曾经浏览过购物网站，可能遇到过图像放大功能。它可以让您放大图像的特定区域，以便浏览。结合这个小小的重要功能可以大大改善您网站的用户体验
在线图片编辑器，支持PSD解析、AI抠图等

自从我上次分享一个人开发仿造稿定设计的图片编辑器到现在，不知不觉已过去一年时间了，期间我经历了裁员失业、面试找工作碰壁，寒冬下一直没有很好地履行计划.....这些就放在日
2023年，我眼中的字节跳动

此时此刻（2023年7月），字节跳动从未上市，也从未公布过任何官方的上市计划；但是这并不妨碍它成为中国最受关注的互联网公司之一。从2016-17年的抖音强势崛起，到2018年的“头腾
ESG的面子与里子

来源 | 光子星球撰文 | 吴坤谚编辑 | 吴先之三伏大幕拉起，各地高温预警不绝，但处于厄尔尼诺大“烤”之下的除了众生，还有各大企业发布的ESG报告。ESG是“环境保
小米公益基金会捐赠2500万元驰援北京、河北暴雨救灾

8月2日消息，今日小米科技创始人雷军在其微博上发布消息称，小米公益基金会宣布捐赠2500万元驰援北京、河北暴雨救灾。携手抗灾，京冀安康！以下为公告原文
Windows 11发布，微软一改往常对老机型开放的态度

距离 Windows 11 发布已经过去一周，在过去一周里，很多数码爱好者围绕其对 Android 应用的支持、对老机型的升级问题展开了激烈讨论。与以往不同的是，在这次大