【鸿蒙实战开发】混合开发-web组件入门和实战

一、混合开发的背景和好处

混合开发（Hybrid Development）是一种结合原生应用和Web应用的开发模式，旨在同时利用两者的优势。随着移动应用需求的多样化和复杂化，单一的开发方式往往难以满足所有需求。混合开发提供了一种灵活、高效的解决方案，特别是在以下方面具有显著的优势：

1. 跨平台兼容：混合开发允许开发者编写一次代码，并在多个平台（如Android、iOS、HarmonyOS等）上运行。这大大减少了开发和维护成本。

2. 快速迭代：Web技术（如HTML、CSS、JavaScript）的快速开发和部署能力，使得混合应用可以更快地进行迭代和更新。

3. 丰富的Web生态：借助丰富的Web生态系统，开发者可以利用大量现有的Web库和框架，快速实现复杂功能。

4. 原生性能：通过将关键功能部分使用原生代码实现，混合应用可以在保证性能的同时，享受Web开发的灵活性。

二、混合开发应用的结构

为了更好地理解混合开发的概念，以下是一张示意图，展示了混合开发架构中原生代码与Web代码的结合。

图中展示了混合开发应用的结构，其中包括：

• 原生层（Native Layer）：包括操作系统（如HarmonyOS）、设备硬件和原生API，提供高性能和底层功能支持。
• Web层（Web Layer）：包括HTML、CSS、JavaScript等Web技术，负责应用的界面和逻辑部分。
• 桥接层（Bridge Layer）：连接原生层和Web层，允许两者之间的数据和功能交互。

通过这种架构，开发者可以在Web层快速构建界面和业务逻辑，同时利用原生层提供的高性能和丰富功能，实现混合开发的最佳效果。

在HarmonyOS NEXT Developer Beta1版本中，ArkTS 提供了强大的混合开发能力，允许开发者在应用中嵌入 Web 组件，利用 Web 技术构建应用的一部分。接下来，我将介绍如何在 ArkTS 中使用 Web 组件。

三、ArkTS Web 组件教程

一、语法说明

在 ArkTS 中，混合开发主要通过 Web 组件和 WebView API 来实现。通过这些工具，可以加载和显示网页内容，进行页面控制和数据交互。

1. 基本语法

Web 组件用于在界面中嵌入一个网页浏览器。它的常用属性包括：

• src：指定要加载的网页资源地址。
• controller：webview控制器。

src: ResourceStr = 'https://m.jd.com'

Web({ src: this.src, controller: this.controller })

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

2. 事件处理

Web 组件支持多种事件，如：

• onPageBegin：页面开始加载时触发。
• onPageEnd：页面加载完成时触发。
• onErrorReceive：页面加载出错时触发。
• onTitleReceive：网页document标题更改时触发该回调。
• onProgressChange：网页加载进度变化时触发该回调。
• onRefreshAccessedHistory：加载网页页面完成时触发该回调，用于应用更新其访问的历史链接。
• onAppear：组件挂载显示后触发此回调（通用事件）。

      Web({ src: this.src, controller: this.controller })
          .onProgressChange((data) => {
          })
          .onPageBegin(() => {
          })
          .onPageEnd(() => {
          })
          .onErrorReceive((e) => {
          })
          .onTitleReceive((data) => {
          })
          .onRefreshAccessedHistory(() => {
          })
          .onAppear(() => {
          })

3. WebView API

WebView API 提供了一组方法和属性，用于更细粒度地控制 Web 组件，如加载URL、执行JavaScript代码等。

import { webview } from '@kit.ArkWeb'

// 1\. 创建 WebView 实例
controller = new webview.WebviewController()

// 2\. 调用WebView 实例 api 进行控制
run() {
  // 动态加载页面
  this.controller.loadUrl('url')
  // 注入 js 对象
  this.controller.registerJavaScriptProxy
  // ...
}

Web({ src: this.src, controller: this.controller })

四、实战案例

下面是一个完整的小案例，展示如何在 ArkTS 中使用 Web 组件加载网页、处理页面事件，并与网页进行交互。

开发环境

DevEco Studio NEXT Developer Beta1
构建版本：5.0.3.403, built on June 20, 2024
Runtime version: 17.0.10+1-b1087.17 aarch64

1. 新建工程

主要目录结构：

|-- entry
|   |-- src
|   |   |-- main
|   |   |   |-- ets
|   |   |   |   |-- pages
|   |   |   |   |   |-- Index.ets（案例代码）
|-- module.json5

2. 配置权限

在 module.json5 中配置网络权限：</