鸿蒙Next h5混合开发如何获取原生数据

在鸿蒙Next的H5混合开发中，如何从原生侧获取数据？目前尝试通过JSBridge调用原生接口，但回调数据始终为空。是否有特定的API或配置需要注意？例如获取设备信息、用户权限等场景该如何实现？官方文档中未找到明确示例，求具体实现方案或代码片段。

2 回复

鸿蒙Next里，H5想拿原生数据？简单！用@ohos.web.webview的postMessage()，像传纸条一样和原生层聊天。JS发消息，原生层用onMessage()接住，数据到手！记得加dataAbility权限，不然会被系统“已读不回”哦～

更多关于鸿蒙Next h5混合开发如何获取原生数据的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中进行H5混合开发时，可以通过Web组件与JavaScript交互来获取原生数据。以下是主要方法：

1. 使用runJavaScript方法

在ArkTS中通过Web组件调用JavaScript：

// ArkTS端
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  
  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .onPageEnd(() => {
          // 调用JavaScript获取数据
          this.controller.runJavaScript('getUserData()')
            .then((data: string) => {
              console.info('获取到的数据: ' + data);
            })
            .catch((error: Error) => {
              console.error('执行JavaScript失败: ' + error.message);
            });
        })
    }
  }
}

2. 使用JavaScriptBridge

创建JavaScript桥接：

// ArkTS端 - 注册JavaScript接口
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  
  aboutToAppear() {
    // 注册JavaScript调用接口
    this.controller.registerJavaScriptProxy({
      getDeviceInfo: this.getDeviceInfo.bind(this),
      getUserData: this.getUserData.bind(this)
    }, 'nativeBridge');
  }
  
  // 原生方法
  getDeviceInfo(): string {
    return JSON.stringify({
      deviceModel: 'HarmonyOS Device',
      systemVersion: '4.0.0'
    });
  }
  
  getUserData(): string {
    return JSON.stringify({
      userId: '12345',
      userName: '用户'
    });
  }
}

在H5页面中调用：

<!-- H5端 -->
<script>
// 调用原生方法获取数据
function getNativeData() {
  if (window.nativeBridge) {
    const deviceInfo = nativeBridge.getDeviceInfo();
    const userData = nativeBridge.getUserData();
    
    console.log('设备信息:', JSON.parse(deviceInfo));
    console.log('用户数据:', JSON.parse(userData));
    return userData;
  }
  return null;
}
</script>

3. 通过URL Scheme传递数据

// ArkTS端 - 监听URL变化
Web({ src: $rawfile('index.html'), controller: this.controller })
  .onUrlLoadIntercept((event) => {
    if (event.url.startsWith('harmony://getdata')) {
      // 解析URL参数并返回数据
      const data = this.processRequest(event.url);
      return { url: `javascript:handleNativeData('${data}')` };
    }
    return null;
  })

注意事项

  1. 安全性：验证JavaScript调用的来源和参数
  2. 数据类型：确保数据在ArkTS和JavaScript间的正确序列化
  3. 异步处理：处理好异步调用的时序问题

推荐使用JavaScriptBridge方式，它提供了更好的类型安全和错误处理机制。

回到顶部