目录

How does a Web component access a local resource file and add query parameters?

Local resource files can be stored in the src/main/resources/rawfile folder of the module and can be accessed through $rawfile ('filename') in the ets file.

Currently, query parameters cannot be directly added. However, you can use the Web component to load an HTML file and use window.location.href to jump to a local HTML page with parameters. Sample code:

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)
    }
  }
}

Create the index.html and details.html files in src\main\resources\rawfile.

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>Details page</title></head>;
<body><h1>Welcome to the details page. </h1>
<p>You have been redirected to this page from the home page, and parameters have been added to the URL. </p></body>
</html>