鸿蒙6.0开发常见问题【Web组件使用rawFile加载离线html时,如何在url后拼接参数？】

本文链接：https://blog.csdn.net/m0_70748845/article/details/149315524

使用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%')
  }
}

H5侧通过以下方式获取URL中的参数并使用。

<!DOCTYPE html>
<html>
<head>
    <title>Parameter-based HTML</title>
</head>
<body>
<h1>Welcome!</h1>
<h1 id="params"></h1>
<script>
    function getParams() {
        var params = {};
        window.location.search.substring(1).split('&').forEach(function(param) {
            var pair = param.split('=');
            params[pair[0]] = decodeURIComponent(pair[1]);
        });
        return params;
    }
    document.getElementById('params').innerHTML = JSON.stringify(getParams());
</script>
</body>
</html>

最后呢

很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

在这里插入图片描述