HarmonyOS 鸿蒙Next中Web组件无法加载html src

HarmonyOS 鸿蒙Next中Web组件无法加载html src 报错日志：[zip_file.cpp(ExtractToBufByName:933)]GetEntry from resources/rawfile/myPage.html err。

上下文：将 resources/rawfile/myPage.html 移动至其他模块后产生，但 web 组件仍与 html 在同一个模块。

尝试的方法：重建html页面，从磁盘重新加载，移动文件再移动回来，新建 page 重新构建一个 web 组件。

旧方式：‘resource://rawfile/myPage.html’，新方式：$rawfile(“videoCallPage.html”)

新方式可以加载，但不能连接查询参数（通过 ‘?’ ）。解决这个也可以。


更多关于HarmonyOS 鸿蒙Next中Web组件无法加载html src的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

加载工程rawfile目录下的Web页面可以用$rawfiled的形式进行加载。

  • $rawfile会在编译期由工具链转换为Resource对象。通过$rawfile访问应用资源或系统资源，可参考资源分类与访问。

结合您的代码作出以下示例：

build() {
        NavDestination(){
            Web({
                src: $rawfile('myPage.html')
                controller: new webview.WebviewController
            })
        }
        .height('100%')
        .width('100%')
}

更多关于HarmonyOS 鸿蒙Next中Web组件无法加载html src的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


报错GetEntry from resources/rawfile/myPage.html err表明系统在指定路径未找到文件

跨模块资源访问需要遵循规范路径格式：当HTML文件移动到其他模块时，需使用$rawfile(‘模块名/路径/文件.html’)格式

旧方式resource://协议在新版鸿蒙中已不推荐使用，且跨模块访问存在兼容性问题

使用Web组件加载时，可直接在URL中拼接参数。加载后，H5侧获取并使用这些参数。

参考代码： 通过Web组件使用rawFile加载离线HTML，URL中包含参数。

import { webview } from '@kit.ArkWeb'
@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'resource://rawfile/LoadingURLTransferParameters.html?key=value', controller: this.controller })
        .javaScriptAccess(true)
        .domStorageAccess(true)
    }
    .width('100%')
    .height('100%')
  }
}

是由于在hsp内吗

希望HarmonyOS能继续加强在安全性方面的研发，保护用户的隐私和数据安全。

贴代码出来噻。。

build() {
    NavDestination(){
        Web({
            src: 'resource://rawfile/myPage.html',
            controller: new webview.WebviewController
        })
    }
    .height('100%')
    .width('100%')
}

在HarmonyOS Next中，Web组件无法加载HTML src通常是由于资源路径或权限问题导致。请检查HTML文件是否已正确放置在项目的resources/rawfile目录下，并使用$rawfile()引用资源。同时，确保在module.json5文件中已声明ohos.permission.INTERNET网络权限。

根据你的描述，问题核心在于资源路径的引用方式发生了变化，并且新的 $rawfile() 方法在处理查询参数时存在限制。

1. 问题根因分析： 你遇到的 GetEntry 错误，直接原因是 resource://rawfile/ 这种旧式URI方案在HarmonyOS Next中可能已不被推荐或支持，尤其是在跨模块（即使Web组件与HTML文件在同一个模块）访问 resources/rawfile/ 目录下的文件时。系统无法通过该旧路径定位到文件条目。

2. 解决方案： 你已发现使用 $rawfile("myPage.html") 可以成功加载，这是正确的替代方案。$rawfile() 是ArkTS访问应用资源的标准方式，它直接返回该资源在应用内的正确路径。

3. 关于查询参数问题： $rawfile() 返回的是一个指向打包后资源文件的路径，它本身不是一个可接受查询字符串的URL格式。直接将 ?key=value 拼接在后面会导致路径解析失败，这是该方法当前的设计。

可行的解决思路是：

  • 数据传递替代方案： 避免通过URL查询参数向HTML页面传递数据。改为：
    • 使用 postMessage(): 在ArkTS侧，通过 WebController 的 postMessage() 方法，在页面加载后（例如在 onPageEnd 回调中）将数据以消息形式发送给HTML页面内的JavaScript。
    • 初始化注入： 在加载HTML前，将需要的数据通过字符串替换或模板的方式，直接写入到HTML内容中，或作为全局变量注入。

示例代码片段（使用postMessage）：

// ArkTS 侧
import webview from '@ohos.web.webview';

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

  build() {
    Column() {
      Web({ src: $rawfile("myPage.html"), controller: this.controller })
        .onPageEnd(() => {
          // 页面加载完成后，向HTML发送数据
          this.controller.postMessage('myDataChannel', { key: 'value', id: 123 });
        })
    }
  }
}

<!-- HTML/JavaScript 侧 -->
<script>
  window.addEventListener('message', (event) => {
    if (event.data && event.data.key) {
      console.log('Received data from ArkTS:', event.data);
      // 使用接收到的数据
    }
  });
</script>

总结： 在HarmonyOS Next中，应统一使用 $rawfile() 来加载本地HTML资源。对于需要向页面传递初始化参数的需求，需放弃传统的URL查询字符串方式，采用 postMessage() 或数据注入等鸿蒙Web组件支持的交互机制来实现。

回到顶部