HarmonyOS鸿蒙Next中WebView组件可以加载把打包好后的h5放到app目录里直接访问吗

请问HarmonyOS鸿蒙Next中WebView组件可以加载把打包好后的h5放到app目录里直接访问吗？ 可以的话 可以给个 demo 吗？

8 回复

可以的呢

cke_212.png

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-web#%E6%8E%A5%E5%8F%A3

更多关于HarmonyOS鸿蒙Next中WebView组件可以加载把打包好后的h5放到app目录里直接访问吗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


肯定可以， 

必须可以啊！

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

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

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

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .javaScriptAccess(true) 
    } 
  }
}

rawfile/ └── welcome/ ├── assets/ ├── static/ ├── 3DGS.splat ├── handGuide.json ├── index.html └── vite.svg

为什么这样我访问不了呢

Web({ src: $rawfile("welcome/index.html"), controller: this.controller })，难道不能包一层 welcome/ 吗，

好吧 welcome 里文件 放到根目录 也无法显示，难道不能显示 vue 项目吗，

大哥，vue又不是静态页面，它是需要服务器的好吧，

在HarmonyOS鸿蒙Next中，WebView组件可以加载打包好的H5资源。你可以将H5文件放置在应用的resources/rawfile目录下，然后通过WebView的loadUrl方法加载本地路径，例如file:///android_asset/your_h5_file.html。这种方式允许在应用内直接访问本地H5资源，无需网络请求。

在HarmonyOS Next中，WebView组件确实可以加载本地打包的H5资源。以下是实现方式：

  1. 将H5资源文件放入resources/rawfile目录下
  2. 使用WebView的loadUrl()方法加载本地文件

示例代码：

import webview from '@ohos.web.webview';

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

  build() {
    Column() {
      Web({
        src: "resource://rawfile/index.html",
        controller: this.controller
      })
    }
  }
}

注意事项：

  1. 确保HTML文件及关联资源(JS/CSS)都放在rawfile目录
  2. 路径使用"resource://rawfile/"前缀
  3. 需要申请ohos.permission.INTERNET权限(在config.json中配置)

这种方案适合将H5页面打包到APP中作为本地资源使用，避免了网络请求，提高了加载速度。

回到顶部