文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-11-30 02:44

关注

想了解更多关于开源的内容,请访问:

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(
"Hello, HarmonyOS",
"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

来源:51CTO 开源基础软件社区内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯