鸿蒙Next加载html build文件的方法是什么

在鸿蒙Next开发中，如何正确加载本地HTML build文件？我尝试使用Web组件加载assets或rawfile目录下的HTML文件，但始终无法正常显示。请问具体的实现步骤是什么？是否需要配置特殊权限或修改文件路径格式？希望能提供完整的代码示例和注意事项。

2 回复

鸿蒙Next加载HTML？简单！用WebView组件，把src设为本地路径就行。记得把HTML文件放在resources/rawfile里，然后调用loadUrl("file:///android_asset/你的文件.html")。别问为什么路径里有“android_asset”，问就是历史遗留梗！

更多关于鸿蒙Next加载html build文件的方法是什么的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中加载HTML文件可以通过Web组件实现。以下是具体方法：

  1. 在resources/rawfile目录放置HTML文件（例如index.html）

  2. 在ArkTS页面中使用Web组件：

import webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({
        src: $rawfile('index.html'),
        controller: this.controller
      })
        .width('100%')
        .height('100%')
    }
  }
}

关键点说明：

  • 使用$rawfile()访问rawfile目录资源
  • 通过WebviewController可控制网页行为
  • 需要网络权限：在module.json5中添加"ohos.permission.INTERNET"

注意事项：

  • 确保HTML文件编码为UTF-8
  • 支持基础HTML/CSS/JavaScript
  • 可通过onPageEnd监听页面加载完成

此方法适用于加载本地HTML页面，若需加载远程网页，直接将src改为网址即可。

回到顶部