一、引言

在 Harmony OS NEXT / 5.0 / API 12+ 版本的开发领域中，混合式开发为应用带来了更多可能性。本文将深入探讨如何借助 ArkTS 框架实现 H5 页面调用以及静态页面与本地数据的交互，从实现效果、技术栈、源码到详细分析，全方位呈现混合式开发的魅力。

二、适用版本说明

本文所涉及的混合式开发内容专门适配 Harmony OS NEXT / 5.0 / API 12+ 版本。该版本提供了丰富的 API 和工具，如 @kit.ArkUI、@ohos.web.webview 等，为实现混合式开发提供了坚实基础。

三、实现效果

        1、H5段混合式开发效果图

      ​                                            ​​​​​​​        

        2、静态页面与本地数据交互效果图

四、技术栈分析

本次开发主要基于 ArkTS 语言和 ArkUI 框架，利用 @ohos.web.webview 进行 H5 页面的加载与交互，借助 @kit.ArkTS 中的工具进行本地资源的读取和处理。这种技术组合就像是一个 “超级工具箱”，每个工具都在混合式开发中发挥着独特作用。

五、资源源码详解

首页静态页面

import { buildDialog } from './buildDialog';
import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index {
    dialog = new CustomDialogController({
        builder: buildDialog(),
        customStyle: true,
        alignment: DialogAlignment.Center
    });

    build() {
        Stack({ alignContent: Alignment.Center }) {
            Column({ space: 30 }) {
                Text('欢迎来到 ArkTS 页面')
                   .fontSize(30)
                   .fontWeight(FontWeight.Bold)
                   .fontColor('#333')
                   .margin({ top: 80 });

                Text('这是一个简单的静态页面示例，为你展示基础的混合式开发(调用 H5 端页面，以及从本地调入数据)。')
                   .fontSize(18)
                   .fontColor('#666')
                   .lineHeight(28)
                   .width('80%')
                   .textAlign(TextAlign.Center);

                Button('混合开发')
                   .styleButtom()
                   .onClick(() => {
                        router.pushUrl({
                            url: 'pages/testPage'
                        });
                    });
                Button('本地传入数据数据测试')
                   .styleButtom()
                   .onClick(() => {
                        this.dialog.open();
                    });
            }
           .width('90%')
           .padding({ top: 40, bottom: 40, left: 20, right: 20 })
           .backgroundColor(Color.White)
           .borderRadius(16)
           .shadow({
                offsetX: 0,
                offsetY: 8,
                radius: 24,
                color: '#0000001a'
            })
           .alignItems(HorizontalAlign.Center);
        }
       .width('100%')
       .height('100%')
       .backgroundColor('#f4f4f9');
    }
}

@Extend(Button)
function styleButtom() {
   .width(220)
   .height(55)
   .fontSize(20)
   .fontWeight(FontWeight.Medium)
   .backgroundColor('#007aff')
   .fontColor(Color.White)
   .borderRadius(28)
   .shadow({
        offsetX: 0,
        offsetY: 4,
        radius: 8,
        color: '#007aff40'
    });
}

这段代码构建了应用的首页，是整个应用的 “入口大厅”。

• 引入模块：导入 buildDialog 和 router，为页面添加本地数据交互弹窗和页面跳转功能。
• CustomDialogController：创建一个自定义弹窗控制器 dialog，用于展示本地数据交互页面。
• build 方法：
  • 布局构建：通过 Stack 和 Column 构建页面布局，展示欢迎信息、功能描述以及两个按钮。
  • 按钮交互：“混合开发” 按钮点击后通过 router.pushUrl 跳转到 testPage，就像给用户提供了一把打开混合开发 “房间” 的钥匙；“本地传入数据数据测试” 按钮点击后打开弹窗，用于获取和展示本地数据。
• @Extend(Button)：扩展 Button 组件样式，为按钮穿上了统一的 “漂亮外衣”，使其在页面上更加醒目和美观。

混合开发页面

import webview from '@ohos.web.webview';

@Entry
@Component
struct test {
    controller = new webview.WebviewController();

    build() {
        Column() {
            Web({
                src: "https://m.jd.com",
                controller: this.controller
            })
               .width('100%')
               .height('100%')
               .onPageEnd(() => {
                    this.controller.runJavaScript("alert('Hello World')");
                });
        }
       .width('100%')
       .height('100%')
       .backgroundColor(Color.Pink);
    }
}

该页面是混合式开发的核心部分，像是一个连接 Harmony OS 和 H5 世界的 “桥梁”。

• 引入模块：导入 @ohos.web.webview，这是连接 H5 页面的关键 “桥梁工具”。
• WebviewController：创建 WebviewController 实例 controller，用于控制 Web 视图。
• build 方法：
  • Web 组件：通过 Web 组件加载京东移动端页面 https://m.jd.com，并将 controller 与之关联。这就像在 Harmony OS 应用中搭建了一个通往京东 H5 页面的 “通道”。
  • 页面结束事件：在页面加载结束时，通过 controller.runJavaScript 执行 JavaScript 代码，弹出 “Hello World” 提示框，展示了与 H5 页面的交互能力。

本地资源与静态交互页面

import { util } from "@kit.ArkTS";

@CustomDialog
export struct buildDialog {
    controller: CustomDialogController;
    @State word: string = '';

    initWord() {
        const ctx = getContext(this);
        const res = ctx.resourceManager.getRawFileContentSync('test.json');
        const TextDoCode = new util.TextDecoder();
        this.word = TextDoCode.decodeToString(res);
    }

    build() {
        Column() {
            Button('获取本地数据')
               .onClick(() => {
                    this.initWord();
                });
            Scroll() {
                Text(JSON.stringify(this.word, null, 2))
                   .width('100%')
                   .height('100%');
            }
           .width('100%')
           .height('100%')
           .backgroundColor(Color.White);
        }
       .width('100%')
       .height('60%')
       .backgroundColor(Color.Pink);
    }
}

此页面实现了本地资源与静态页面的交互，好比是应用内部的 “数据处理小作坊”。

• 引入模块：导入 @kit.ArkTS 中的 util 工具，用于解码文件内容。
• CustomDialog：定义一个自定义弹窗组件 buildDialog。
• initWord 方法：
  • 获取上下文：使用 getContext 获取上下文，就像找到了应用的 “大本营”，为后续操作提供环境支持。
  • 读取本地文件：通过 resourceManager.getRawFileContentSync 读取本地 test.json 文件内容。
  • 解码文件内容：利用 util.TextDecoder 将文件内容解码为字符串，并存储到 word 变量中。
• build 方法：
  • 按钮交互：“获取本地数据” 按钮点击后调用 initWord 方法获取本地数据。
  • 数据展示：通过 Scroll 和 Text 组件将获取到的数据展示在页面上。

六、详细代码分析

1. 混合开发详细代码分析 ——Web 组件（混合式开发）：
   • WebView 组件功能：在混合开发中，WebView 组件就像一个 “万能翻译器”，能够直接调用已有的静态资源 Har 包，通过其 API 加载 H5 页面，并支持与 JavaScript 的交互。这使得 Harmony OS 应用能够轻松整合丰富的 H5 资源，拓展应用功能。
   • 常用方法：
     • runJavaScript()：执行 JS 代码，就像给 H5 页面发送一条 “指令”，让其执行特定操作，如在上述代码中弹出提示框。
     • refresh()：重新加载页面，类似于浏览器的刷新功能，让页面内容更新。
     • stop()：停止加载，及时终止页面加载过程，避免不必要的资源消耗。
     • clearHistory()：清除浏览历史，就像清理浏览记录，保持页面的 “整洁”。
     • loadUrl()：加载指定 URL，引导 WebView 前往特定的 H5 页面。
     • stopLoading()：停止当前加载，与 stop() 类似，及时中断加载操作。
   • 实际开发拓展：在实际开发中，不仅可以实现简单的页面跳转，还能通过 H5 端暴露方法，在 Harmony 中调用（如 onPageEnd 事件），实现更复杂的交互。同时，也可以封装原生功能供 H5 端调用，如请求扫码、保存图片等，进一步拓展应用的功能边界。
2. 静态页面与本地数据交互详细分析：
   • 数据获取流程：首先通过 getContext 获取上下文，这是访问应用资源的 “钥匙”。然后利用 resourceManager.getRawFileContentSync 读取本地文件，就像从 “数据仓库” 中取出文件。接着使用 util.TextDecoder 将文件内容解码为字符串，最后存储到动态数据变量中。
   • 功能核心与拓展：该功能的核心是通过资源管理工具读取本地数据，实现动态展示和交互。在实际开发中，拿到数据后还需进一步分析和处理数据的类型、格式，以便更好地应用数据，如上传服务器、进行数据可视化等，为应用开发提供更多可能性。

七、总结

本次实践借助 ArkTS 框架成功实现了混合式开发的典型场景，具有以下核心价值：

1. 开发效率提升：混合式开发结合了 H5 的灵活性和原生应用的性能优势，通过复用 H5 页面资源，减少了重复开发工作，大大提高了开发效率。就像搭积木一样，利用已有的 H5 “积木块” 快速搭建应用功能。
2. 技术深度解析：深入剖析了 Harmony OS 中 WebView 组件与本地资源读取的技术细节，帮助开发者更好地理解和掌握混合式开发技术，为开发更复杂的应用奠定基础。这就像是打开了一扇技术大门，让开发者看到了混合式开发内部的 “奥秘”。
3. 后续扩展方向：基于本次实践，可以进一步拓展应用功能，如优化 H5 与原生应用的交互逻辑，增强本地数据处理能力，实现更丰富的数据展示和业务逻辑。未来，混合式开发有望在更多领域发挥重要作用，为 Harmony OS 应用生态增添更多精彩。

关于 Harmony OS 混合式开发的更多技巧和实践经验，我会在后续博客中持续分享，感兴趣的话欢迎关注。对于本文介绍的混合式开发内容，你有什么疑问或者想法吗？欢迎随时交流。