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

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

news 2025/7/8 10:12:35

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;}// 构建组件的UIbuild() {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@Proptitle: string | Resource = ''@ProphasBorder: 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@BuilderdefaultMenu() {}// 构建导航栏的UIbuild() {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+，欢迎各位开发者与我们交流探讨。