鸿蒙Next如何将html文件放入项目中

在鸿蒙Next开发中，我想将本地的HTML文件集成到项目中并使用Web组件加载显示，但不知道具体该怎么操作。请问应该如何将HTML文件放入项目目录？需要放在哪个文件夹下？是否需要配置什么文件才能正确访问？希望能给出详细步骤说明。

2 回复

鸿蒙Next里放HTML？简单！在resources/rawfile目录下新建个文件夹，把HTML文件扔进去就行。记得在代码里用ResourceManager来读取，就像从冰箱拿啤酒一样轻松！别放错地方，不然代码会“醉”得找不到北~ 😄

更多关于鸿蒙Next如何将html文件放入项目中的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，可以通过以下步骤将HTML文件放入项目并使用：

1. 放置HTML文件到项目目录

  • 将HTML文件（例如 index.html）放在项目的 resources/rawfile 目录下。如果目录不存在，请手动创建。
  • 路径示例：resources/rawfile/index.html。

2. 加载并显示HTML内容

使用 Web 组件加载本地HTML文件。在ArkTS文件中编写以下代码：

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

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

  build() {
    Column() {
      // 加载 rawfile 目录下的 index.html
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .onPageBegin((event) => {
          console.info('Page loading started');
        })
        .onPageEnd((event) => {
          console.info('Page loading finished');
        })
        .onError((event) => {
          console.error('Error occurred: ' + JSON.stringify(event));
        })
    }
    .width('100%')
    .height('100%')
  }
}

注意事项：

  • 路径正确性：确保HTML文件路径正确，使用 $rawfile('filename') 引用资源。
  • 网络权限：如果HTML需要访问网络，需在 module.json5 中添加网络权限：
    {
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}
  • 安全限制：本地HTML可能受Web组件安全策略限制，避免加载外部敏感资源。

通过以上步骤，即可在鸿蒙Next应用中嵌入并显示HTML内容。

回到顶部