鸿蒙系统实现 WebView 与 JavaScript 双向通信

m0_59315734

749人浏览 · 2025-08-13 17:32:50

m0_59315734 · 2025-08-13 17:32:50 发布

完整鸿蒙实现代码 (ArkUI)

1. 创建原生能力接口 (实现获取设备型号)

// 1. 设备信息服务 DeviceService.ets
import deviceInfo from '@ohos.deviceInfo';

export class DeviceService {
  // 获取设备型号
  static getPhoneModel(): string {
    return deviceInfo.model;
  }

  // 获取系统版本
  static getOSVersion(): string {
    return deviceInfo.softwareVersion;
  }

  // 获取厂商名称
  static getManufacturer(): string {
    return deviceInfo.manufacturer;
  }
}

2. 创建 WebView 组件并注册 JavaScript 代理

// 2. 主组件 Index.ets
import webView from '@ohos.web.webview';
import { DeviceService } from './DeviceService';

@Entry
@Component
struct Index {
  controller: webView.WebViewController = new webView.WebViewController();

  aboutToAppear() {
    // 启用 JavaScript
    this.controller.setJavaScriptEnabled(true);
    
    // 注册 JavaScript 接口代理
    this.controller.registerJavaScriptProxy({
      // 获取设备型号
      getPhoneModel: () => DeviceService.getPhoneModel(),
      
      // 获取系统版本
      getOSVersion: () => DeviceService.getOSVersion(),
      
      // 获取厂商名称
      getManufacturer: () => DeviceService.getManufacturer()
    }, "nativeAPI"); // 命名空间为 "nativeAPI"
    
    // 设置自定义错误处理
    this.controller.onErrorReceive((err) => {
      console.error("[WebView Error]", JSON.stringify(err));
    });
  }

  build() {
    Column() {
      // 创建 WebView 并加载本地资源
      Web({ 
        src: $rawfile("index.html"), 
        controller: this.controller 
      })
        .width('100%')
        .height('100%')
    }
  }
}

3. HTML/JavaScript 前端调用

<!-- resources/rawfile/index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>鸿蒙设备信息</title>
  <script>
    // 调用原生方法
    function getDeviceInfo() {
      try {
        // 调用鸿蒙原生API
        const model = nativeAPI.getPhoneModel();
        const version = nativeAPI.getOSVersion();
        const manufacturer = nativeAPI.getManufacturer();
        
        // 更新UI显示
        document.getElementById('model').textContent = model;
        document.getElementById('version').textContent = version;
        document.getElementById('manufacturer').textContent = manufacturer;
        
        console.log(`设备信息: ${manufacturer} ${model}, HarmonyOS ${version}`);
      } catch (e) {
        console.error('调用原生API失败:', e);
      }
    }
    
    // 页面加载完成后自动获取设备信息
    window.onload = function() {
      getDeviceInfo();
    };
  </script>
  <style>
    body { 
      font-family: sans-serif;
      padding: 20px; 
    }
    .card {
      background: #f0f7ff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 15px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .info-item {
      margin: 10px 0;
      display: flex;
    }
    .label {
      font-weight: bold;
      width: 100px;
      color: #1a73e8;
    }
    .value {
      flex: 1;
    }
    button {
      background: #1a73e8;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>设备信息</h2>
    
    <div class="info-item">
      <span class="label">设备型号:</span>
      <span id="model" class="value">加载中...</span>
    </div>
    
    <div class="info-item">
      <span class="label">系统版本:</span>
      <span id="version" class="value">加载中...</span>
    </div>
    
    <div class="info-item">
      <span class="label">设备厂商:</span>
      <span id="manufacturer" class="value">加载中...</span>
    </div>
    
    <button onclick="getDeviceInfo()">重新获取设备信息</button>
  </div>
</body>
</html>

分步骤解释一下

1. 获取设备信息 (原生侧)

import deviceInfo from '@ohos.deviceInfo';

export class DeviceService {
  static getPhoneModel(): string {
    return deviceInfo.model; // 获取设备型号
  }
}

鸿蒙系统提供了 @ohos.deviceInfo模块获取设备信息，其中包含：

model：设备型号
softwareVersion：系统版本号
manufacturer：设备厂商名称

2. WebView 配置与 JavaScript 代理注册

controller: webView.WebViewController = new webView.WebViewController();

aboutToAppear() {
  // 1. 启用JavaScript支持
  this.controller.setJavaScriptEnabled(true);
  
  // 2. 注册原生API接口
  this.controller.registerJavaScriptProxy({
    getPhoneModel: () => DeviceService.getPhoneModel(),
    // ...其他方法
  }, "nativeAPI"); // 命名空间为 "nativeAPI"
}

关键点：

setJavaScriptEnabled(true)允许 WebView 执行 JavaScript
registerJavaScriptProxy注册原生API接口到 JavaScript 环境
通过命名空间 "nativeAPI"组织相关功能

3. JavaScript 调用原生接口

<script>
  function getDeviceInfo() {
    // 调用原生API
    const model = nativeAPI.getPhoneModel();
    
    // 更新UI显示
    document.getElementById('model').textContent = model;
  }
</script>

前端调用方式：

通过 nativeAPI.getPhoneModel()调用原生方法
使用 try-catch处理可能的调用错误
更新 UI 显示返回的设备信息

4. 数据传输流程

sequenceDiagram
    participant H5 as HTML/JavaScript
    participant WebView as 鸿蒙WebView
    participant Native as 鸿蒙原生代码

    H5->>WebView: 调用 nativeAPI.getPhoneModel()
    WebView->>Native: 执行注册的原生方法
    Native->>WebView: 返回设备信息字符串
    WebView->>H5: 返回调用结果
    H5->>H5: 更新UI显示设备信息

功能扩展建议

添加更多设备信息：

// 获取设备唯一ID
static getDeviceId(): string {
  return deviceInfo.udid;
}

// 获取设备名称
static getDeviceName(): string {
  return deviceInfo.product;
}

安全增强：

// 在调用原生方法前验证来源
private static verifyOrigin(): boolean {
  const origin = this.controller.getWebOrigin();
  return origin === 'file://' || origin.startsWith('https://yourdomain.com');
}

异步调用支持：

// JavaScript调用异步方法
nativeAPI.getBatteryLevel().then(level => {
  console.log(`电池电量: ${level}%`);
});

关键区别：鸿蒙 vs Android

特性	Android (dsBridge)	HarmonyOS
接口注册	`addJavascriptObject()`	`registerJavaScriptProxy()`
JavaScript调用	`dsBridge.call()`	直接通过命名空间访问
设备信息获取	`Build.MODEL`	`@ohos.deviceInfo`模块
WebView控制器	`DWebView`对象	`WebViewController`
框架支持	第三方 dsBridge 库	官方 WebView 组件