鸿蒙NEXT版实战开发：Web组件如何访问本地的资源文件，并添加查询参数？

原创于 2025-04-29 14:59:19 发布 · 358 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #前端 #ArkTS #ArkUI #鸿蒙系统 #android

鸿蒙5.0 同时被 3 个专栏收录

1442 篇文章

订阅专栏

OpenHarmony

654 篇文章

订阅专栏

ArkTS

533 篇文章

订阅专栏

往期鸿蒙全套实战文章必看：（附带鸿蒙全栈学习资料）

Web组件如何访问本地的资源文件，并添加查询参数

本地资源文件可存放在模块的“src\main\resources\rawfile”文件夹下，在ets文件中通过$rawfile('文件名')访问。

目前不支持直接添加查询参数，可以通过Web组件加载一个HTML文件，通过window.location.href跳转到带有参数的本地HTML页面。具体可参考示例代码：

import { webview } from '@kit.ArkWeb'; 
 
@Entry 
@Component 
struct WebComponent { 
  controller: webview.WebviewController = new webview.WebviewController(); 
 
  build() { 
    Column() { 
      Web({ src: $rawfile('index.html'), controller: this.controller }) 
        .javaScriptAccess(true) 
    } 
  } 
}

在“src\main\resources\rawfile”文件夹下创建index.html文件和details.html。

index.html：

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript"> window.onload = function() { window.location.href = "details.html"; } 
    </script> 
</head> 
<body></body> 
</html>

details.html：

<!DOCTYPE html> 
<html> 
<head><title>详情页</title></head> 
<body><h1>欢迎来到详情页！</h1> 
<p>您已成功从首页跳转到此页，并在URL中添加了参数。</p></body> 
</html>