1. Descripción general de los componentes web
Los componentes web se utilizan para mostrar el contenido de la página web en aplicaciones y proporcionar a los desarrolladores carga de páginas, interacción de páginas, depuración de páginas y otras capacidades.
- Carga de páginas: los componentes web proporcionan capacidades básicas de carga de páginas front-end, incluida la carga de páginas de red, páginas locales y datos de texto en formato HTML.
- Interacción con la página: los componentes web proporcionan una gran cantidad de métodos de interacción con la página, que incluyen: configurar el modo oscuro de la página de inicio, cargar la página en una nueva ventana, administración de permisos de ubicación, administración de cookies y la capacidad de usar la página de inicio. JavaScript en el lado de la aplicación.
- Depuración de páginas: los componentes web admiten el uso de herramientas Devtools para depurar páginas frontales.
La siguiente es una introducción detallada a las características funcionales de los componentes web a través de ejemplos de escenarios de uso comunes.
2. Cargue la página usando componentes web.
La carga de páginas es la función básica de los componentes web. Según la fuente de los datos de carga de la página, se pueden dividir en tres escenarios comunes, incluida la carga de páginas de red, la carga de páginas locales y la carga de datos de texto enriquecido en formato HTML.
Durante la carga de la página, si está involucrada la adquisición de recursos de red, se debe configurar el permiso de acceso a la red ohos.permission.INTERNET .
Cargar página web
Los desarrolladores pueden especificar la página de red cargada predeterminada al crear un componente web. Una vez cargada la página predeterminada, si el desarrollador necesita cambiar la página web que muestra este componente web, puede cargar la página web especificada llamando a la interfaz loadUrl() .
En el siguiente ejemplo, después de que el componente web carga la página "www.example.com", el desarrollador puede cambiar la página que muestra el componente web a "www.example1.com" a través de la interfaz loadUrl.
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
webviewController: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('loadUrl')
.onClick(() => {
try {
// 点击按钮时，通过loadUrl，跳转到www.example1.com
this.webviewController.loadUrl('www.example1.com');
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
// 组件创建时，加载www.example.com
Web({
src: 'www.example.com', controller: this.webviewController})
}
}
}
Cargar página local
Al colocar el archivo de la página local en el directorio de archivos sin formato de la aplicación, los desarrolladores pueden especificar la página local que se cargará de forma predeterminada al crear el componente web y, una vez completada la carga, la página del componente web actual se puede cambiar llamando la interfaz loadUrl() .
El siguiente ejemplo muestra cómo cargar un archivo de página local:
- Coloque el archivo de recursos en el directorio resources/rawfile de la aplicación. Figura 1 Ruta del archivo de recursos
- Código del lado de la aplicación
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
webviewController: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('loadUrl')
.onClick(() => {
try {
// 点击按钮时，通过loadUrl，跳转到local1.html
this.webviewController.loadUrl($rawfile("local1.html"));
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
// 组件创建时，通过$rawfile加载本地文件local.html
Web({
src: $rawfile("local.html"), controller: this.webviewController })
}
}
}
- Código de página local.html .
<!-- local.html -->
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
</body>
</html>
Cargar datos de texto en formato HTML
Los componentes web pueden cargar datos de texto en formato HTML a través de la interfaz loadData . Cuando los desarrolladores no necesitan cargar la página completa, sino solo mostrar algunos fragmentos de la página, esta función se puede utilizar para cargar la página rápidamente.
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('loadData')
.onClick(() => {
try {
// 点击按钮时，通过loadData，加载HTML格式的文本数据
this.controller.loadData(
'<html><body bgcolor="white">Source:<pre>source</pre></body></html>',
'text/html',
'UTF-8'
);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
// 组件创建时，加载www.example.com
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
3. Establecer propiedades y eventos básicos.
Establecer modo oscuro
Los componentes web admiten la configuración del modo oscuro para las páginas de inicio.
● Se pueden configurar diferentes modos oscuros a través de la interfaz darkMode() . El modo WebDarkMode.Off significa desactivar el modo oscuro. WebDarkMode.On significa activar el modo oscuro, y el modo oscuro sigue a la página de inicio. WebDarkMode.Auto significa activar el modo oscuro, y el modo oscuro sigue al sistema. En el siguiente ejemplo, el modo oscuro de la página está configurado para seguir al sistema a través de la interfaz darkMode() .
// 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)
}
}
}
● Se puede forzar a la página de inicio a configurar el modo oscuro a través de la interfaz forceDarkAccess() , y el modo oscuro no sigue la página de inicio ni el sistema. Al configurar este modo, debe configurar el modo oscuro en WebDarkMode.On. En el siguiente ejemplo, la página se fuerza al modo oscuro a través de la interfaz forceDarkAccess() .
// 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.On;
@State access: boolean = true;
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.darkMode(this.mode)
.forceDarkAccess(this.access)
}
}
}
subir archivos
Los componentes web admiten la función de carga de archivos de selección de la página de inicio. Los desarrolladores de aplicaciones pueden usar la interfaz onShowFileSelector () para manejar las solicitudes de carga de archivos de la página de inicio.
En el siguiente ejemplo, cuando el usuario hace clic en el botón de carga de archivos en la página de inicio, el lado de la aplicación recibe la solicitud de carga de archivos en la interfaz onShowFileSelector() . En esta interfaz, el desarrollador establece la ruta del archivo local cargado al frente -final de página.
● Código del lado de la aplicación.
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
// 加载本地local.html页面
Web({ src: $rawfile('local.html'), controller: this.controller })
.onShowFileSelector((event) => {
// 开发者设置要上传的文件路径
let fileList: Array<string> = [
'xxx/test.png',
]
event.result.handleFileList(fileList)
return true;
})
}
}
}
● código de página local.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
// 点击文件上传按钮
<input type="file" value="file"></br>
</body>
</html>
Abrir página en nueva ventana
Los componentes web brindan la capacidad de abrir páginas en ventanas nuevas. Los desarrolladores pueden usar la interfaz multiWindowAccess() para establecer si se permite que las páginas web se abran en ventanas nuevas. Cuando se abre una nueva ventana, el lado de la aplicación recibirá el evento de nueva ventana del componente web en la interfaz onWindowNew (). Los desarrolladores deben crear una nueva ventana en este evento de interfaz para manejar la solicitud de ventana del componente web.
ilustrar
● Si el desarrollador no necesita abrir una nueva ventana en la notificación de la interfaz onWindowNew() , el valor de retorno de la interfaz ControllerHandler.setWebController() debe establecerse en nulo.
Como en el ejemplo local siguiente, cuando el usuario hace clic en el botón "Abrir página web en una ventana nueva", el lado de la aplicación recibirá el evento de nueva ventana del componente web en la interfaz onWindowNew() .
● Código del lado de la aplicación.
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Web({ src:$rawfile("window.html"), controller: this.controller })
.multiWindowAccess(true)
.onWindowNew((event) => {
console.info("onWindowNew...");
var popController: web_webview.WebviewController = new web_webview.WebviewController();
// 开发者需要在此处新建窗口,跟popController关联，并且将popController返回给Web组件。如果不需要打开新窗口请将返回值设置为event.handler.setWebController(null);
event.handler.setWebController(popController);
})
}
}
}
● código de página window.html.
<!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");
if (openedWindow) {
openedWindow.document.body.write("<p>这是我的窗口</p>");
} else {
log.innerHTML = "window.open failed";
}
}
</script>
</body>
</html>
Administrar permisos de ubicación
Los componentes web proporcionan capacidades de gestión de permisos de ubicación. Los desarrolladores pueden administrar los permisos de ubicación de un sitio web a través de la interfaz onGeolocationShow() . El componente web decide si otorga permisos a la página de inicio en función del resultado de la respuesta de la interfaz. Para obtener la ubicación del dispositivo, los desarrolladores deben configurar el permiso ohos.permission.LOCATION .
En el siguiente ejemplo, el usuario hace clic en el botón "Obtener ubicación" en la página de inicio y el componente web notifica al lado de la aplicación el mensaje de solicitud de permiso de ubicación a través de una ventana emergente. El código de muestra es el siguiente:
● Código de página de inicio.
<!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>
● Código de aplicación.
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Web({ src:$rawfile('getLocation.html'), controller:this.controller })
.geolocationAccess(true)
.onGeolocationShow((event) => { // 地理位置权限申请通知
AlertDialog.show({
title: '位置权限请求',
message: '是否允许获取位置信息',
primaryButton: {
value: 'cancel',
action: () => {
event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求
}
},
secondaryButton: {
value: 'ok',
action: () => {
event.geolocation.invoke(event.origin, true, false); // 允许此站点地理位置权限请求
}
},
cancel: () => {
event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求
}
})
})
}
}
}