HarmonyOS NEXT WebView 拉起 H5 页面与权限配置实战

2. WebView 核心组件封装

封装一体化 WebView 组件，集成 H5 加载、权限申请、调试功能，支持状态同步：

import { webview } from '@kit.ArkWeb';
import { common, Permissions } from '@kit.AbilityKit';
import { requestSensitivePermissions } from '../utils/Utils_h5'; // 导入上述工具函数

@Component
export struct WebViewH5Component {
  // 接收父组件参数
  @Prop h5Url: string;
  @Link isShowWebView: boolean;

  // WebView 控制器实例
  private webController: webview.WebviewController = new webview.WebviewController();
  
  // 需申请的敏感权限列表（根据 H5 功能调整）
  private sensitivePermissions: Permissions[] = ['ohos.permission.CAMERA', 'ohos.permission.MICROPHONE'];
  context: Context = this.getUIContext().getHostContext() as common.UIAbilityContext;

  // 组件即将显示：初始化调试、申请权限
  async aboutToAppear() {
    // 1. 启用 WebView 调试（Chrome DevTools 可访问）
    webview.WebviewController.setWebDebuggingAccess(true);
    console.info('WebView 调试已启用，Chrome 访问：chrome://inspect');
    
    // 2. 检查并申请敏感权限（摄像头/麦克风）
    await requestSensitivePermissions(this.context, this.sensitivePermissions);
  }

  build() {
    Column({ space: 0 }) {
      // 1. 导航栏：标题 + 关闭按钮
      Row({ space: 10 }) {
        Text('H5 应用').fontSize(18).fontWeight(FontWeight.Bold);
        Button('关闭')
          .width(80)
          .height(30)
          .onClick(() => { this.isShowWebView = false; });
      }
      .padding(16)
      .width('100%')
      .backgroundColor('#f5f5f5');

      // 2. Web 组件：加载 H5 并配置核心功能
      Web({ src: this.h5Url, controller: this.webController })
        .width('100%')
        .height('100%')
        .domStorageAccess(true) // 开启 localStorage/sessionStorage
        .databaseAccess(true)   // 开启 Web SQL 数据库
        .fileAccess(true)       // 开启文件访问
        // 允许文件 URL 跨域访问
        // 3. 监听 H5 权限请求：传递系统权限结果
        .onPermissionRequest((event) => {
          if (!event) return;
          this.getUIContext().showAlertDialog({
            title: 'H5 权限请求',
            message: '当前 H5 应用需要访问摄像头/麦克风，是否允许？',
            primaryButton: {
              value: '拒绝',
              action: () => {
                event.request.deny(); // 拒绝 H5 权限
                console.info('用户拒绝 H5 权限请求');
              }
            },
            secondaryButton: {
              value: '同意',
              fontColor: '#007AFF',
              action: () => {
                // 授予 H5 请求的所有资源权限
                event.request.grant(event.request.getAccessibleResource());
                console.info('用户同意 H5 权限请求');
              }
            },
            cancel: () => event.request.deny() // 取消即拒绝
          });
        });
    }
    .width('100%')
    .height('100%');
  }
}

3. 权限配置文件

按鸿蒙规范配置所有必需权限，确保系统正常识别：

{
  "module": {
    "package": "com.example.webviewh5",
    "name": ".entry",
    "mainAbility": "EntryAbility",
    "requestPermissions": [
      // 1. 基础权限：H5 加载必需
      {
        "name": "ohos.permission.INTERNET",
        "reason": "$string:internet_reason",
        "usedScene": {
          "abilities": ["EntryAbility"],
          "when": "always"
        }
      },
      // 2. 敏感权限：H5 音视频功能必需
      {
        "name": "ohos.permission.CAMERA",
        "reason": "$string:camera_reason",
        "usedScene": {
          "abilities": ["EntryAbility"],
          "when": "always"
        }
      },
      {
        "name": "ohos.permission.MICROPHONE",
        "reason": "$string:microphone_reason",
        "usedScene": {
          "abilities": ["EntryAbility"],
          "when": "always"
        }
      }
    ]
  }
}

4. 父组件调用示例

通过状态管理控制 WebView 组件显隐，同步 H5 加载结果：

import { WebViewH5Component } from '../components/WebViewH5Component';

@Entry
@Component
struct MainPage {
  // 控制 WebView 显隐
  @State isShowWebView: boolean = false;
  
  // H5 应用地址（替换为实际地址）
  private targetH5Url: string = 'https://edu.huaweicloud.com/roadmap/harmonyoslearning.html';

  onClose() {
    this.isShowWebView = false;
  }

  build() {
    Column({ space: 20 }) {
      // 触发按钮：打开 H5 应用
      Button('打开 H5 应用')
        .width(200)
        .height(40)
        .visibility(!this.isShowWebView ? Visibility.Visible : Visibility.Hidden)
        .onClick(() => {
          this.isShowWebView = true;
        });

      // 加载 WebView 组件（条件渲染）
      if (this.isShowWebView) {
        WebViewH5Component({
          h5Url: this.targetH5Url,
          isShowWebView: this.isShowWebView,
        });
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}

四、总结

通过一体化组件封装，可以有效解决 H5 加载、存储、音视频权限三大核心问题，显著提升 H5 应用功能完整性。domStorageAccess、fileAccess 等配置默认开启，彻底解决了 H5 存储功能失效的问题。调试功能前置启用，配合 Chrome DevTools，能大幅缩短 H5 排错时间。权限工具函数与组件封装减少了重复代码，避免因权限配置错误导致的反复调试。权限申请通过弹窗明确告知用途，用户知情权得到保障，操作步骤简化，误操作率降低。