浅谈ArkUI之Web组件的基础用法 (浅谈AR与VR的区别)
最近钻研了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、上手开发非常容易。
QUICKUI采用组件化思想来构建组件，一个组件就是一两句html的标签，使用起来非常简单。将开发人员从繁琐的JS编码中解脱出来，很大程度减少前台编码的出错率;保留了HTML的布局方式，从而快速进行页面布局。对开发者前台技术要求也非常低，只需要了解html语法和一些简单的JS即可，从而把更多精力放在业务功能的实现上，极大地提高开发效率。
6、浏览器兼容性非常好。
QUICKUI4.0使用了很多HTML5，CSS3技术用于提高表现力和用户体验，这些新的特性在现代浏览器中会有很好的效果。但是，国内依然有大量的用户在使用IE7、IE8等旧时代的浏览器，为照顾这部分用户，框架采用了渐进式思想，确保低版本浏览器也能正常使用。所以，QUICKUI兼容IE7以上所有主流浏览器。
免责声明：本文转载或采集自网络，版权归原作者所有。本网站刊发此文旨在传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及版权、内容等问题，请联系本网，我们将在第一时间删除。同时，本网站不对所刊发内容的准确性、真实性、完整性、及时性、原创性等进行保证，请读者仅作参考，并请自行核实相关内容。对于因使用或依赖本文内容所产生的任何直接或间接损失，本网站不承担任何责任。
