当前位置：首页 > article >正文

HarmonyOS Next应用开发实战：ArkWeb组件使用介绍及使用举例

article 2024/12/22 15:54:32

ArkWeb简介

ArkWeb（方舟Web）是HarmonyOS Next中提供的一个Web组件，主要用于在应用程序中显示Web页面内容。这个组件使得开发者可以在HarmonyOS应用中嵌入Web页面，从而降低开发成本，提升开发和运营效率。

使用场景

ArkWeb的常见使用场景包括：

应用集成Web页面：在应用内部页面中使用Web组件嵌入Web页面内容，这对于展示一些外部信息，如新闻、教程等非常适用。
浏览器网页浏览场景：在浏览器类应用中使用Web组件打开第三方网页，ArkWeb支持无痕模式浏览和广告拦截设置，为用户提供更好的浏览体验。
小程序：宿主应用可以使用Web组件来渲染小程序的页面，这使得小程序能够与鸿蒙生态系统更好地结合。
隐私政策和用户协议：对于这类常用场景，通常我们会提供url地址，通过ArkWeb的Web组件动态展示内容，减少重复开发。

代码示例

下面是一个简单的例子，展示如何在HarmonyOS应用中新建一个webPage页面来加载Web页面。

// 引入相关的模块
import webview from '@ohos.web.webview';
import { router } from '@kit.ArkUI'
import { HdNav } from '../common/HdNav';

// 定义组件WebViewPage
@Entry
@Component
struct WebViewPage {
  // 定义状态变量
  @State title: string | undefined = "";
  @State url: string = "";
  controller: webview.WebviewController = new webview.WebviewController();

  // 组件显示前获取路由参数
  aboutToAppear(): void {
    let params = router.getParams() as Record<string, string>;
    this.url = params["url"] as string;
  }

  // 构建组件的UI
  build() {
    Column() {
      // 使用HdNav组件构建导航栏
      HdNav({
        title: this.title
      })

      // 使用Web组件加载指定URL的网页
      Web({ src: this.url, controller: this.controller })
        .javaScriptAccess(true) // 允许JavaScript执行
        .onTitleReceive((event) => {
          this.title = event?.title; // 接收网页标题并更新
        })
        .layoutWeight(1) // 占据剩余空间
    }
    .justifyContent(FlexAlign.Start) // 顶部对齐
  }
}

跳转与返回

跳转到Web页面

要实现点击用户协议跳转到Web页面，可以通过router路由传递url参数：

.onClick(() => {
  router.pushUrl({
    url: 'pages/WebViewPage',
    params: {url: Constant.PRI_URL}
  });
})

返回功能

默认情况下，ArkWeb组件的Web页面没有左上角的返回按钮。为了解决这个问题，我们可以封装一个titleBar组件HdNav，并在其中添加返回按钮的功能：

import { router } from '@kit.ArkUI'
import { GlobalContext } from '../utils/GlobalContext'

@Component
export struct HdNav {
  @StorageProp('topHeight')
  topHeight: number = 0
  @Prop
  title: string | Resource = ''
  @Prop
  hasBorder: boolean = false
  @Prop leftIcon: ResourceStr = $r('app.media.icon_title_back') // 左侧图标，这里使用返回图标
  @Prop rightIcon: ResourceStr = $r('sys.media.ohos_ic_public_more')
  @BuilderParam titleBuilder: () => void
  @BuilderParam rightBuilder: () => void

  @Builder
  defaultMenu() {
  }

  // 构建导航栏的UI
  build() {
    Row() {
      // 返回按钮
      Image(this.leftIcon)
        .size({ width: 34, height: 36 })
        .onClick(() => {
          GlobalContext.getContext().setObject('isJumpPrivacy', false);
          router.back() // 点击返回按钮时，返回上一页
        })
        .padding({
          left: 15,
          right: 10,
          bottom: 10,
          top: 10
        })

      // 标题栏
      Row() {
        if (this.title) {
          Text(this.title)
            .fontWeight(600)
            .layoutWeight(1)
            .textAlign(TextAlign.Center)
            .fontSize(18)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
        } else if (this.titleBuilder) {
          this.titleBuilder()
        }
      }
      .height(56)
      .layoutWeight(1)

      // 右侧图标或自定义内容
      if (this.rightBuilder) {
        Stack() {
          this.rightBuilder()
        }.padding(15)
      } else {
        Blank().width(24)
      }
    }
    .height(56 + this.topHeight)
    .width('100%')
    .border({
      width: { bottom: this.hasBorder ? $r('app.float.common_border_width') : 0 },
      color: $r('app.color.common_gray_bg')
    })
    .backgroundColor($r('app.color.white'))
  }
}

作者：csdn猫哥 blog.csdn.net/yyz_1987，转载请注明出处。

团队介绍

本文由坚果派团队创作。坚果派团队由一群热爱HarmonyOS/OpenHarmony的开发者组成，拥有12个华为HDE认证开发者，以及来自多个领域的30多位拥有大量粉丝的博主。团队专注于分享HarmonyOS/OpenHarmony、ArkUI-X、元服务、仓颉的相关内容，目前团队成员分布在包括北京、上海、南京、深圳、广州、宁夏等多个城市。已开发鸿蒙原生应用和三方库共60+，欢迎各位开发者与我们交流探讨。