Guía del usuario de Android WebView Edición mejorada

Tutorial de introducción, ventajas y uso de Android WebView

WebView es un control muy importante en la plataforma Android, que se puede utilizar para mostrar páginas web en aplicaciones de Android. WebView utiliza el motor WebKit para representar páginas web, por lo que es muy compatible con los estándares web.

Introducción a WebView

WebView es un control de Android que se puede utilizar para mostrar páginas web en aplicaciones de Android. WebView utiliza el motor WebKit para representar páginas web, por lo que es muy compatible con los estándares web.

El uso de WebView es muy simple: solo necesita agregar el control WebView en el archivo de diseño y luego llamar al método loadUrl () de WebView para cargar la página web.

Función WebView

• Mostrar contenido de la página web: WebView puede mostrar contenido como HTML, CSS y JavaScript, por lo que puede usarse para mostrar sitios web, noticias, artículos, etc. El contenido de la página web se puede cargar dinámicamente.
• Interactuar con páginas web: WebView puede interactuar con páginas web, como hacer clic en enlaces, ingresar texto, etc.
• Personalizar WebView: WebView puede personalizar la apariencia y el comportamiento, como configurar el color de fondo, el tamaño de fuente, etc.

Ventajas de WebView

• Multiplataforma: WebView utiliza el motor WebKit, por lo que se puede utilizar en todas las plataformas.
• Actualización dinámica: WebView puede actualizar dinámicamente el contenido de la página web, por lo que puede usarse para mostrar la información más reciente.
• Seguridad: WebView utiliza un mecanismo de zona de pruebas, por lo que puede evitar que páginas web maliciosas accedan a la aplicación.

Tutorial para usar WebView

Crear vista web

Para crear un WebView, simplemente agregue el control WebView al archivo de diseño:

<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

cargar pagina web

Para cargar una página web, simplemente llame al método loadUrl() de WebView:

webView.loadUrl("https://www.baidu.com");

Interactuar con JavaScript

WebView puede interactuar con JavaScript, lo que permite algunas funciones muy interesantes.

Para interactuar con JavaScript, solo necesita implementar las interfaces WebViewClient y WebChromeClient.

La interfaz WebViewClient se utiliza para manejar eventos cuando WebView carga una página web, como la finalización de la carga de la página web, falla en la carga de la página web, etc.

La interfaz WebChromeClient se utiliza para manejar eventos que interactúan con JavaScript cuando WebView carga una página web, como mostrar un cuadro de advertencia en una página web, abrir un cuadro de diálogo en una página web, etc.

atributos comunes

WebView tiene las siguientes propiedades comunes:

• android:layout_width : el ancho de WebView
• android:layout_height : la altura de WebView
• android:layout_gravity : el método de diseño de WebView
• android:fondo : el color de fondo de WebView
• android:layerType : tipo de capa WebView
• android:overScrollMode : el método de desplazamiento de WebView
• android:scrollbars : si WebView muestra barras de desplazamiento
• android:scrollBarStyle : el estilo de la barra de desplazamiento de WebView
• android:webViewClient : el cliente de WebView
• android:webChromeClient : Cliente Chrome para WebView

Hay muchos parámetros que Android WebView puede configurar. Los siguientes son algunos de los parámetros más utilizados y sus significados:

• android:layout_width : usado para establecer el ancho de WebView

• android:layout_height : usado para establecer la altura de WebView

• android:layout_gravity : utilizado para configurar el diseño de WebView en el diseño

• android: background : usado para establecer el color de fondo de WebView

• android:layerType : se utiliza para establecer el tipo de capa de WebView

• android:overScrollMode : se utiliza para configurar el modo de desplazamiento de WebView

• android:scrollbars : se utiliza para establecer si WebView muestra barras de desplazamiento

• android:scrollBarStyle : Se utiliza para establecer el estilo de la barra de desplazamiento de WebView.

• android:webViewClient : se utiliza para configurar el cliente de WebView. WebViewClient es la interfaz de devolución de llamada de WebView, que se utiliza para manejar eventos cuando WebView carga páginas web, como la finalización de la carga de la página web, falla en la carga de la página web, etc.

• android:webChromeClient : Cliente Chrome para configurar WebView. WebChromeClient es la interfaz de devolución de llamada de WebView, que se utiliza para manejar eventos que interactúan con JavaScript cuando WebView carga una página web, como un cuadro de advertencia emergente en una página web, un cuadro de diálogo emergente en una página web y pronto.

Además de estas propiedades comunes, WebView también puede establecer otras propiedades, como:

• android:allowFileAccess : si se permite que WebView acceda al sistema de archivos
• android:allowContentAccess : si se debe permitir que WebView acceda al proveedor de contenido
• android:allowFileAccessFromFileURLs : si se permite que WebView cargue recursos desde las URL de archivos
• android:allowUniversalAccessFromFileURLs : si se permite que WebView cargue recursos desde cualquier URL de archivo
• android:cacheMode : modo de caché WebView
• android:databaseEnabled : si se debe habilitar la función de base de datos de WebView
• android:domStorageEnabled : si se debe habilitar la función de almacenamiento DOM de WebView
• android:geolocationEnabled : si se debe habilitar la función de ubicación geográfica de WebView
• android:hardwareAccelerated : si se debe utilizar la aceleración de hardware
• android:initialScale : el nivel de zoom inicial de WebView
• android:loadWithOverviewMode : si se debe utilizar el modo de pantalla completa cuando WebView carga una página web
• android:mediaPlaybackRequiresUserGesture : si se requieren gestos del usuario cuando WebView reproduce audio o video
• android:mixedContentMode : el modo de WebView al cargar contenido mixto (es decir, que contiene recursos http y https)
• android:pluginState : estado del complemento de WebView
• android:saveFormData : si se deben guardar los datos del formulario
• android:savePassword : si se guarda la contraseña
• android:selectAllOnFocus : si se debe seleccionar todo el texto cuando WebView se enfoca
• android:useWideViewPort : si se debe utilizar el modo de vista panorámica cuando WebView carga páginas web
• android:userAgent : cadena de agente de usuario de WebView

Estas propiedades se pueden utilizar para configurar el comportamiento y la apariencia de WebView.

método común

WebView tiene los siguientes métodos comunes:

• loadUrl() : carga una página web
• recargar() : recarga la página web
• canGoBack() : si es posible volver a la página anterior
• goBack() : Volver a la página anterior
• canGoForward() : si es posible avanzar a la página siguiente
• goForward() : avanza a la página siguiente
• evaluarJavascript() : ejecuta código JavaScript
• addJavascriptInterface() : expone objetos Java a JavaScript

WebView e interacción nativa

Android WebView y el nativo pueden interactuar de las dos maneras siguientes:

• a través de JavaScript
• A través de WebViewClient y WebChromeClient

1. A través de JavaScript

A través de JavaScript, WebView puede interactuar con el nativo. De forma nativa, el código JavaScript se puede ejecutar a través del método evaluaJavascript() de WebView, o los objetos Java se pueden exponer a JavaScript a través del método addJavascriptInterface() de WebView.

Aquí hay un código de muestra para la interacción a través de JavaScript:

// 在Java代码中，将一个Java对象暴露给JavaScript
WebView webView = findViewById(R.id.webView);
webView.addJavascriptInterface(new MyJavaScriptInterface(), "myObject");

// 在JavaScript代码中，调用Java对象的方法
var myObject = window.myObject;
myObject.showToast("Hello, world!");

2. A través de WebViewClient y WebChromeClient

A través de WebViewClient y WebChromeClient, WebView puede manejar eventos de JavaScript, como la finalización de la carga de la página web, fallas en la carga de la página web, cuadros de diálogo emergentes de la página web, etc.

El siguiente es un código de muestra para interactuar con WebChromeClient a través de WebViewClient:

// 实现WebViewClient接口，处理网页加载完成事件
class MyWebViewClient extends WebViewClient {
    
    
    @Override
    public void onPageFinished(WebView view, String url) {
    
    
        // 网页加载完成后，执行操作
    }
}

// 实现WebChromeClient接口，处理网页弹出对话框事件
class MyWebChromeClient extends WebChromeClient {
    
    
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
    
    
        // 处理网页弹出警告框事件
        return true;
    }
}

// 将WebViewClient和WebChromeClient设置给WebView
WebView webView = findViewById(R.id.webView);
webView.setWebViewClient(new MyWebViewClient());
webView.setWebChromeClient(new MyWebChromeClient());

WebView y ejemplos nativos

En Android, puede interactuar con código nativo a través de WebView, de modo que las páginas web puedan intercambiar datos con aplicaciones de Android y llamar a funciones nativas. El siguiente es un código de muestra simple que demuestra cómo llamar al código nativo en WebView y devolver resultados del código nativo:

Primero, creamos una clase de interfaz JavaScript en código nativo de Android para interactuar con WebView:

import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;

public class JavaScriptInterface {
    
    
    private WebView webView;

    public JavaScriptInterface(WebView webView) {
    
    
        this.webView = webView;
    }

    // 在JavaScript中调用此方法
    @JavascriptInterface
    public void showToast(String message) {
    
    
        Toast.makeText(webView.getContext(), message, Toast.LENGTH_SHORT).show();
    }

    // 在JavaScript中调用此方法，并返回结果给JavaScript
    @JavascriptInterface
    public String getNativeData() {
    
    
        // 在这里执行原生代码逻辑，获取需要返回给JavaScript的数据
        String nativeData = "这是来自原生代码的数据";
        return nativeData;
    }
}

A continuación, en la Actividad (o Fragmento) de Android, asociamos WebView con la clase de interfaz JavaScript y cargamos la página web:

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {
    
    

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webview);

        // 启用JavaScript
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        // 创建JavaScript接口实例，传入WebView
        JavaScriptInterface jsInterface = new JavaScriptInterface(webView);

        // 将JavaScript接口类与WebView关联
        webView.addJavascriptInterface(jsInterface, "AndroidInterface");

        // 加载Web页面
        webView.loadUrl("file:///android_asset/index.html");
    }
}

En el código anterior, habilitamos JavaScript en WebView, creamos una instancia de JavaScriptInterface y luego la asociamos con WebView. Aquí le he dado el nombre "AndroidInterface" que se utilizará en JavaScript.

Ahora, podemos llamar al código nativo en el código JavaScript de la página web y procesar el resultado devuelto:

<!DOCTYPE html>
<html>
<head>
    <title>WebView与原生代码交互示例</title>
</head>
<body>
    <h1>WebView与原生代码交互示例</h1>

    <button onclick="showToast()">调用原生代码</button>

    <script>
        function showToast() {
      
      
            // 在JavaScript中调用原生代码
            AndroidInterface.showToast('这是来自WebView的消息');
            
            // 在JavaScript中调用原生代码，并获取返回结果
            var nativeData = AndroidInterface.getNativeData();
            alert(nativeData);
        }
    </script>
</body>
</html>

En el ejemplo anterior, utilizamos objetos en código JavaScript AndroidInterfacepara llamar a métodos en código nativo. En el ejemplo, llamamos showToastal método para mostrar un mensaje Toast nativo y llamamos getNativeDataal método para obtener los datos devueltos por el código nativo y alertmostrar el resultado.

Tenga en cuenta que para garantizar la seguridad, habilite la interfaz JavaScript solo en el WebView en el que confíe y restrinja los métodos y funciones públicos en la clase de interfaz JavaScript.

Lo anterior es un ejemplo simple que demuestra cómo usar WebView para interactuar con código nativo en Android. Puede personalizar y ampliar estos códigos de muestra según sus necesidades y escenarios específicos.

Seguridad de WebViews

WebView tiene ciertos riesgos de seguridad, por ejemplo, el código JavaScript puede ejecutar código malicioso o las páginas web pueden robar datos del usuario. Por lo tanto, al utilizar WebView, debe prestar atención a las siguientes medidas de seguridad:

• Cargue solo páginas confiables
• Utilice las interfaces WebViewClient y WebChromeClient para manejar eventos de JavaScript
• Utilice un filtro XSS para evitar que el código JavaScript ejecute código malicioso
• Utilice cifrado de datos para proteger los datos del usuario