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

鸿蒙开发--web组件

news 2025/8/6 11:26:08

一、web组件概述

web组件用于在应用程序中显示web页面内容为开发者提供页面加载、页面交互、页面调试

页面加载：提供基础的前端页面加载的能力

页面交互：提供丰富的页面交互方式

页面调试：支持使用Devtools工具调用前端页面

二、使用web组件加载页面

①、加载网络页面

1、配置ohos.permission.INTERNET网络访问权限

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

2、在页面中加入web组件

//src：要显示的网页地址。// controller： Web 的控制器。Web({src:'openharmony.cn',controller:this.controller})

3、开发者可以在web组件创建的时候指定默认加载的网络页面。在默认页面加载完成后，如果开发者需要变更此web组件显示的网路页面，可以通过loadUrl（）接口加载指定网络页面

//loadUrl,加载数据或 URL
this.controller.loadUrl('')

②、加载本地页面

1、将本地页面文件放在应用的rawfile目录下

2、编写页面代码，加入web组件

//src：要显示的网页地址。
// controller： Web 的控制器。
Web({src:$rawfile('Local.html'),controller:this.controller})

3、开发者可以在web组件创建的时候指定默认加载的本地页面，并且加载完成后可通过调用loadUrl（）接口变更当前Web组件的页面

//loadUrl,加载数据或 URL
this.controller.loadUrl($rawfile('Local.html'))

③、加载HTML格式的文件数据

1、在页面中接入Web组件

//src：要显示的网页地址。
// controller： Web 的控制器。
Web({src:'',controller:this.controller})

2、通过loadData()接口实现加载HTML格式的文本数据

//loadUrl,加载数据或 URL
this.controller.loadData('<div style="font-size:100px">Hello  OpenHarmony </div>','text/html','UTF-8'
)

3、当开发者不需要加载整个页面，只需要显示一些页面片段时，可通过此功能来快速加载页面

三、设置基本属性和事件

①、设置深色模式

通过darkMode()接口可以配置不同的深色模式

WebDarkMode.off：关闭深色模式

WebDarkMode.On：开启深色模式，并且深色模式跟随前端页面

WebDarkMode.Auto：开启深色模式，并且深色模式跟随系统

通过forceDarkAccess（）接口可将前端页面强制配置深色模式，且深色模式不跟随前端页面和系统。配置该模式的时候，需要将深色模式配置为WebDarkMode.On

import webview from '@ohos.web.webview'@Entry
@Component
struct web {controller: webview.WebviewController = new webview.WebviewController()@State mode: WebDarkMode = WebDarkMode.On@State access: boolean = truebuild() {Column() {Stack() {//src：要显示的网页地址。// controller： Web 的控制器。Web({ src: 'https://blog.csdn.net/2402_89033269', controller: this.controller }).darkMode(this.mode)//设置Web深色模式，默认关闭。当深色模式开启时，Web将启用媒体查询prefers-color-scheme中网页// 所定义的深色样式，若网页未定义深色样式，则保持原状。如需开始强制深色模式，建议配合forceDarkAccess使用.forceDarkAccess(this.access)//设置网页是否开启强制深色模式。默认关闭，该属性仅在darkMode开启深色模式时生效}}.width('100%').height('100%')}
}

②、上传文件

Web组件支持前端页面选择文件上传功能，应用开发者可以使用onShowFileSelector()接口来处理前端页面文件上传的请求

import webview from '@ohos.web.webview'
import picker from '@ohos.file.picker'@Entry
@Component
struct web {controller: webview.WebviewController = new webview.WebviewController()build() {Column() {Stack() {//加载本地upload.htmlWeb({ src: $rawfile('upload.html'), controller: this.controller })//result FileSelectorResult 用于通知Web组件文件选择的结果//fileSelector FileSelectorParam 文件选择器的相关信息 .onShowFileSelector((event) => {let photoPicker = new picker.PhotoViewPicker()let fileList: Array<string> = []photoPicker.select((err, result: picker.PhotoSelectResult) => {fileList = result.photoUrisevent.result.handleFileList(fileList)})return true})}}.width('100%').height('100%')}
}

③、在新窗口中打开页面

Web组件提供了在新窗口打开页面的能力，开发者可以通过multiWindowAccess（）接口来设置是否允许网页在新窗口打开

当有新窗口打开时，应用侧会在onWindowNew（）接口中收到Web组件新窗口事件，开发者需要在此接口事件中，新建窗口来处理Web组件窗口请求

④、管理位置权限

Web组件提供位置权限管理能力。开发者可以通过onGeolocationShow()接口对某个网站进行位置权限管理。Web组件根据接口响应结果，决定是否赋予前端页面权限。获取设备位置，需要开发者配置ohos.permission.LOCATION权限。

四、在应用中使用前端页面JavaScript

①、应用侧调用前端页面函数

应用侧可以通过runJavaScript()方法调用前端页面的JavaScript相关函数。

import webview from '@ohos.web.webview'@Entry
@Component
struct web {controller: webview.WebviewController = new webview.WebviewController()build() {Column() {Stack() {Web({ src: $rawfile('upload.html'), controller: this.controller })Button('runJavaScript').onClick(()=>{this.controller.runJavaScript('htmlTest()')})}}.width('100%').height('100%')}
}

<!DOCTYPE html>
<html>
<body>
<div style="font-size:100px">Hello  OpenHarmony</div>
<script>function htmlTest(){document.getElementById("content").style.color="#61A9B2"}
</script>
</body>
</html>

②、前端页面调用应用侧函数

开发者使用Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。
注册应用侧代码有两种方式，一种在Web组件初始化使用调用，使用javaScriptProxy()接口。另外一种在Web组件初始化完成后调用，使用registerJavaScriptProxy()接口。