#星计划#浅谈ArkUI之Web组件的基础用法-鸿蒙开发者社区-51CTO.COM
source link: https://ost.51cto.com/posts/28178
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
最近研究了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个基本步骤：
（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"}
], ...
} ...
}
随后，运行程序就可以显示相应的页面了，显示效果如下：
👉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等
显示效果如所示：
👉4. 页面交互
页面交互包括在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();
👉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组件中的界面了。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK