devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【鸿蒙应用ArkTS开发系列】- Web组件使用讲解_arkts webview

作者：我家自动化 | 2024-02-21 14:42:10

赞

踩

arkts webview

目录

一、Web组件介绍

二、创建组件

权限列表

三、设置样式和属性

四、添加事件和方法

五、访问本地Html

1、本地html文件创建

2、本地html文件加载

2、JS对象注入，Html使用JS对象调用客户端方法

3、客户端调用本地Html网页中的JS方法

使用鸿蒙的ArkUI框架开发鸿蒙应用的时候，官方为我们提供了一个web组件，提供给开发者使用，通过本文学习，我们将了解并学会如何使用Web组件进行如下操作：

  • 在线网页加载
  • 本地离线网页加载
  • Web组件常用属性设置
  • 客户端与网页之间的双向通信交互

下面我们先来看下Web组件的介绍。

一、Web组件介绍

Web是提供网页显示能力的组件，具体用法请参考 Web API。

二、创建组件

在pages目录下创建WebComponent .ets的Page页面，  页面上放一个Web组件。在Web组件中通过src指定引用的网页路径，controller为组件的控制器，通过controller绑定Web组件，用于调用Web组件的方法。

  1. ​
  2.  
  3. @Entry
  4.  
  5. @Component
  6.  
  7. struct WebComponent {
  8.  
  9.   controller: WebController = new WebController();
  10.  
  11.   build() {
  12.  
  13.     Column() {
  14.  
  15.       Web({ src: 'https://www.douban.com/', controller: this.controller })
  16.  
  17.     }
  18.  
  19.   }
  20.  
  21. }
  22.  
  23. ​

使用Web组件，访问在线网页，需要给应用配置网络权限，

权限列表

访问在线网页时需添加网络权限：ohos.permission.INTERNET

三、设置样式和属性

Web组件的使用需要添加丰富的页面样式和功能属性。设置height、padding样式可为Web组件添加高和内边距，设置fileAccess属性可为Web组件添加文件访问权限，设置javaScriptAccess属性为true使Web组件具有执行JavaScript代码的能力。

  1. ​
  2.  
  3. @Entry
  4.  
  5. @Component
  6.  
  7. struct WebComponent {
  8.  
  9.   fileAccess: boolean = true;
  10.  
  11.   controller: WebController = new WebController();
  12.  
  13.   build() {
  14.  
  15.     Column() {
  16.  
  17.       Text('Hello world!')
  18.  
  19.         .fontSize(20)
  20.  
  21.       Web({ src: 'https://www.douban.com/', controller: this.controller })
  22.  
  23.         // 设置高和内边距
  24.  
  25.         .height(500)
  26.  
  27.         .padding(20)
  28.  
  29.         // 设置文件访问权限和脚本执行权限
  30.  
  31.         .fileAccess(this.fileAccess)
  32.  
  33.         .javaScriptAccess(true)
  34.  
  35.       Text('End')
  36.  
  37.         .fontSize(20)
  38.  
  39.     }
  40.  
  41.   }
  42.  
  43. }
  44.  
  45. ​

四、添加事件和方法

为Web组件添加onProgressChange事件，该事件回调Web引擎加载页面的进度值。将该进度值赋值给Progress组件的value，控制Progress组件的状态。当进度为100%时隐藏Progress组件，Web页面加载完成。

  1. ​
  2. import web_view from '@ohos.web.webview';
  3.  
  4. @Entry
  5.  
  6. @Component
  7.  
  8. struct RemoteWebPage {
  9.  
  10.   @State progress: number = 0
  11.  
  12.   @State hideProgress: boolean = true
  13.  
  14.   controller: web_view.WebviewController = new web_view.WebviewController()
  15.  
  16.   build() {
  17.  
  18.     Column() {
  19.  
  20.       Progress({ total: 100, value: this.progress })
  21.  
  22.         .color('#ff5cea20')
  23.  
  24.         .visibility(this.hideProgress ? Visibility.None : Visibility.Visible)
  25.  
  26.       Web({ src: 'https://www.douban.com/', controller: this.controller })
  27.  
  28.         .height('100%')
  29.  
  30.         // 添加onProgressChange事件
  31.  
  32.         .onProgressChange(e => {
  33.  
  34.           this.progress = e.newProgress
  35.  
  36.          // 当进度100%时，进度条消失
  37.  
  38.           if (this.progress == 100) {
  39.  
  40.             this.hideProgress = true
  41.  
  42.           } else {
  43.  
  44.             this.hideProgress = false
  45.  
  46.           }
  47.  
  48.         })
  49.  
  50.     }.backgroundColor('0xFFFFFF')
  51.  
  52.   }
  53.  
  54. }
  55.  
  56. ​

效果如下：

上面讲的是使用Web组件访问一个在线网页，那怎么加载本地网页文件呢？

五、访问本地Html

先看效果图

实现了一个加载本地网页文件，然后Html网页中调用客户端的方法，进行了一个关闭页面和拉起系统相册的功能，下面开始讲下代码实现。

1、本地html文件创建

在entry/src/main/resources/rawfile目录下，我们创建一个index.html文件

  1. <!-- index.html -->
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html>
  6.  
  7. <body>
  8.  
  9. <p>Hello World</p>
  10.  
  11. <p>这个是来自本地的html文件</p>
  12.  
  13.  
  14.  
  15. <button type="button" onclick="window.jsBridge.closePage()">点击调用原生关闭页面</button>
  16.  
  17. <button type="button" onclick="window.jsBridge.jumpSystemPicture()">点击拉起原生系统相册</button>
  18.  
  19. </body>
  20.  
  21. </html>

2、本地html文件加载

创建一个LocalWebPage页面，加载index.html 文件

  1. import web_view from '@ohos.web.webview';
  2.  
  3.  
  4.  
  5. @Entry
  6.  
  7. @Component
  8.  
  9. struct LocalWebPage {
  10.  
  11.   controller: web_view.WebviewController = new web_view.WebviewController()
  12.  
  13.  
  14.  
  15.   build() {
  16.  
  17.     Column() {
  18.  
  19.       Web({ src: $rawfile("index.html"), controller: this.controller })
  20.  
  21.         .height('100%')
  22.  
  23.     }
  24.  
  25.   }
  26.  
  27. }

这里我们使用$rawfile("index.html")进行本地html文件获取。

2、JS对象注入，Html使用JS对象调用客户端方法

如果需要进行网页跟客户端进行交互，我们需要设置往Html中注入一个JS对象，具体如下：

  1. import web_view from '@ohos.web.webview';
  2.  
  3. import common from '@ohos.app.ability.common';
  4.  
  5. import router from '@ohos.router';
  6.  
  7.  
  8.  
  9. @Entry
  10.  
  11. @Component
  12.  
  13. struct LocalWebPage {
  14.  
  15.   controller: web_view.WebviewController = new web_view.WebviewController()
  16.  
  17.  
  18.  
  19.   jsBridge = {
  20.  
  21.  
  22.  
  23.     jumpSystemPicture() {
  24.  
  25.  
  26.  
  27.       let context = getContext(this) as common.UIAbilityContext;
  28.  
  29.  
  30.  
  31.       let want  = {
  32.  
  33.           "deviceId": "",
  34.  
  35.           "bundleName": "",
  36.  
  37.           "abilityName": "",
  38.  
  39.           "uri": "",
  40.  
  41.           "type": "image/*",
  42.  
  43.           "action": "android.intent.action.GET_CONTENT",
  44.  
  45.           "parameters":{},
  46.  
  47.           "entities":[]
  48.  
  49.  
  50.  
  51.       };
  52.  
  53.       context.startAbility(want);
  54.  
  55.     },
  56.  
  57.  
  58.  
  59.     closePage() {
  60.  
  61.       router.back()
  62.  
  63.     }
  64.  
  65.   }
  66.  
  67.  
  68.  
  69.   build() {
  70.  
  71.     Column() {
  72.  
  73.       Web({ src: $rawfile("index.html"), controller: this.controller })
  74.  
  75.         .javaScriptAccess(true)
  76.  
  77.         .javaScriptProxy({
  78.  
  79.           object: this.jsBridge,
  80.  
  81.           name: "jsBridge",
  82.  
  83.           methodList: ["closePage","jumpSystemPicture"],
  84.  
  85.           controller: this.controller
  86.  
  87.         })
  88.  
  89.         .height('100%')
  90.  
  91.     }
  92.  
  93.   }
  94.  
  95. }

这里我们定义了一个JS对象jsBridge ，定义了两个方法，jumpSystemPicture 和closePage，分别用于html 拉起系统相册和关闭客户端页面，然后使用Web的 javaScriptProxy方法进行JS对象注入设置，具体的配置如上述代码，需要配置对象名称，注入方法。

看下上文中Html 调用JS的代码，比如调用客户端的关闭页面方法，使用

window.jsBridge.closePage() 进行触发。

3、客户端调用本地Html网页中的JS方法

在onPageEnd事件中添加runJavaScript方法。onPageEnd事件是网页加载完成时的回调，runJavaScript方法可以执行HTML中的JavaScript脚本。当页面加载完成时，触发onPageEnd事件，调用HTML文件中的test方法，在控制台打印信息。

  1. import web_view from '@ohos.web.webview';
  2.  
  3. import router from '@ohos.router';
  4.  
  5.  
  6.  
  7. @Entry
  8.  
  9. @Component
  10.  
  11. struct LocalWebPage {
  12.  
  13.   controller: web_view.WebviewController = new web_view.WebviewController()
  14.  
  15.  
  16.  
  17.  
  18.  
  19.   build() {
  20.  
  21.     Column() {
  22.  
  23.       Web({ src: $rawfile("index.html"), controller: this.controller })
  24.  
  25.         .javaScriptAccess(true)
  26.  
  27.       .onPageEnd(e =>{
  28.  
  29.           // test()在index.html中定义
  30.  
  31.           this.controller.runJavaScript('test()');
  32.  
  33.           console.info('url: ', e.url);
  34.  
  35.         })
  36.  
  37.         .height('100%')
  38.  
  39.     }
  40.  
  41.   }
  42.  
  43. }
  1. <!-- index.html -->
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html>
  6.  
  7. <body>
  8.  
  9. <p>Hello World</p>
  10.  
  11. <p>这个是来自本地的html文件</p>
  12.  
  13.  
  14.  
  15. <button type="button" onclick="window.jsBridge.closePage()">点击调用原生关闭页面</button>
  16.  
  17. <button type="button" onclick="window.jsBridge.jumpSystemPicture()">点击拉起原生系统相册</button>
  18.  
  19. </body>
  20.  
  21. <script type="text/javascript">
  22.  
  23.   function test() {
  24.  
  25.       console.info('Ark Web Component');
  26.  
  27.   }
  28.  
  29. </script>
  30.  
  31. </html>

上面方法只提到了调用网页中的JS方法，如果要异步获取JS方法返回的数据，应该怎么操作呢，感兴趣的评论区留意讨论，有时间我再补充讲解下。

本文到此完结，谢谢阅读！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/124460
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号