鸿蒙6.0开发常见问题【Web组件对H5页面、常用框架VUE、React的页面支持情况，包括本地和网络端的页面？】

鸿蒙绿头鱼

557人浏览 · 2025-07-12 19:03:50

鸿蒙绿头鱼 · 2025-07-12 19:03:50 发布

Web组件支持H5页面及常用框架Vue和React。

Web组件支持加载网络页面、本地页面和HTML文本数据。

加载VUE和React项目时，先使用“npm run build”命令将项目打包，然后通过加载本地页面进行加载。如果上传到服务器，可以通过加载网络页面进行加载。

可参考以下示例代码：

加载网络页面。

// xxx.ets
import { webview } from '@kit.ArkWeb';


@Entry
@Component
struct WebComponent {
  webviewController: webview.WebviewController = new webview.WebviewController();


  build() {
    Column() {
      Button('loadUrl').onClick(() => {
        try { // 点击按钮时，通过loadUrl，跳转到www.example1.com
          this.webviewController.loadUrl('www.example1.com');
        } catch (error) {
          console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
        }
      })
      // 组件创建时，加载www.example.com
      Web({ src: 'www.example.com', controller: this.webviewController })
    }
  }
}

加载本地页面时，[通过resource协议访问]：

import { webview } from '@kit.ArkWeb';


@Entry
@Component
struct WebComponent {
  webviewController: webview.WebviewController = new webview.WebviewController();


  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            // 点击按钮时，通过resource加载resources/rawfile目录下的local1.html文件
            this.webviewController.loadUrl('resource://rawfile/local1.html');
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      // 组件创建时，使用resource协议加载本地文件local.html
      Web({ src: 'resource://rawfile/local.html', controller: this.webviewController })
    }
  }
}

在“src/main/resources/rawfile”文件夹下创建local.html和local1.html。

<!-- local.html -->
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
</body>
</html>

<!-- local1.html -->
<!DOCTYPE html>
<html>
<body>
<p>Hello World, local1.html</p>
</body>
</html>

加载HTML格式的文本数据。

import { webview } from '@kit.ArkWeb';


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


  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadData，加载HTML格式的文本数据
            this.controller.loadData(
              "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
              "text/html",
              "UTF-8"
            );
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      // 组件创建时，加载www.example.com
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

最后呢

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

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

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

在这里插入图片描述