51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
短视频免费课程课程排行直播课软考学堂
全部课程软考华为认证厂商认证IT技术PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
活动 短视频 专栏 极客Show 鸿蒙技术特刊

鸿蒙原生应用元服务开发-Web加载本地页面

鸿蒙时代
发布于 2024-4-30 15:37
浏览
0收藏
最新收录于
鸿蒙时代 蛟龙腾飞鸿蒙成长路上知识共享
查看专栏

将本地页面文件放在应用的rawfile目录下，开发者可以在Web组件创建的时候指定默认加载的本地页面 ，并且加载完成后可通过调用loadUrl()接口变更当前Web组件的页面。

在下面的示例中展示加载本地页面文件的方法：

将资源文件放置在应用的resources/rawfile目录下。
图1 资源文件路径
鸿蒙原生应用元服务开发-Web加载本地页面-鸿蒙开发者社区
应用侧代码

// xxx.ets
import web_webview from '@ohos.web.webview';

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

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadUrl，跳转到local1.html
            this.webviewController.loadUrl($rawfile("local1.html"));
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      // 组件创建时，通过$rawfile加载本地文件local.html
      Web({ src: $rawfile("local.html"), controller: this.webviewController })
    }
  }
}
local.html页面代码。
<!-- local.html -->
<!DOCTYPE html>
<html>
  <body>
    <p>Hello World</p>
  </body>
</html>



  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.

本文参考引用HarmonyOS官方开发文档，基于API9。

分类
HarmonyOS
标签
Web加载本地页面
赞
收藏
回复
举报


回复
    相关推荐
    这个用户很懒，还没有个人简介
    帖子
    视频
    声望
    粉丝
    最近发布
    热门推荐
    华为支付-免密支付接入支付并签约场景 0回复
    华为支付-平台类商户合单支付场景准备 0回复
    华为支付-商户基础支付场景准备 0回复
    HarmonyOS NEXT 原生应用/元服务-DevEco Profiler性能问题定界实时监控 0回复
    华为支付-免密支付接入签约代扣场景准备 0回复
    相关问题
    HarmonyOS Web组件加载本地页面传参问题 1回答
    HarmonyOS 元服务应用跳转 1回答
    HarmonyOS 元服务本地持久化存储 1回答
    HarmonyOS 应用的类型能否从元服务改成非元服务 1回答
    HarmonyOS 元服务跳转到指定页面如何返回到元服务首页？ 1回答
    社区精华内容