鸿蒙中嵌套H5页面的方式

最新推荐文章于 2025-10-13 15:17:21 发布

原创最新推荐文章于 2025-10-13 15:17:21 发布 · 414 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #鸿蒙 #html #web

本文同步发表于我的微信公众号，微信搜索程语新视界即可关注，每个工作日都有文章更新

一、Web组件基础使用

1. 嵌入方式

在鸿蒙中，可以通过Web组件来嵌入H5页面：

// 基本Web组件使用
@Component
struct WebComponent {
  controller: WebController = new WebController();

  build() {
    Column() {
      Web({ src: 'https://www.example.com', controller: this.controller })
        .width('100%')
        .height('100%')
    }
  }
}

2. 加载本地HTML文件

方案一：使用rawfile资源

在resources/rawfile目录下放置HTML文件（如local.html）
通过以下方式加载：

Web({ src: $rawfile('local.html'), controller: this.controller })

方案二：使用data协议

const htmlContent = `
<!DOCTYPE html>
<html>
<head><title>本地页面</title></head>
<body><h1>Hello HarmonyOS</h1></body>
</html>
`;

Web({ 
  src: `data:text/html;charset=utf-8,${encodeURIComponent(htmlContent)}`, 
  controller: this.controller 
})

二、网络连接处理

1. 网络权限配置

在module.json5中添加权限：

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

2. 网络状态检测

import network from '@ohos.net.http';

// 检查网络状态
async function checkNetwork() {
  try {
    const netHandle = network.getDefaultHttpProxy();
    const state = await netHandle.getDefaultNet();
    console.log(`Network type: ${state.type}`);
    return state.isAvailable;
  } catch (err) {
    console.error(`Check network failed: ${err}`);
    return false;
  }
}

3. 离线缓存策略

// 在Web组件中启用缓存
Web({
  src: 'https://www.example.com',
  controller: this.controller
})
  .cacheMode(WebCacheMode.Default)
  .databaseAccess(true)
  .domStorageAccess(true)

三、Web与原生交互

1. JavaScript调用原生方法

原生侧注册方法：

this.controller.registerJavaScriptProxy({
  showToast: (message: string) => {
    prompt.showToast({ message: message, duration: 2000 });
  }
}, 'nativeBridge', ['showToast']);

H5侧调用：

// 在H5页面中
window.nativeBridge.showToast('Hello from H5!');

2. 原生调用JavaScript方法

// 原生调用H5函数
this.controller.runJavaScript('window.h5Function("data from native")')
  .then(result => console.log(result))
  .catch(err => console.error(err));

四、高级功能实现

1. 自定义错误页面

Web({
  src: 'https://www.example.com',
  controller: this.controller
})
  .onError(event => {
    if (event) {
      // 显示自定义错误视图
      this.hasError = true;
      this.errorMsg = `加载失败: ${event.code} - ${event.message}`;
    }
  })

// 在build方法中根据hasError显示不同视图
if (this.hasError) {
  Text(this.errorMsg).fontSize(16).fontColor(Color.Red)
} else {
  // 正常显示Web组件
}

2. 文件上传处理

this.controller.onFileSelectorShow(event => {
  // 处理文件选择请求
  const options: filepicker.FileSelectOptions = {
    type: filepicker.FileType.IMAGE,
    count: 5 // 最多选择5个文件
  };
  
  filepicker.select(event, options).then(uriList => {
    // 将选择的文件URI返回给Web页面
    this.controller.onFileSelectorResult(uriList);
  }).catch(err => {
    console.error(`File select failed: ${err}`);
    this.controller.onFileSelectorResult([]);
  });
  return true; // 表示已处理
});

五、性能优化

预加载策略：

   // 提前创建并加载Web组件
   const preloadController = new WebController();
   preloadController.loadUrl('https://www.example.com');

2. 资源拦截与缓存：

   this.controller.onResourceLoad(event => {
     if (event?.url.endsWith('.png')) {
       // 对图片资源进行自定义处理
     }
   });

3. 内存管理：

   aboutToDisappear() {
     // 组件销毁时释放资源
     this.controller.destroy();
   }

七、完整示例

@Entry
@Component
struct FullWebExample {
  controller: WebController = new WebController();
  @State hasError: boolean = false;
  @State errorMsg: string = '';

  build() {
    Column() {
      if (this.hasError) {
        Text(this.errorMsg)
          .fontSize(16)
          .fontColor(Color.Red)
        Button('重试')
          .onClick(() => {
            this.hasError = false;
            this.controller.reload();
          })
      } else {
        Web({
          src: 'https://www.example.com',
          controller: this.controller
        })
          .width('100%')
          .height('100%')
          .onError(event => {
            if (event) {
              this.hasError = true;
              this.errorMsg = `加载失败: ${event.code} - ${event.message}`;
            }
          })
          .onPageEnd(event => {
            console.log(`页面加载完成: ${event.url}`);
          })
      }
    }
    .width('100%')
    .height('100%')
  }

  aboutToAppear() {
    // 注册JS桥接
    this.controller.registerJavaScriptProxy({
      showNativeToast: (msg: string) => {
        prompt.showToast({ message: msg, duration: 2000 });
      }
    }, 'harmonyBridge', ['showNativeToast']);

    // 设置Web配置
    this.controller.setWebSettings({
      javaScriptEnabled: true,
      cacheMode: WebCacheMode.Default
    });
  }
}