浅谈ArkUI之Web组件的基础用法_arkui webview，2024年最新2024最新HarmonyOS鸿蒙笔试题目

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新HarmonyOS鸿蒙全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注鸿蒙）

正文

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

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

开发环境要求

● DevEco Studio版本：DevEco Studio 3.1 Release

● HarmonyOS SDK版本：API version 9

基本用法

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

（1）导入WebView库：

import webview from ‘@ohos.web.webview’;

（2）创建Web视图控制器（WebViewController）：

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

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

（3）创建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”}
], …
} …
}

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

页面加载

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

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(
“Hello, HarmonyOS”,
“text/html”,
“UTF-8”
);

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

显示效果如所示：

页面交互

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

（1）调用JavaScript函数

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

this.webviewController.runJavaScript(‘run()’);

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

（2）对象注入

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

class Test {

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

这份系统化的资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）**
[外链图片转存中…(img-RLDSdGiD-1713197382849)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！