HarmonyOS鸿蒙Next中Web组件调用应用侧代码示例

HarmonyOS鸿蒙Next中Web组件调用应用侧代码示例 【问题描述】

在混合应用开发中，Web页面与系统功能的高效交互是一个核心需求，要求：

• Web页面调用系统功能（如获取设备信息、调用系统API）；
• 系统代码回调Web页面；
• 建立稳定可靠的双向通信机制。

【背景知识】

在HarmonyOS系统中，传统的JSBridge实现方式被转化为JSProxy机制，这一变化带来了一些技术上的挑战和问题。

• API兼容性问题
  • 传统JSBridge方法在HarmonyOS中可能无法直接使用
  • 需要重写部分桥接逻辑以适应JSProxy机制
• 通信机制差异
  • JSBridge通常基于URL Scheme或iframe方式
  • JSProxy采用更高效的Native绑定方式
  • 底层机制变化可能导致原有通信模式失效
• 安全限制增强
  • HarmonyOS的JSProxy对跨域访问有更严格限制
  • 需要重新配置安全策略
• 调试难度增加
  • JSProxy的调用栈不如传统JSBridge直观
  • 错误追踪和调试工具支持不足

【解决方案】

1. 声明注入的系统侧对象：

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

/**
 * 系统侧暴露给Web的JSBridge对象
 * @property {string} name - 用户名称
 * @property {number} age - 用户年龄
 */
class JSBridge {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  
  /**
   * 测试方法示例
   */
  helloWorld() {
    console.log("JSBridge连接成功");
  }

  /**
   * 获取用户名
   * @returns {string} 当前用户名
   */
  getUserName(): string {
    return this.name;
  }

  /**
   * 打印对象信息
   */
  toString(): void {
    console.log(`JSBridge实例: name=${this.name}, age=${this.age}`);
  }
}

1. 注册JavaScript代理对象，推荐两种注册方式：

   • 方式一：使用registerJavaScriptProxy（推荐）

@Entry
@Component
struct WebComponent {
  private controller: webview.WebviewController = new webview.WebviewController();
  private jsBridge: JSBridge = new JSBridge("Harmony", 3);

  build() {
    Column() {
      Web({
        src: "https://example.com", // 替换为实际H5页面地址
        controller: this.controller
      })
      .onControllerAttached(() => {
        // 注册JSBridge对象
        this.controller.registerJavaScriptProxy(
          this.jsBridge,         // 要注入的对象
          'HarmonyBridge',       // 在H5中的全局对象名
          ['helloWorld', 'getUserName'] // 暴露的方法列表
        );
        
        console.log('JSBridge注册完成');
      })
    }
    .width('100%')
    .height('100%')
  }
}

*   方式二：使用javaScriptProxy（仅限单个对象）

Web({
  src: "https://example.com",
  controller: this.controller
})
.javaScriptProxy({
  object: this.jsBridge,
  name: 'HarmonyBridge',
  methodList: ['helloWorld', 'getUserName']
})

1. Web侧调用方式

// 调用系统方法
try {
  // 简单方法调用
  HarmonyBridge.helloWorld();
  
  // 获取返回值
  const userName = HarmonyBridge.getUserName();
  console.log('获取到用户名:', userName);
  
} catch (error) {
  console.error('JSBridge调用失败:', error);
}

// 安全调用检查
if (window.HarmonyBridge && typeof HarmonyBridge.getUserName === 'function') {
  // 安全调用逻辑
}

通过以上方案，可以实现HarmonyOS应用与Web页面之间的高效、稳定通信，满足混合开发的各类需求。