当前位置:首页 > 数码 > 浅谈ArkUI之Web组件的基础用法 (浅谈AR与VR的区别)

浅谈ArkUI之Web组件的基础用法 (浅谈AR与VR的区别)

admin1个月前 (04-15)数码10

最近钻研了ArkUI中的一些罕用组件,其中Web组件是很罕用且相对独立的一种组件。本文总结了Web组件的罕用函数,以及基本用法。先来一个画的Web组件助助兴(好吧,不能说毫无相关,只能说一点也不像):

在ArkUI中,Web组件用于显示Web网页,可以了解为一个嵌入式的小型阅读器,用于展现Web内容,成功Web的混合开发。例如,在API9中目前还没有地图组件可用,那么咱们就可以借助Web组件显示OpenLayers、OSM等提供的地图空间和地图服务。听说ArkUI的Web组件驳回了chromium内核,应当还是十分高效的。

1、开发环境要求

●DevEcoStudio版本:DevEcoStudio3.1Release●HarmonyOSSDK版本:APIversion9

2、基本用法

经常使用Web组件分为3个基本步骤:

导入WebView库。
importwebviewfrom'@ohos.web.webview';

创立Web视图管理器(WebViewController):经过Web视图管理器可以对Web组件的显示内容启动管理,成功加载、交互等操作。

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

创立Web组件:在创立Web组件时可以传入自动加载地址和管理器对象。比如,自动加载百度网站的首页,代码如下:

Web({src:"https://m.baidu.com",controller:this.webCtr})

此时,这个Web组件就和webCtr对象绑定在一同了。开发者就可以经过webCtr对象的方法对Web组件中的内容启动管理了。不要忘了,访问网站时须要减少互联网访问权限。在entry模块下的module.json5文件中,减少ohos.permission.INTE权限,代码如下:

{"module":{..."requestPermissions":[{"name":"ohos.permission.INTERNET"}],...}...}

随后,运转程序就可以显示相应的页面了,显示成果如下:

3、页面加载

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

this.webCtr.loadUrl('m.bilibili.com');

加载本地页面的代码如下:

this.webCtr.loadUrl($rawfile("test."));

前提是须要将test.html参与到entry/src/main/resources/rawfile目录下。当然,还可以经过loadData函数加载HTML代码,这种方式理论用于显示便捷的数据。例如,经过loadData显示Hello,HarmonyOS,代码如下:

this.controller.loadData("<html><body>Hello,<b>Harmony<span>O</span>S</b></body></html>","text/html","UTF-8");

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

显示成果如所示:

#星方案#浅谈ArkUI之Web组件的基础用法-鸿蒙开发者社区

4、页面交互

页面交互包含在ArkTS中口头Web组件中的Script函数以及对象注入等2个关键性能。另外,还可以经过createWebMessagePorts函数创立信息端口来成功Web组件和ArkTS言语环境的数据通讯,轻松成功数据传递。

调用JavaScript函数。经过runJavaScript函数就可以轻松成功前端函数的调用,代码如下:

this.webviewController.runJavaScript('run()');

当然,前端要提早设计好run()函数才可以反常运转。

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

classTest{constructor(){}hello():string{return"Hello,JavaScript!";}toString():void{console.log('ThisisfromArkTS');}}

创立Test类的实例,代码如下:

@Statetest:Test=newTest();

最后,即可经过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对象,代码如下:

letstr=jsTest.hello();letst2=jsTest.toString();

5、页面调试

在DevEcoStudio中,经过DevTools工具可以很轻松地对Web组件中的页面启动调试,不过,须要经过setWebDebuggingAccess函数开启调试形式,代码如下:

this.webCtr.setWebDebuggingAccess(true);

随后,经过以下命令在电脑端性能映射,如下所示:

//减少映射hdcfporttcp:9222tcp:9222//检查映射hdcfportls

映射建设成功后,就可以经过Chrome、Edge等阅读器经过USB线对Web页面启动调试了。在页面中输上天址chrome://inspect/#devices,即可调试Web组件中的界面了。


arkui的web组件内容不滚动

题主想问的是arkui的web组件内容不滚动的原因吗?是CSS样式设置不正确导致的。 1、首先检查一下组件的CSS样式是否设置正确。 2、然后尤其是overflow属性是否设置为auto。 3、最后看超出容器大小时是否自动滚动。

WEB前端框架—QUICK UI框架的优势有哪些?(二)

4、事无巨细的开发文档。

QUICKUI拥有16万字+的开发文档,框架和组件的每一个功能点都有详细的讲解和代码示例,用于开发过程中随时查阅。除了框架机制讲解和组件使用教程,文档还涉及web前端开发的很多知识。仔细阅读并结合框架使用的话,你很快就能成为web开发的高手。

5、上手开发非常容易。

Web组件

QUICKUI采用组件化思想来构建组件,一个组件就是一两句html的标签,使用起来非常简单。将开发人员从繁琐的JS编码中解脱出来,很大程度减少前台编码的出错率;保留了HTML的布局方式,从而快速进行页面布局。对开发者前台技术要求也非常低,只需要了解html语法和一些简单的JS即可,从而把更多精力放在业务功能的实现上,极大地提高开发效率。

6、浏览器兼容性非常好。

QUICKUI4.0使用了很多HTML5,CSS3技术用于提高表现力和用户体验,这些新的特性在现代浏览器中会有很好的效果。但是,国内依然有大量的用户在使用IE7、IE8等旧时代的浏览器,为照顾这部分用户,框架采用了渐进式思想,确保低版本浏览器也能正常使用。所以,QUICKUI兼容IE7以上所有主流浏览器。

免责声明:本文转载或采集自网络,版权归原作者所有。本网站刊发此文旨在传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及版权、内容等问题,请联系本网,我们将在第一时间删除。同时,本网站不对所刊发内容的准确性、真实性、完整性、及时性、原创性等进行保证,请读者仅作参考,并请自行核实相关内容。对于因使用或依赖本文内容所产生的任何直接或间接损失,本网站不承担任何责任。

标签: Web组件