2024年HarmonyOS鸿蒙最全浅谈ArkUI之Web组件的基础用法_arkui webview，面试阿里 职级会变吗

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

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

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

需要这份系统化的资料的朋友，可以戳这里获取

}

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



![图片](https://img-blog.csdnimg.cn/img_convert/28eb07bbf32bca67d093f951479622a2.png)



### 页面加载


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

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等。


显示效果如所示：


![](https://img-blog.csdnimg.cn/direct/cc42cdbc829e4b2689e23a01f49a885c.png)


#### 页面交互


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


（1）调用JavaScript函数


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

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

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


（2）对象注入


所谓对象注入，就是将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();

#### 页面调试


在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组件中的界面了。



![img](https://img-blog.csdnimg.cn/img_convert/c81e93ec984aaca4f68d56010e31cc7b.png)
![img](https://img-blog.csdnimg.cn/img_convert/7745e68108db293a1d4aef4d31cb8688.png)

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

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


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

提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


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