HarmonyOS NEXT开发：Web组件加载网页示例

于 2024-09-04 15:02:34 发布
阅读量483 收藏 6
点赞数 11
文章标签： harmonyos 华为 前端 鸿蒙 移动开发 web OpenHarmony
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qazwsx957486/article/details/141894056
版权

 1. Web组件简介

在应用界面里嵌入网页是很多快速APP开发使用的方式之一，通过这种方式可以比较好的达到多端兼容的效果，鸿蒙也一样提供了类似的能力，就是基础组件中的Web组件。当然，单纯的靠Web组件也无法实现复杂的功能，还需要对应的控制器WebviewController，两者配合可以达到最佳的控制和显示效果。

2. Web组件及控制器常用方法

web组件及其控制器位于web_webview模块下，使用如下的方式导入：

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

web_webview模块包括了众多的操作方法，就本文而言，重点需要掌握的是如下三个：

Web组件方法

1）Web(options: { src: ResourceStr, controller: WebviewController | WebController})

创建Web组件实例，其中src是网页资源地址，controller是组件控制器，从API Version 9开始，建议使用WebviewController作为控制器。

WebviewController方法

2）loadUrl(url: string | Resource, headers?: Array<WebHeader>): void

加载指定的url，headers为可选的请求头。

3）loadData(data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string): void

加载指定的数据。

3. Web组件加载网页示例

本示例演示加载网页的四种方式，默认是加载资源文件，运行后的初始界面如下所示：

cke_101742.jpeg

下面详细介绍创建该应用的步骤。

步骤1：创建Empty Ability项目。

步骤2：在module.json5配置文件加上对权限的声明：

"requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]

这里添加了获取互联网信息的权限。

步骤3：在Index.ets文件里添加如下的代码：

import http from '@ohos.net.http';
import util from '@ohos.util';
import fs from '@ohos.file.fs';
import picker from '@ohos.file.picker';
import systemDateTime from '@ohos.systemDateTime';
import request from '@ohos.request';
import connection from '@ohos.net.connection';
import HashSet from '@ohos.util.HashSet';
import ArrayList from '@ohos.util.ArrayList';
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct Index {
  //要加载的网址
  @State webUrl: string = "https://www.baidu.com"
  //要加载的文件
  @State loadFileUri: string = ""
  //要加载的内容
  @State webContent: string = `<!DOCTYPE html>
<html>
<body style="font-size: large;text-align: center;">
  <div>测试加载文本内容!</div>
</body>
</html>`
  scroller: Scroller = new Scroller()
  contentScroller: Scroller = new Scroller()
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Row() {
      Column() {
        Text("Web加载示例")
          .fontSize(14)
          .fontWeight(FontWeight.Bold)
          .width('100%')
          .textAlign(TextAlign.Center)
          .padding(10)

        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Text("网址：")
            .fontSize(14)
            .width(50)
            .flexGrow(0)

          TextInput({ text: this.webUrl })
            .onChange((value) => {
              this.webUrl = value
            })
            .width(110)
            .fontSize(11)
            .flexGrow(1)

          Button("加载")
            .onClick(() => {
              this.controller.loadUrl(this.webUrl);
            })
            .width(60)
            .fontSize(14)
            .flexGrow(0)
        }
        .width('100%')
        .padding(5)

        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Text("文件：")
            .fontSize(14)
            .width(50)
            .flexGrow(0)

          TextInput({ text: this.loadFileUri })
            .onChange((value) => {
              this.loadFileUri = value
            })
            .width(110)
            .fontSize(11)
            .flexGrow(1)

          Button("选择")
            .onClick(() => {
              this.selectFile()
            })
            .width(60)
            .fontSize(14)
            .flexGrow(0)
          Button("加载")
            .onClick(() => {
              this.loadLocalFile()
            })
            .width(60)
            .fontSize(14)
            .flexGrow(0)
        }
        .width('100%')
        .padding(5)

        Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
          Text("下方输入框的文本内容：")
            .fontSize(14)
            .width(200)
            .flexGrow(0)
          Button("加载")
            .onClick(() => {
              this.controller.loadData(this.webContent, "text/html",
                "UTF-8")
            })
            .width(60)
            .fontSize(14)
            .flexGrow(0)
        }
        .width('100%')
        .padding(5)

        Scroll(this.contentScroller) {
          TextArea({ text: this.webContent })
            .onChange((value) => {
              this.webContent = value
            })
            .backgroundColor(0xffffee)
            .width('100%')
            .fontSize(11)
        }
        .align(Alignment.Top)
        .backgroundColor(0xeeeeee)
        .height(120)
        .scrollable(ScrollDirection.Vertical)
        .scrollBar(BarState.On)
        .scrollBarWidth(20)

        Scroll(this.scroller) {
          Web({ src: $rawfile("index.html"), controller: this.controller })
            .padding(10)
            .width('100%')
            .backgroundColor(0xeeeeee)
        }
        .align(Alignment.Top)
        .backgroundColor(0xeeeeee)
        .height(300)
        .flexGrow(1)
        .scrollable(ScrollDirection.Vertical)
        .scrollBar(BarState.On)
        .scrollBarWidth(20)
      }
      .width('100%')
      .justifyContent(FlexAlign.Start)
      .height('100%')
    }
    .height('100%')

  }

  //选择文件，为简单起见，选择一个不太大的网页文件
  selectFile() {
    let documentPicker = new picker.DocumentViewPicker();
    documentPicker.select().then((result) => {
      if (result.length > 0) {
        this.loadFileUri = result[0]

      }
    }).catch((err) => {
      console.error(err.message)
    });
  }

  //加载本地文件
  async loadLocalFile() {
    let context = getContext(this)
    let segments = this.loadFileUri.split('/')
    //文件名称
    let fileName = segments[segments.length-1] + ".html"

    //计划复制到的目标路径
    let realUri = context.cacheDir + "/" + fileName

    //复制选择的文件到沙箱cache文件夹
    try {
      let file = await fs.open(this.loadFileUri);
      fs.copyFileSync(file.fd, realUri)
      this.controller.loadUrl(`file://${realUri}`);
    } catch (err) {
      console.error(err.message)
    }
  }
}

步骤4：添加资源文件index.html，路径为src/main/resources/rawfile/index.html，内容如下：

<!-- index.html -->
<!DOCTYPE html>
<html>

<body style="font-size: large;text-align: center;">
<div>Hello HarmonyOS Next</div>
<div>Load with resource file</div>
</body>

</html>

步骤5：编译运行，可以使用模拟器或者真机。

步骤6：如前所示，默认页面是加载资源文件index.html的效果，然后输入在线网站，比如百度的首页，随后单击“加载”按钮，截图如下所示：

cke_214604.jpeg

这样就演示了加载在线网址的效果。

步骤7：单击“选择”按钮，弹出文件选择窗口，如图所示：

cke_261536.jpeg

可以选择demo.html，该文件内容如下：

<!-- index.html -->
<!DOCTYPE html>
<html>

<body>
    <div style="text-align: center;">测试加载本地文件</div>
    <div style="text-align: center;">通过复制本地文件到沙箱实现</div>
</body>

</html>

然后单击“选择”按钮后的“加载”按钮，把选中的文件复制到沙箱中，最后加载这个文件，效果如下所示：

cke_341326.jpeg

步骤8：最后是直接加载网页内容，在输入框里输入要加载的html，然后单击“加载”按钮，效果如图所示：

cke_524407.jpeg

这样就完成了Web组件加载网页的应用。

4. 加载功能分析

这四种加载方式中，最复杂的是加载从本机选择的文件，因为文件不在沙箱中，无法直接加载，所以首先把选中的文件复制到沙箱中，然后再从沙箱中加载该文件，实现的代码如下：

  //加载本地文件
  async loadLocalFile() {
    let context = getContext(this)
    let segments = this.loadFileUri.split('/')
    //文件名称
    let fileName = segments[segments.length-1] + ".html"

    //计划复制到的目标路径
    let realUri = context.cacheDir + "/" + fileName

    //复制选择的文件到沙箱cache文件夹
    try {
      let file = await fs.open(this.loadFileUri);
      fs.copyFileSync(file.fd, realUri)
      this.controller.loadUrl(`file://${realUri}`);
    } catch (err) {
      console.error(err.message)
    }
  }

最后

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。 

为了确保高效学习，建议规划清晰的学习路线

GitCode - 全球开发者的开源社区,开源代码托管平台希望这一份鸿蒙学习文档能够给大家带来帮助~

 鸿蒙（HarmonyOS NEXT）最新学习路线

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

2.学习视频+学习PDF文档

HarmonyOS Next 最新全套视频教程 （鸿蒙语法ArkTS、TypeScript、ArkUI教程……）

纯血版鸿蒙全套学习文档（面试、文档、全套视频等）           

​​​​鸿蒙APP开发必备

总结

【纯血版鸿蒙全套学习文档】

总的来说，华为鸿蒙不再兼容安卓，对程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，才能在这个变革的时代中立于不败之地。 

冲浪王子_浪浪
关注
  • 11
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HarmonyOS开发实战系列：Web组件加载网页的四种规范
m0_64422261的博客
07-04 1200
鸿蒙也一样提供了类似的能力，就是基础组件中的Web组件。当然，单纯的靠Web组件也无法实现复杂的功能，还需要对应的控制器WebviewController，两者配合可以达到最佳的控制和显示效果。
HarmonyOS编程开发实战：解决web组件加载网页白屏示例
DMZDAMS的博客
07-18 696
鸿蒙系统提供了web组件，可以在APP里内嵌该组件显示网页信息，但是，很多开发者反应一种比较奇特的情况，就是在加载的网页里，如果含有字符#的话，就会出现白屏，或者是#后的内容无法显示。当然，web组件加载网页的方式比较多
HarmonyOS开发系列：Web组件文件上传示例规范
m0_70749039的博客
07-05 1097
web组件提供了onShowFileSelector事件，在处理具有“文件”输入类型的HTML表单时，如果用户按下“选择文件”按钮，会触发该事件
HarmonyOS开发实战：Web组件文件上传示例规范
m0_70749039的博客
07-03 934
如果用户按下“选择文件”按钮，会触发该事件，该事件的定义如下：
鸿蒙HarmonyOS实战案例：如何解决web组件加载网页白屏示例
2401_84917132的博客
08-26 552
本示例将演示html内容白屏显示以及解决白屏问题的示例，运行后的初始界面如下所示
HarmonyOS Next开发学习手册——使用Web组件加载页面
maniuT的博客
07-22 795
页面加载是Web组件的基本功能。根据页面加载数据来源可以分为三种常用场景，包括加载网络页面、加载本地页面、加载HTML格式的富文本数据。页面加载过程中，若涉及网络资源获取，需要配置 ohos.permission.INTERNET 网络访问权限。
鸿蒙HarmonyOS NEXT开发：LoadingProgress（基础组件）
shudaoshanBBQ的博客
08-15 904
用于显示加载动效的组件。
鸿蒙HarmonyOS NEXT开发：ImageAnimator（基础组件）
shudaoshanBBQ的博客
08-15 914
提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。
鸿蒙HarmonyOS开发案例：Web文件上传功能示例
2401_84917132的博客
08-26 716
本质上都是把文件复制到沙箱，然后把沙箱文件路径给web组件，其中比较复杂的是第一种，就是资源文件。
鸿蒙 HarmonyOS NEXT应用开发案例集
小北的博客
08-02 1156
随着应用代码复杂度的提升，为了提高应用的可维护性和可扩展性，良好的应用架构设计显得尤为重要。本篇文章将介绍一个应用通用架构的设计思路，旨在减少模块间的耦合、提升团队开发效率，为开发者提供一个清晰且结构化的开发框架。本文以“应用通用开发范例App”为例，从分层架构设计和模块化设计两个方面介绍应用的架构组成。
HarmonyOS Next应用开发案例大全-(持续更新中……)(1)
2401_84181911的博客
04-11 1318
前者的优点在于使用简单，但是在大文件场景下，内存占用较高，影响应用性能；在应用开发中，我们通常需要使用相同功能和样式的ArkUI组件，例如购物页面中会使用相同样式的Button按钮、Text显示文字，我们常用的方法是抽取公共样式或者封装成一个自定义组件到公共组件库中以减少冗余代码。本示例提供组件实例在页面间共享的解决方案：通过Stack容器，下层放地图组件，上层放Navigation组件来管理页面，页面可以共享下层的地图组件，页面中需要显示地图的区域设置为透明，并参考触摸交互控制，设置事件透传及响应区域。
HarmonyOS Next应用开发案例大全-(持续更新中……)
2401_84181911的博客
04-11 1107
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
HarmonyOS鸿蒙开发指南:兼容JS的类Web开发范式 构建用户界面
sybh的博客
01-08 895
animation样式需要在css文件中先定义keyframe，在keyframe中设置动画的过渡效果，并通过一个样式类型在hml文件中调用。index和detail这两个页面均包含一个text组件和button组件：text组件用来指明当前页面，button组件用来实现两个页面之间的相互跳转。构建index和detail页面的页面样式，text组件和button组件居中显示，两个组件之间间距为50px。
HarmonyOS NEXT组件堆叠实现_鸿蒙实现堆叠效果(1)，2024年最新嵌入式HarmonyOS鸿蒙开发教程
2301_82243078的博客
04-09 813
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
使用SymbolGlyph和SymbolSpan在HarmonyOS中实现高级图标效果
最新发布
A1551143530的博客
09-03 326
不仅支持静态图标，还可以通过属性为图标添加动态效果。Column() {Text("弹跳动效示例")'停止' : '开始').onClick(() => {})这个示例展示了如何通过按钮控制图标的动效，利用实现图标的弹跳效果。这样的动效可以显著提升用户界面的动态感。和SymbolSpan组件提供了丰富的功能，使您能够在HarmonyOS中轻松创建和管理图标。通过掌握这些组件的用法，您可以在应用中实现精美的图标效果，并为用户带来更好的视觉体验。4o。
HarmonyOS开发实战（ Beta5版）线程间通信场景最佳实践
weixin_55362248的博客
09-02 901
在应用开发中，经常会需要处理一些耗时的任务，如果全部放在主线程中执行就会导致阻塞，从而引起卡顿或者掉帧现象，降低用户体验，此时就可以将这些耗时操作放到子线程中处理。
HarmonyOS开发实战（ Beta5版）跨线程序列化耗时点分析工具使用规范指南
weixin_55362248的博客
09-02 1160
DevEco Studio新增主线程序列化和反序列化检测能力，同时支持配置序列化/反序列化超时阈值。对于超过阈值的序列化和反序列化操作，在泳道中给出告警提示，并可以关联该时刻的调用栈信息，更好地帮忙开发者定位性能问题。
HarmonyOS开发实战（ Beta5版）减小应用包大小
weixin_55362248的博客
08-30 1698
当前DevEco Studio默认打包应用时不压缩so库文件，配置so压缩选项后，DevEco Studio会将so库文件以压缩形式打包到包中，从而减小应用包大小。
HarmonyOS NEXT
06-25
HarmonyOS NEXT，也称为鸿蒙操作系统，是华为自主研发的面向全场景的分布式操作系统。它最初是为了应对智能手机市场变化，特别是面对谷歌服务受限的情况而开发的。HarmonyOS NEXT强调了三个核心特点： 1. **统一性**：HarmonyOS旨在提供一个跨设备、跨平台的统一体验，包括手机、智能穿戴、智能家居等各类终端设备，用户界面和操作逻辑更加一致。 2. **模块化**：系统架构采用微内核设计，允许各组件独立升级，提高系统的灵活性和安全性。 3. **分布式能力**：利用分布式技术，HarmonyOS可以实现不同设备之间的无缝协同，数据共享和实时通信。 此外，HarmonyOS NEXT还支持自定义引擎（HMS Core）和开源生态，鼓励开发者构建创新应用和服务。它正逐渐成为一个开放、安全、智能的物联网操作系统平台。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值