HarmonyOS NEXT鸿蒙开发入门，ArkWeb基础使用

移动开发 2024-11-01 16:33:14 阅读次数: 0

文章目录

1. 官方文档指南

ArkWeb简介：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-component-overview-V5
详细API文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5

2. ArkWeb简介

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

页面加载：Web组件提供基础的前端页面加载的能力，包括加载网络页面、本地页面、html格式文本数据。
页面交互：Web组件提供丰富的页面交互的方式，包括：设置前端页面深色模式，新窗口中加载页面，位置权限管理，Cookie管理，应用侧使用前端页面JavaScript等能力。

3. Web组件的生命周期

概述

开发者可以使用Web组件加载本地或者在线网页。
Web组件提供了丰富的组件生命周期回调接口，通过这些回调接口，开发者可以感知Web组件的生命周期状态变化，进行相关的业务处理。
Web组件的状态主要包括：Controller绑定到Web组件、网页加载开始、网页加载进度、网页加载结束、页面即将可见等。

Web组件网页正常加载过程中的回调事件

在这里插入图片描述

接口
Web(options: { src: ResourceStr, controller: WebviewController | WebController, renderMode? : RenderMode, incognitoMode? : boolean})

说明
不支持转场动画。
同一页面的多个Web组件，必须绑定不同的WebviewController。

参数：

参数名	参数类型	必填	参数描述
src	ResourceStr	`是`	网页资源地址。如果访问本地资源文件，请使用`$rawfile`或者resource协议。如果加载应用包外沙箱路径的本地资源文件(文件支持html和txt类型)，请使用file://沙箱文件路径。`src不能通过状态变量（例如：@State）动态更改地址，如需更改，请通过loadUrl()重新加载。`
controller	WebviewController^9+	`WebController`	控制器。从API Version 9开始，WebController不再维护，建议使用`WebviewController`替代。
renderMode^12+	RenderMode	否	表示当前Web组件的渲染方式，RenderMode.ASYNC_RENDER表示Web组件自渲染，RenderMode.SYNC_RENDER表示支持Web组件统一渲染能力，默认值RenderMode.ASYNC_RENDER,该模式不支持动态调整。
incognitoMode^11+	boolean	否	表示当前创建的webview是否是隐私模式。true表示创建隐私模式的webview，false表示创建正常模式的webview。默认值：false

4. 加载本地Html

实现步骤：

准备好一个index.html页面，放在项目的rawfile目录下

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<h1>Hello, ArkWeb,加载本地 Index.html</h1>
</body>
</html>

导入模块

import {
    
     webview } from '@kit.ArkWeb';

初始化WebviewController

controller: WebviewController = new webview.WebviewController()

加载本地html

 Web({
    
    
        src: $rawfile('index.html'),
        controller: this.controller
      })

5. 加载在线网页

      //加载在线网页,重要事说三遍
      //访问在线网页时需添加网络权限：ohos.permission.INTERNET
      //访问在线网页时需添加网络权限：ohos.permission.INTERNET
      //访问在线网页时需添加网络权限：ohos.permission.INTERNET
      Web({
    
    
        src: 'https://www.baidu.com/?tn=98012088_10_dg&ch=3',
        controller: this.controller
      })

完整代码

import {
    
     webview } from '@kit.ArkWeb'

@Entry
@Component
struct WebPage {
    
    
  controller: WebviewController = new webview.WebviewController()

  build() {
    
    
    Column() {
    
    
      //加载本地html
      Web({
    
    
        src: $rawfile('index.html'),
        controller: this.controller
      })
      
      //加载在线网页,重要事说三遍
      //访问在线网页时需添加网络权限：ohos.permission.INTERNET
      //访问在线网页时需添加网络权限：ohos.permission.INTERNET
      //访问在线网页时需添加网络权限：ohos.permission.INTERNET
      // Web({
    
    
      //   src: 'https://www.baidu.com/?tn=98012088_10_dg&ch=3',
      //   controller: this.controller
      // })
    }
    .height('100%')
    .width('100%')
  }
}