Web组件概述
Web组件用于在应用程序中显示Web页面内容,为开发者提供页面加载、页面交互、页面调试等能力。
- 页面加载:Web组件提供基础的前端页面加载的能力,包括加载网络页面、本地页面、Html格式文本数据。
- 页面交互:Web组件提供丰富的页面交互的方式,包括:设置前端页面深色模式,新窗口中加载页面,位置权限管理,Cookie管理,应用侧使用前端页面JavaScript等能力。
- 页面调试:Web组件支持使用Devtools工具调试前端页面。
下面通过常见使用场景举例,来具体介绍Web组件功能特性。
Web组件概述
Web组件用于在应用程序中显示Web页面内容,为开发者提供页面加载、页面交互、页面调试等能力。
- 页面加载:Web组件提供基础的前端页面加载的能力,包括加载网络页面、本地页面、Html格式文本数据。
- 页面交互:Web组件提供丰富的页面交互的方式,包括:设置前端页面深色模式,新窗口中加载页面,位置权限管理,Cookie管理,应用侧使用前端页面JavaScript等能力。
- 页面调试:Web组件支持使用Devtools工具调试前端页面。
下面通过常见使用场景举例,来具体介绍Web组件功能特性。
设置深色模式
Web组件支持对前端页面进行深色模式配置。
-
通过
darkMode()
接口可以配置不同的深色模式,
WebDarkMode.Off
模式表示关闭深色模式。
WebDarkMode.On
表示开启深色模式,并且深色模式跟随前端页面。
WebDarkMode.Auto
表示开启深色模式,并且深色模式跟随系统。
在下面的示例中, 通过darkMode()接口将页面深色模式配置为跟随系统。
typescript// xxx.ets import web_webview from '@ohos.web.webview'; @Entry @Component struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController(); @State mode: WebDarkMode = WebDarkMode.Auto; build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .darkMode(this.mode) } } }
-
通过
forceDarkAccess()
接口可将前端页面强制配置深色模式,且深色模式不跟随前端页面和系统。配置该模式时候,需要将深色模式配置成WebDarkMode.On。
在下面的示例中, 通过forceDarkAccess()接口将页面强制配置为深色模式。
// xxx.etsimport web_webview from '@ohos.web.webview'; @Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController(); @State mode: WebDarkMode = WebDarkMode.On; @State access: boolean = true; build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .darkMode(this.mode) .forceDarkAccess(this.access) } }}
上传文件
Web组件支持前端页面选择文件上传功能,应用开发者可以使用onShowFileSelector()接口来处理前端页面文件上传的请求。
下面的示例中,当用户在前端页面点击文件上传按钮,应用侧在onShowFileSelector()接口中收到文件上传请求,在此接口中开发者将上传的本地文件路径设置给前端页面。
-
应用侧代码。
typescript// xxx.ets import web_webview from '@ohos.web.webview'; @Entry @Component struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { // 加载本地local.html页面 Web({ src: $rawfile('local.html'), controller: this.controller }) .onShowFileSelector((event) => { // 开发者设置要上传的文件路径 let fileList: Array<string> = [ 'xxx/test.png', ] if(event){ event.result.handleFileList(fileList) } return true; }) } } }
-
local.html页面代码。
typescript<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Document</title> </head> <body> // 点击文件上传按钮 <input type="file" value="file"></br> </body> </html>
在新窗口中打开页面
Web组件提供了在新窗口打开页面的能力,开发者可以通过multiWindowAccess()接口来设置是否允许网页在新窗口打开。当有新窗口打开时,应用侧会在onWindowNew()接口中收到Web组件新窗口事件,开发者需要在此接口事件中,新建窗口来处理Web组件窗口请求。
说明
- 如果开发者在onWindowNew()接口通知中不需要打开新窗口,需要将ControllerHandler.setWebController()接口返回值设置成null。
如下面的本地示例,当用户点击"新窗口中打开网页"按钮时,应用侧会在onWindowNew()接口中收到Web组件新窗口事件。
-
应用侧代码。
typescript// xxx.ets import web_webview from '@ohos.web.webview' //在同一page页有两个web组件。在WebComponent新开窗口时,会跳转到NewWebViewComp。 @CustomDialog struct NewWebViewComp { controller?: CustomDialogController webviewController1: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: "", controller: this.webviewController1 }) .javaScriptAccess(true) .multiWindowAccess(false) .onWindowExit(()=> { console.info("NewWebViewComp onWindowExit") if (this.controller) { this.controller.close() } }) } } } @Entry @Component struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() dialogController: CustomDialogController | null = null build() { Column() { Web({ src:$rawfile("window.html"), controller: this.controller }) .javaScriptAccess(true) //需要使能multiWindowAccess .multiWindowAccess(true) .onWindowNew((event) => { if (this.dialogController) { this.dialogController.close() } let popController:web_webview.WebviewController = new web_webview.WebviewController() this.dialogController = new CustomDialogController({ builder: NewWebViewComp({webviewController1: popController}) }) this.dialogController.open() //将新窗口对应WebviewController返回给Web内核。 //如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。 //若不调用event.handler.setWebController接口,会造成render进程阻塞。 event.handler.setWebController(popController) }) } } }
-
window.html页面代码。
typescript<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>WindowEvent</title> </head> <body> <input type="button" value="新窗口中打开网页" onclick="OpenNewWindow()"> <script type="text/javascript"> function OpenNewWindow() { let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollvars=no"); openedWindow.document.write("<p>这是我的窗口</p>"); openedWindow.focus(); } </script> </body> </html>
管理位置权限
Web组件提供位置权限管理能力。开发者可以通过onGeolocationShow()接口对某个网站进行位置权限管理。Web组件根据接口响应结果,决定是否赋予前端页面权限。获取设备位置,需要开发者配置ohos.permission.LOCATION权限。
在下面的示例中,用户点击前端页面"获取位置"按钮,Web组件通过弹窗的形式通知应用侧位置权限请求消息,示例代码如下:
-
前端页面代码。
typescript<!DOCTYPE html> <html> <body> <p id="locationInfo">位置信息</p> <button onclick="getLocation()">获取位置</button> <script> var locationInfo=document.getElementById("locationInfo"); function getLocation(){ if (navigator.geolocation) { <!-- 前端页面访问设备地理位置 --> navigator.geolocation.getCurrentPosition(showPosition); } } function showPosition(position){ locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script> </body> </html>
-
应用代码。
typescript<!DOCTYPE html> <html> <body> <p id="locationInfo">位置信息</p> <button onclick="getLocation()">获取位置</button> <script> var locationInfo=document.getElementById("locationInfo"); function getLocation(){ if (navigator.geolocation) { <!-- 前端页面访问设备地理位置 --> navigator.geolocation.getCurrentPosition(showPosition); } } function showPosition(position){ locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script> </body> </html>