江苏龙网

  1. 主页 > 生活百科 > >

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

Web组件

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

浅谈ArkUI之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.INTE.NET权限，代码如下：
{"module": {..."requestPermissions": [{"name": "ohos.permission.INTERNET"}], ...} ...}随后，运行程序就可以显示相应的页面了，显示效果如下：
浅谈ArkUI之Web组件的基础用法

文章插图
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组件的基础用法】
浅谈ArkUI之Web组件的基础用法

文章插图
#星计划#浅谈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函数注入对象，代码如下：


推荐阅读


上一篇：50 条实用的编写Python 程序建议

下一篇：ChatGPT个性化重磅升级，内部代号Sunshine曝出！明年晋升超智能个人助理