HarmonyOS应用开发Web组件基本属性应用和事件

HarmonyOS开发者2023-09-15 18:04

一、Web组件概述

Web组件用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力。

● 页面加载：Web组件提供基础的前端页面加载的能力，包括加载网络页面、本地页面、Html格式文本数据。

● 页面交互：Web组件提供丰富的页面交互的方式，包括：设置前端页面深色模式，新窗口中加载页面，位置权限管理，Cookie管理，应用侧使用前端页面JavaScript等能力。

● 页面调试：Web组件支持使用Devtools工具调试前端页面。

下面通过常见使用场景举例，来具体介绍Web组件功能特性。

二、使用Web组件加载页面

页面加载是Web组件的基本功能。根据页面加载数据来源可以分为三种常用场景，包括加载网络页面、加载本地页面、加载HTML格式的富文本数据。

页面加载过程中，若涉及网络资源获取，需要配置ohos.permission.INTERNET网络访问权限。

加载网络页面

开发者可以在Web组件创建的时候指定默认加载的网络页面 。在默认页面加载完成后，如果开发者需要变更此Web组件显示的网络页面，可以通过调用loadUrl()接口加载指定网络网页。

在下面的示例中，在Web组件加载完"www.example.com"页面后，开发者可通过loadUrl接口将此Web组件显示页面变更为"www.example1.com"。

typescript 复制代码 
// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadUrl，跳转到www.example1.com
            this.webviewController.loadUrl('www.example1.com');
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      // 组件创建时，加载www.example.com
      Web({ src: 'www.example.com', controller: this.webviewController})
    }
  }
}

加载本地页面

将本地页面文件放在应用的rawfile目录下，开发者可以在Web组件创建的时候指定默认加载的本地页面 ，并且加载完成后可通过调用loadUrl()接口变更当前Web组件的页面。

在下面的示例中展示加载本地页面文件的方法：

● 将资源文件放置在应用的resources/rawfile目录下。图1 资源文件路径

● 应用侧代码

typescript 复制代码 
// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadUrl，跳转到local1.html
            this.webviewController.loadUrl($rawfile("local1.html"));
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      // 组件创建时，通过$rawfile加载本地文件local.html
      Web({ src: $rawfile("local.html"), controller: this.webviewController })
    }
  }
}

● local.html页面代码。

xml 复制代码 
<!-- local.html -->
<!DOCTYPE html>
<html>
  <body>
    <p>Hello World</p>
  </body>
</html>

加载HTML格式的文本数据

Web组件可以通过loadData接口实现加载HTML格式的文本数据。当开发者不需要加载整个页面，只需要显示一些页面片段时，可通过此功能来快速加载页面。

typescript 复制代码 
// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadData，加载HTML格式的文本数据
            this.controller.loadData(
              '<html><body bgcolor="white">Source:<pre>source</pre></body></html>',
              'text/html',
              'UTF-8'
            );
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      // 组件创建时，加载www.example.com
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

三、设置基本属性和事件

设置深色模式

Web组件支持对前端页面进行深色模式配置。

● 通过darkMode()接口可以配置不同的深色模式，WebDarkMode.Off模式表示关闭深色模式。WebDarkMode.On表示开启深色模式，并且深色模式跟随前端页面。WebDarkMode.Auto表示开启深色模式，并且深色模式跟随系统。在下面的示例中, 通过darkMode()接口将页面深色模式配置为跟随系统。

typescript 复制代码 
// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State mode: WebDarkMode = WebDarkMode.Auto;
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .darkMode(this.mode)
    }
  }
}

● 通过forceDarkAccess()接口可将前端页面强制配置深色模式，且深色模式不跟随前端页面和系统。配置该模式时候，需要将深色模式配置成WebDarkMode.On。在下面的示例中, 通过forceDarkAccess()接口将页面强制配置为深色模式。

typescript 复制代码 
// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State mode: WebDarkMode = WebDarkMode.On;
  @State access: boolean = true;
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .darkMode(this.mode)
        .forceDarkAccess(this.access)
    }
  }
}

上传文件

Web组件支持前端页面选择文件上传功能，应用开发者可以使用onShowFileSelector()接口来处理前端页面文件上传的请求。

下面的示例中，当用户在前端页面点击文件上传按钮，应用侧在onShowFileSelector()接口中收到文件上传请求，在此接口中开发者将上传的本地文件路径设置给前端页面。

● 应用侧代码。

typescript 复制代码 
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      // 加载本地local.html页面
      Web({ src: $rawfile('local.html'), controller: this.controller })
        .onShowFileSelector((event) => {
            // 开发者设置要上传的文件路径
           let fileList: Array<string> = [
              'xxx/test.png',
           ]
           event.result.handleFileList(fileList)
           return true;
        })
    }
  }
}

● local.html页面代码。

xml 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>

<body>
// 点击文件上传按钮
<input type="file" value="file"></br>
</body>
</html>

在新窗口中打开页面

Web组件提供了在新窗口打开页面的能力，开发者可以通过multiWindowAccess()接口来设置是否允许网页在新窗口打开。当有新窗口打开时，应用侧会在onWindowNew()接口中收到Web组件新窗口事件，开发者需要在此接口事件中，新建窗口来处理Web组件窗口请求。

说明

● 如果开发者在onWindowNew()接口通知中不需要打开新窗口，需要将ControllerHandler.setWebController()接口返回值设置成null。

如下面的本地示例，当用户点击"新窗口中打开网页"按钮时，应用侧会在onWindowNew()接口中收到Web组件新窗口事件。

● 应用侧代码。

typescript 复制代码 
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Web({ src:$rawfile("window.html"), controller: this.controller })
      .multiWindowAccess(true)
      .onWindowNew((event) => {
        console.info("onWindowNew...");
        var popController: web_webview.WebviewController = new web_webview.WebviewController();
        // 开发者需要在此处新建窗口,跟popController关联，并且将popController返回给Web组件。如果不需要打开新窗口请将返回值设置为event.handler.setWebController(null);
        event.handler.setWebController(popController);
      })
    }
  }
}

● window.html页面代码。

xml 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WindowEvent</title>
</head>

<body>
<input type="button" value="新窗口中打开网页" onclick="OpenNewWindow()">
<script type="text/javascript">
    function OpenNewWindow()
    {
        let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollvars=no");
        if (openedWindow) {
            openedWindow.document.body.write("<p>这是我的窗口</p>");
        } else {
            log.innerHTML = "window.open failed";
        }
    }
</script>
</body>
</html>

管理位置权限

Web组件提供位置权限管理能力。开发者可以通过onGeolocationShow()接口对某个网站进行位置权限管理。Web组件根据接口响应结果，决定是否赋予前端页面权限。获取设备位置，需要开发者配置ohos.permission.LOCATION权限。

在下面的示例中，用户点击前端页面"获取位置"按钮，Web组件通过弹窗的形式通知应用侧位置权限请求消息，示例代码如下：

● 前端页面代码。

xml 复制代码 
<!DOCTYPE html>
<html>
<body>
<p id="locationInfo">位置信息</p>
<button onclick="getLocation()">获取位置</button>
<script>
var locationInfo=document.getElementById("locationInfo");
function getLocation(){
  if (navigator.geolocation) {
    <!-- 前端页面访问设备地理位置 -->
    navigator.geolocation.getCurrentPosition(showPosition);
  }
}
function showPosition(position){
  locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>

● 应用代码。

typescript 复制代码 
// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Web({ src:$rawfile('getLocation.html'), controller:this.controller })
        .geolocationAccess(true)
        .onGeolocationShow((event) => {  // 地理位置权限申请通知
          AlertDialog.show({
            title: '位置权限请求',
            message: '是否允许获取位置信息',
            primaryButton: {
              value: 'cancel',
              action: () => {
                event.geolocation.invoke(event.origin, false, false);   // 不允许此站点地理位置权限请求
              }
            },
            secondaryButton: {
              value: 'ok',
              action: () => {
                event.geolocation.invoke(event.origin, true, false);    // 允许此站点地理位置权限请求
              }
            },
            cancel: () => {
              event.geolocation.invoke(event.origin, false, false);   // 不允许此站点地理位置权限请求
            }
          })
        })
    }
  }
}
相关推荐
李洋-蛟龙腾飞公司4 小时前
HarmonyOS Next 应用元服务开发-应用接续动态配置迁移按需迁移页面
华为·harmonyos
JasonYin~4 小时前
HarmonyOS NEXT 实战之元服务：静态案例效果---查看手机历史记录
华为·harmonyos
鸿蒙程序媛4 小时前
2024最新鸿蒙开发面试题合集（二）-HarmonyOS NEXT Release（API 12 Release）
harmonyos·harmonyos面试题
No Silver Bullet5 小时前
HarmonyOS NEXT开发进阶（五）：装饰器讲解
华为·harmonyos
塞尔维亚大汉7 小时前
【OpenHarmony】 鸿蒙 UI开发之MultiType
harmonyos·arkui
yangyj9 小时前
浅谈鸿蒙应用 Http Axios 请求组件泛型封装，支持 UI 响应式更新
harmonyos
华海渡10 小时前
HarmonyOS初步探索
华为·harmonyos
SuperHeroWu710 小时前
【HarmonyOS】鸿蒙将资源文件夹Resource-RawFile下的文件存放到沙箱目录下
harmonyos·沙箱·resource·保存·本地·rawfile·拷贝
塞尔维亚大汉10 小时前
【OpenHarmony】 鸿蒙 UI开发之shimmer-ohos
harmonyos·arkui
JasonYin~11 小时前
HarmonyOS NEXT 实战之元服务：静态案例效果---妙语集语
harmonyos
热门推荐
01【数学建模】建筑工地开工问题02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03玄机平台应急响应—webshell查杀04液体神经网络：LNN是个啥概念？05优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间06HCIA-datacom数通题库和录播视频资料07Qt | 开发工具(top1)08【一文读懂】NTN（非地面网络）技术介绍09支付宝短视频平台创作分成激励项目10Apache SeaTunnel 集群部署详细教程