HarmonyOS 鸿蒙Next Web组件加载本地页面传参问题

发布于 1周前 作者 gougou168 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Web组件加载本地页面传参问题

Web组件通过rawFile方式加载本地页面的场景，如何像网络url一样传参数？  有两方面需求:

（1）通过?后拼接参数

（2）通过/#/方式，加载单应用中的指定路由页面  场景如下: rawfile目录下有个index.html文件

 （1） 使用 $rawfile(‘index.html’)  —— 正常加载页面

（2）使用 $rawfile(‘index.html?from=hhb’)  ——  找不到页面

（3）使用 $rawfile(‘index.html#/page_first?from=hhb’)  ——  找不到页面


更多关于HarmonyOS 鸿蒙Next Web组件加载本地页面传参问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复
请参考如下写法：

Web({ src: 'resource://rawfile/index.html#/yourHash', controller: this.controller }) 

import web_webview from '@ohos.web.webview';
import promptAction from '@ohos.promptAction';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct WebComponent {
  controller = new web_webview.WebviewController();
  build() {
    Column() {
      Web({ src: 'resource://rawfile/index.html#/yourHash', controller: this.controller })
        .onAlert((event) => {
          if (event) {
            promptAction.showToast({ message: event.message })
          }
          return true;
        })
    }.width('100%').margin({ top: 5 })
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input框示例</title>
</head>
<body>
<input type="file" id="myInput" accept="image/*" id="myInput" name="myInput">
</body>
<script>
    alert(location.hash)
</script>
</html>

更多关于HarmonyOS 鸿蒙Next Web组件加载本地页面传参问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS 鸿蒙Next Web组件加载本地页面传参问题，以下是一些解决方案：

  1. URL拼接参数：

    • 可以通过在URL后拼接参数的方式传递数据。例如，resource://rawfile/index.html?param1=value1&param2=value2。
    • 在Web组件中，可以通过JavaScript的location.search获取这些参数。

  2. Hash方式传递：

    • 可以通过在URL中添加/#/及其后的hash值来指定单应用中的路由页面。例如，resource://rawfile/index.html#/yourhash。
    • 在Web组件的HTML页面中，可以通过location.hash获取hash值。

  3. 确保路径正确：

    • 加载本地页面时，请确保文件路径正确，并且Web组件已关联到正确的控制器。
    • 如果路径错误或控制器未正确关联，可能导致页面加载失败。

  4. 检查权限：

    • 确保应用已声明必要的权限，如访问文件系统的权限。
    • 权限问题可能导致无法加载本地资源或进行跨域请求。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部