Android WebView H5 Hybrid 混和开发

news2024/9/21 11:04:05

对于故乡，我忽然有了新的理解：人的故乡，并不止于一块特定的土地，而是一种辽阔无比的心情，不受空间和时间的限制；这心情一经唤起，就是你已经回到了故乡。——《记忆与印象》

前言

移动互联网发展至今，Android开发模式在不断更迭， 目前主要有三种开发模式 ：原生开发、Hybrid开发以及跨平台开发。

  • 原生开发： 移动终端的开发主要分为两大阵营， Android(Java、Kotlin) 研发与 IOS(Swift)研发。
  • Hybrid开发： 多种技术栈混合开发App， 在Android中主要指Native与前端(JavaScript)技术的混合开发方式。
  • 跨平台研发： 同一个技术栈， 同一套代码可以在不同的终端上运行，极大的缩减了研发成本， 比如当下比较火的Flutter。

首先，我们需要做一些准备工作：为应用添加一个启用了 JavaScript 的 WebView，声明 INTERNET 权限（WebView 需此权限才能加载页面，即使页面内容为本地资源），在 Assets 资源文件夹中放置页面并加载。

Layout

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

XML

Manifest

    <manifest ... >
        <uses-permission android:name="android.permission.INTERNET" />
        ...
    </manifest>

XML

MainActivity

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.webkit.WebView;
    ...
    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        WebView mWebView = findViewById(R.id.webview);
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl("file:///android_asset/www/index.html"); // You can directly use file://android_asset/ to load the files in the assets folder
    }
    ...

WebView & H5 Hybrid混合开发基础知识

H5 Runtime支撑 - 浏览器内核

对于Java来说， 最大的一个优点是build once run anywhere（一处编译处处运行）， 这一优点主要是通过JVM在不同的平台解释执行（在Android端使用的是基于JVM针对低性能小内存的设备优化的dalvik和art虚拟机）。

对于前端技术栈来说， Runtime依赖浏览器的支持， 浏览器主要依赖内核驱动，内核的两个主要功能一个是界面渲染， 一个是JavaScript 引擎（JS语法解析），当前的主流浏览器以及内核：

浏览器渲染内核JS引擎
IE/Edge（微软）Trident; EdgeHtmlJScript; Chakra
Safari（苹果）Webkit/Webkit2JavaScripCore/Nitro(4+)
Chrome（Google）Chromium(Webkit);BlinkV8
FireFoxGeckoSpiderMonkey(❤️.0);TackMonkey(<4.0);JaegerMonkey(4.0+)
OperaPresto;BlinkFuthark(9.5-10.2);CaraKan(10.5)

Chromium 是 Google 公司一个开源浏览器项目，使用 Blink 渲染引擎，V8 是 Blink 内置的JavaScript 引擎， Android端的WebView是基于Chromium的移动端浏览器组件。当前Android和IOS移动端的浏览器内核说到底都是基于Webkit。

!

WebKit主要分为四个部分：

  • 最上层 WebKit Embedding API 是 Browser UI 进行交互的 API 接口
  • 最下层 Platform API 提供与底层驱动的交互，如网络，字体渲染，影音文件解码，渲染引擎等
  • WebCore 它实现了对文档的模型化，包括了 CSS, DOM, Render 等的实现
  • JSCore 是专门处理 JS 脚本的引擎, 以及Hybrid通信支持

WebKit 所包含的绘制引擎 和 JS引擎，均是从KDE的KHTML及KJS引擎衍生而来。它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。

KDE： K桌面环境(K Desktop Environment)的缩写。一种著名的运行于 Linux、Unix 以及FreeBSD 等操作系统上的自由图形桌面环境

GNU： 通用公共许可协议（英语：GNU General Public License，缩写GNU GPL 或 GPL），是被广泛使用的自由软件许可证，给予了终端用户运行、学习、共享和修改软件的自由。

BSD： Berkeley Software Distribution，伯克利软件套件，是Unix的衍生系统，在1977至1995年间由加州大学伯克利分校开发和发布的。

JSBridge

JSBridge 是一座 Native 与 JavaScript 进行通讯的桥梁，它的核心是 构建 Native 和 JavaScript 双向通信的通道。

在这里插入图片描述

所谓 双向通信的通道:

  • JS 向 Native 发送消息 : 调用相关功能、通知 Native 当前 JS 的相关状态等。
  • Native 向 JS 发送消息 : 回溯调用结果、消息推送、通知 JS 当前 Native 的状态等。

JavascriptInterface

在 Android 和 Web 混合开发中，免不了 Java 与 JavaScript 代码相互调用，而 WebView 就给我们提供了这样一个接口：JavascriptInterface

public abstract @interface JavascriptInterface implements Annotation

Annotation that allows exposing methods to JavaScript. Starting from API level Build.VERSION_CODES.JELLY_BEAN_MR1 and above, only methods explicitly marked with this annotation are available to the Javascript code.

简单来说，在 Android 4.2 Jelly Bean（API 17）后，应用需要在方法中声明 @JavascriptInterface 注解，并将其所在类添加到 WebView 中，允许应用内启用了 JavaScript 的 WebView 直接调用其类成员方法。

MainActivity

import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;
    ...
    @SuppressLint("StaticFieldLeak")
    private static Context mContext;

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = getApplicationContext();
        WebView mWebView = findViewById(R.id.webview);
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");
        mWebView.getSettings().setJavaScriptEnabled(true);

        mWebView.addJavascriptInterface(new JavaScriptBridge(), "Android"); // Export class JavaScriptBridge to WebView and map it to window.Android object in JavaScript

        mWebView.loadUrl("file:///android_asset/www/index.html"); // You can directly use file://android_asset/ to access the assets folder, or use file://android_res/ to access the res folder
    }

    @SuppressWarnings("unused")
    public static class JavaScriptBridge {

        @JavascriptInterface
        public void makeToast(final String message) {
            Toast.makeText(mContext, message, Toast.LENGTH_LONG).show();
        }
    }
    ...

WebPage

...
<script type="text/javascript">
    "use strict";
    window.Android.makeToast("Hello world");
</script>
...

HTML

上述示例代码将允许 JavaScript 通过 window.Android 对象，调用 JavaScriptBridge 类中声明了 @JavascriptInterface 注解的 makeToast 方法。运行后显示一个内容为 Hello world 的 Toast。

链接访问拦截

WebViewClient 提供了 shouldOverrideUrlLoading 事件，可以让我们在 URL 加载时做一些事情，比如拦截某个链接。

public boolean shouldOverrideUrlLoading (WebView view, WebResourceRequest request)

Give the host application a chance to take control when a URL is about to be loaded in the current WebView. If a WebViewClient is not provided, by default WebView will ask Activity Manager to choose the proper handler for the URL. If a WebViewClient is provided, returning true causes the current WebView to abort loading the URL, while returning false causes the WebView to continue loading the URL as usual.

MainActivity

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
    ...
    @SuppressLint("StaticFieldLeak")
    private static Context mContext;

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = getApplicationContext();
        WebView mWebView = findViewById(R.id.webview);
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");
        mWebView.getSettings().setJavaScriptEnabled(true);

        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                if (request.getUrl().toString().equalsIgnoreCase("https://www.google.cn/")) {
                    view.loadUrl("https://www.google.com/ncr");
                    return true;
                } else if (request.getUrl().toString().startsWith("meowcat://open_settings")) {
                    final Intent intent = mContext.getPackageManager().getLaunchIntentForPackage("com.android.settings");
                    intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_RESET_TASK_IF_NEEDED);
                    mContext.startActivity(intent);
                    return true;
                }
                return false;
            }
        });

        mWebView.loadUrl("file:///android_asset/www/index.html"); // You can directly use file://android_asset/ to access the assets folder, or use file://android_res/ to access the res folder
    }
    ...

上述示例代码将在加载 https://www.google.cn/ 时跳转到 https://www.google.com/ncr*1，或在链接为 meowcat://open_settings 时打开系统设置。

除示例代码外，也可以直接 return true; 来中断页面加载。

注：该方法不适用于 POST 请求，页面在进行表单提交等 POST 请求时不会调用。

在页面内执行外部 JavaScript 代码

出于调试需求，我们可能需要通过 Java 代码在页面内执行一些 JavaScript 代码，使用 loadUrl(String) 或 evaluateJavascript(String, ValueCallback<String>) 方法即可轻松实现该需求。若代码需要在页面加载完毕后执行，WebViewClient 也为我们提供了 onPageFinished 事件。

public void loadUrl (String url)

Loads the given URL.
Also see compatibility note on evaluateJavascript(String, ValueCallback).

public void evaluateJavascript (String script, ValueCallback resultCallback)

Asynchronously evaluates JavaScript in the context of the currently displayed page. If non-null, resultCallback will be invoked with any result returned from that execution. This method must be called on the UI thread and the callback will be made on the UI thread.
Compatibility note. Applications targeting Build.VERSION_CODES.N or later, JavaScript state from an empty WebView is no longer persisted across navigations like loadUrl(java.lang.String). For example, global variables and functions defined before calling loadUrl(java.lang.String) will not exist in the loaded page. Applications should use addJavascriptInterface(Object, String) instead to persist JavaScript objects across navigations.

public void onPageFinished (WebView view, String url)

Notify the host application that a page has finished loading. This method is called only for main frame. Receiving an onPageFinished() callback does not guarantee that the next frame drawn by WebView will reflect the state of the DOM at this point. In order to be notified that the current DOM state is ready to be rendered, request a visual state callback with WebView#postVisualStateCallback and wait for the supplied callback to be triggered.

MainActivity

import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
    ...
    @SuppressLint("StaticFieldLeak")
    private static Context mContext;

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = getApplicationContext();
        WebView mWebView = findViewById(R.id.webview);
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setWebViewClient(new WebViewClient() {

            @Override
            public void onPageFinished(WebView view, String url) {
                if (url.startsWith("https://www.google.")) {
                    view.loadUrl("javascript:(() => {window.location = 'https://www.google.com/ncr';})();");
                    // Equals with
                    // view.evaluateJavascript("window.location = 'https://www.google.com/ncr';", null);
                }
                super.onPageFinished(view, url);
            }

        });
        mWebView.loadUrl("file:///android_asset/www/index.html"); // You can directly use file://android_asset/ to access the assets folder, or use file://android_res/ to access the res folder
    }
    ...

上述示例代码将在页面加载完毕后，打开 https://www.google.cn/，而后被 shouldOverrideUrlLoading 方法跳转到 https://www.google.com/ncr。

代码中 loadUrl 与 evaluateJavascript 的示例等价，选用其一即可。

注：若使用 evaluateJavascript 方法的回调功能，则此方法与回调方法都必须在主线程（UI 线程）中执行或声明。

本地资源加载

在上面的示例代码中，我们使用了 file:///android_asset/ 来直接加载 assets 资源文件夹中的资源。但由于一些强制执行的安全策略（Content Security Policy）限制，使得该非同源 URL 无法正常被加载，这时候就可以使用 WebViewClient 提供的 shouldInterceptRequest 事件来辅助加载。

public WebResourceResponse shouldInterceptRequest (WebView view, WebResourceRequest request)

Notify the host application of a resource request and allow the application to return the data. If the return value is null, the WebView will continue to load the resource as usual. Otherwise, the return response and data will be used.
This callback is invoked for a variety of URL schemes (e.g., http(s):, data:, file:, etc.), not only those schemes which send requests over the network. This is not called for javascript: URLs, blob: URLs, or for assets accessed via file:///android_asset/ or file:///android_res/ URLs.
In the case of redirects, this is only called for the initial resource URL, not any subsequent redirect URLs.

MainActivity

import android.annotation.SuppressLint;
import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebResourceRequest;
import android.webkit.WebResourceResponse;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

import java.io.IOException;
    ...
    @SuppressLint("StaticFieldLeak")
    private static Context mContext;

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = getApplicationContext();
        WebView mWebView = findViewById(R.id.webview);
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.addJavascriptInterface(new JavaScriptBridge(), "Android"); // Export class JavaScriptBridge to WebView and map it to window.Android object in JavaScript
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                view.loadUrl("javascript:(() => {const script = document.createElement('script'); script.src = '/MeowCat-Android-Asset/www/js/main.js'; document.body.append(script);})();");
                super.onPageFinished(view, url);
            }

            @Override
            public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest webResourceRequest) {
                String url = webResourceRequest.getUrl().toString();
                Uri uri = Uri.parse(url);
                String key = uri.getScheme() + "://" + uri.getHost() + "/MeowCat-Android-Asset/";
                if (url.contains(key)) {
                    String assetsPath = url.replace(key, "");
                    try {
                        return new WebResourceResponse("text/plain", "UTF-8", getAssets().open(assetsPath));
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
                return super.shouldInterceptRequest(view, webResourceRequest);
            }

        });
        mWebView.loadUrl("https://www.google.com/ncr");
    }

    @SuppressWarnings("unused")
    private static class JavaScriptBridge {

        @JavascriptInterface
        public void makeToast(final String message) {
            Toast.makeText(mContext, message, Toast.LENGTH_LONG).show();
        }
    }
    ...

Main

"use strict";
window.Android.makeToast("Hello world");

JavaScript

上述示例代码将打开 https://www.google.com/ncr（因 shouldInterceptRequest 方法不会在加载特殊 Schemes 时被调用，故选用 Google 作为示例），页面加载完毕后插入 script 标签，加载并执行位于 file://android_asset/www/js/main.js 中的代码。运行后显示一个内容为 Hello world 的 Toast。

注：在 Android 官方开发文档 中，还有另一种使用 WebViewAssetLoader 的本地资源加载方式，感兴趣的可以自行研究一下，本文不再赘述。

JavaScript 弹窗提示

上面的示例代码已经可以帮助我们完成大多数需求，但在实际应用中发现了另外一个问题，JavaScript 的 alert() comfirm() prompt() 函数全部失效，这不是我们期望的行为。WebChromeClient 为我们提供了 onJsAlert onJsConfirm onJsPrompt 事件，分别对应上述函数，我们需要自行实现上述方法。

MainActivity

import androidx.appcompat.app.AlertDialog;

import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Bundle;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
    ...
    @SuppressLint("StaticFieldLeak")
    private static Context mContext;

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = getApplicationContext();
        WebView mWebView = findViewById(R.id.webview);
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");
        mWebView.getSettings().setJavaScriptEnabled(true);

        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                onJsDialog(DialogType.ALERT, view, url, message, result, null, null);
                return true;
            }

            @Override
            public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
                onJsDialog(DialogType.CONFIRM, view, url, message, result, null, null);
                return true;
            }

            @Override
            public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) {
                onJsDialog(DialogType.PROMPT, view, url, message, null, defaultValue, result);
                return true;
            }
        });

        mWebView.loadUrl("file:///android_asset/www/index.html"); // You can directly use file://android_asset/ to access the assets folder, or use file://android_res/ to access the res folder
    }

    private enum DialogType {
        ALERT,
        CONFIRM,
        PROMPT
    }

    private static void onJsDialog(DialogType type, WebView view, String url, String message, final JsResult result, String defaultValue, final JsPromptResult promptResult) {
        AlertDialog.Builder builder = new AlertDialog.Builder(view.getContext());
        String[] content = message.split(":", 2);
        builder.setTitle(content[0]);
        builder.setMessage(content[1] + "\n" + url);
        builder.setCancelable(false);
        switch (type) {
            case PROMPT:
                builder.setPositiveButton(android.R.string.ok, (dialog, which) -> promptResult.confirm(defaultValue)); // TODO: Input
                break;
            case CONFIRM:
                builder.setCancelable(true);
                builder.setNegativeButton(android.R.string.cancel, (dialog, which) -> result.cancel());
            case ALERT:
            default:
                builder.setPositiveButton(android.R.string.ok, (dialog, which) -> result.confirm());
        }
        builder.create().show();
    }
    ...

HTML

...
<script type="text/javascript">
    "use strict";
    alert("Alert Title:This is an alert");
    confirm("Confirm Title:This is a confirm") ? alert("Alert Title (Confirm):You confirmed the dialog") : alert("Alert Title (Confirm):You canceled the dialog");
    alert("Alert Title (Prompt):Prompt content is " + prompt("Prompt Title:This is a prompt", "Hello world"));
</script>
...

HTML

上述示例代码中，onJsDialog 方法统一处理了来自 WebChromeClient 的 onJsAlert onJsConfirm onJsPrompt 事件，添加了标题（JavaScript 函数仅支持信息传参，这里以第一个 : 作为标题和信息的分隔符），弹出对话框并返回；DialogType 用于判断事件类型。

运行后依次弹出对话框，内容分别为：

Alert Title
This is an alert
file:///android_asset/www/index.html
                                    [OK]
Confirm Title
This is a confirm
file:///android_asset/www/index.html
                    [CANCEL] [OK]

若点击了 OK

Alert Title (Confirm)
You confirmed the dialog
file:///android_asset/www/index.html
                                    [OK]

若点击了 CANCEL

Alert Title (Confirm)
You canceled the dialog
file:///android_asset/www/index.html
                                    [OK]
Prompt Title
This is a prompt
file:///android_asset/www/index.html
                                    [OK]
Alert Title (Prompt)
Prompt content is Hello world
file:///android_asset/www/index.html
                                    [OK]

亦可根据其他需求定制对话框的样式和（或）功能。

注：onJsDialog 方法仅作为示例，并未实现 prompt() 函数的输入功能，以默认值返回。

实战：在页面中插入 vConsole 并在成功插入后弹出提示对话框

vConsole 是腾讯出品的一个轻量、可拓展、针对手机网页的前端开发者调试面板，可以在 Vue、React 或其他任何框架中使用。用于移动设备调试非常好用，下面的实例将使用本文所介绍的所有技巧，在页面底部插入 vConsole。

下载 vconsole.min.js 并保存至 assets 资源文件夹中：https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js

Java

import androidx.appcompat.app.AlertDialog;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebResourceRequest;
import android.webkit.WebResourceResponse;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

import java.io.IOException;
    ...
    @SuppressLint("StaticFieldLeak")
    private static Context mContext;

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = getApplicationContext();
        WebView mWebView = findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.addJavascriptInterface(new JavaScriptBridge(), "Android"); // Export class JavaScriptBridge to WebView and map it to window.Android object in JavaScript
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                if (request.getUrl().toString().equalsIgnoreCase("https://www.google.cn/")) {
                    view.loadUrl("https://www.google.com/ncr");
                    return true;
                } else if (request.getUrl().toString().startsWith("meowcat://open_settings")) {
                    final Intent intent = mContext.getPackageManager().getLaunchIntentForPackage("com.android.settings");
                    intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_RESET_TASK_IF_NEEDED);
                    mContext.startActivity(intent);
                    return true;
                }
                return false;
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                view.loadUrl("javascript:(() => {const script = document.createElement('script'); script.src='/MeowCat-Android-Asset/www/js/vconsole.min.js'; document.body.append(script); script.onload = () => {alert('vConsole:Loaded!'); if (typeof VConsole !== 'undefined') {new VConsole({onReady: () => {const vc = document.getElementById('__vconsole'); const vc_switch = vc.querySelector('.vc-switch'); vc.style.position = 'relative'; vc.style.zIndex = 9999999999; vc_switch.style.opacity = 'opacity' in this ? this.opacity : .5;},});}};})();");
                super.onPageFinished(view, url);
            }

            @Override
            public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest webResourceRequest) {
                String url = webResourceRequest.getUrl().toString();
                Uri uri = Uri.parse(url);
                String key = uri.getScheme() + "://" + uri.getHost() + "/MeowCat-Android-Asset/";
                if (url.contains(key)) {
                    String assetsPath = url.replace(key, "");
                    try {
                        return new WebResourceResponse("text/plain", "UTF-8", getAssets().open(assetsPath));
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
                return super.shouldInterceptRequest(view, webResourceRequest);
            }
        });
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                onJsDialog(DialogType.ALERT, view, url, message, result, null, null);
                return true;
            }

            @Override
            public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
                onJsDialog(DialogType.CONFIRM, view, url, message, result, null, null);
                return true;
            }

            @Override
            public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) {
                onJsDialog(DialogType.PROMPT, view, url, message, null, defaultValue, result);
                return true;
            }
        });
        mWebView.loadUrl("file:///android_asset/www/index.html"); // You can directly use file://android_asset/ to load the files in the assets folder
    }

    private enum DialogType {
        ALERT,
        CONFIRM,
        PROMPT
    }

    private static void onJsDialog(DialogType type, WebView view, String url, String message, final JsResult result, String defaultValue, final JsPromptResult promptResult) {
        AlertDialog.Builder builder = new AlertDialog.Builder(view.getContext());
        String[] content = message.split(":", 2);
        builder.setTitle(content[0]);
        builder.setMessage(content[1] + "\n" + url);
        builder.setCancelable(false);
        switch (type) {
            case PROMPT:
                builder.setPositiveButton(android.R.string.ok, (dialog, which) -> promptResult.confirm(defaultValue)); // TODO: Input
                break;
            case CONFIRM:
                builder.setCancelable(true);
                builder.setNegativeButton(android.R.string.cancel, (dialog, which) -> result.cancel());
            case ALERT:
            default:
                builder.setPositiveButton(android.R.string.ok, (dialog, which) -> result.confirm());
        }
        builder.create().show();
    }

    @SuppressWarnings("unused")
    private static class JavaScriptBridge {

        @JavascriptInterface
        public void makeToast(final String message) {
            Toast.makeText(mContext, message, Toast.LENGTH_LONG).show();
        }
    }
    ...

WebPage

...
<script type="text/javascript">
    "use strict";
    alert("Alert Title:This is an alert");
    confirm("Confirm Title:This is a confirm") ? alert("Alert Title (Confirm):You confirmed the dialog") : alert("Alert Title (Confirm):You canceled the dialog");
    alert("Alert Title (Prompt):Prompt content is " + prompt("Prompt Title:This is a prompt", "Hello world"));
    window.Android.makeToast("Hello world");
    window.location = "https://www.google.cn/";
</script>
...

HTML

运行代码，最终您将能够看到如下提示：

vConsole
Loaded!
https://www.google.com/
                                    [OK]

然后在页面的右下角，会出现一个绿色按钮，上面写着 vConsole。我们做到了，那正是我们想要的。

常见问题

1. 前端如何调试WebView

  • 首先，要在WebView页面打开可以debug的设置。（不过只支持KITKAT以上版本）
scss 代码解读复制代码if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
   mWeb.setWebContentsDebuggingEnabled(true);
}
  • Android端需要开启开发者模式， 然后打开usb调试， 最后插上电脑。
  • 在Chrome地址栏输入：Chrome://inspect。你会看到如下界面。

img

正常的话在App中打开WebView时，chrome中会监听到并显示页面。

  • 点击页面下的inspect，就可以实时看到手机上WebView页面的显示状态了。

在这里插入图片描述

2.JS 如何传递 Uint8Array到 Android端：

  • 方法1: 注入参数为String data 的方法。通过Base64作为传输载体， 前端将Uint8Array数据转Base64， Native侧将Base64解析为byte[]。
  • 方法2: 注入参数为byte[] bytes 的方法。

直接传递字符串， 无论字符串多长，传递时间都在 10ms内， 推断字符串传递可能采用内存映射， 直接传递内存地址.

传递uint8array， 数据越长时间越长， 推断可能底层涉及某些转换操作， 从 js uint8 到 java byte。

3.Android端 如何加载本地前端资源

  • 资源文件放置Assert文件夹中

标签加载

ini 代码解读复制代码<script type="module" 
    crossorigin src="/android_asset/parkingtest/dist/assets/index.34d4f8c4.js"/>
<link rel="stylesheet" 
    href="/android_asset/parkingtest/dist/assets/index.cf521aaf.css">

代码加载URL

arduino

 代码解读
复制代码"file:///android_asset/xxx/xxx/src.js"
  • 资源文件放在本地SD存储

通过请求拦截方式， 拦截前端资源请求， 获取需要加载的文件名称，通过JAVA IO 加载 File 返回给前端。

加载代码(伪代码)

scala 代码解读复制代码 public class MyWebViewClient extends WebViewClient {
        @Nullable
        @Override
        public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
            String url = request.getUrl().toString();
            String fileName = Fileurl.getFileName();
            ByteArrayInputStream fileStream = JavaIO.loadFile(filePath + fileName);
            return new WebResourceResponse(
            mimeType, 
            encoding,
            statusCode, 
            reasonPhrase, 
            responseHeaders, 
            byteArrayInputStream);
        }
    }

引申阅读：在 Android 开发者文档 中，还有更多关于 Android WebView 混合开发的内容。

*1: NCR: No Country Redirect，Google 支持禁用地区跳转功能。

参考：Android WebView & H5 Hybrid开发知识点整理
DSBridge for Android
Java & V8 通讯
深入理解JSCore

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2144838.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

智能车镜头组入门（三）巡线

智能车镜头组入门（三）巡线

镜头组的特点是通过摄像头来获取赛道的信息&#xff0c;从而达到前瞻的效果&#xff0c;完成转向和速度决策。 我们的方案&#xff0c;带上元素识别&#xff0c;大概在TC264上5ms一帧&#xff0c;所以我们开了100hz的图象。 之前我看别的博客上有人说&#xff0c;他们组的50帧…
阅读更多...
MyBatis框架SqlSession浅析

MyBatis框架SqlSession浅析

1、SqlSessionFactory作用 MyBatis框架SqlSessionFactory是线程安全的&#xff0c;负责创建SqlSession。 DefaultSqlSessionFactory是线程安全的&#xff0c;属性Final。 2、SqlSessionFactoryBuilder SqlSessionFactoryBuilder负责创建SqlSessionFactory。SqlSessionFactory…
阅读更多...
C++伟大发明--模版

C++伟大发明--模版

C起初是不受外界关注的&#xff0c;别人觉得他和C语言没有本质上的区别&#xff0c;只是方便些&#xff0c;直到祖师爷发明了模版&#xff0c;开始和C语言有了根本的区别。 我们通过一个小小的例子来搞清楚什么是模版&#xff0c;模版的作用到底有多大&#xff0c;平时我们想要…
阅读更多...
UAC2.0 麦克风——类特殊请求

UAC2.0 麦克风——类特殊请求

UAC2.0 麦克风枚举过程参考 UAC2.0 麦克风——单声道 USB 麦克风（16bit） 文章目录 set interfaceget device status类特殊请求get curget rangevolume rangesample rangeset interface USB 请求代码 typedef enum {USB_REQ_GET_STATUS = 0 ,USB_REQ_CLEAR_FEATURE …
阅读更多...
自动化中验证码的操作笔记，懂的赶紧收藏！

自动化中验证码的操作笔记，懂的赶紧收藏！

在自动化测试的过程中&#xff0c;验证码一直被视为一个“拦路虎”。很多测试人员在做接口或UI自动化时都会遇到验证码的阻碍&#xff0c;导致测试无法继续进行。今天&#xff0c;我们就来讨论如何在自动化过程中破解验证码&#xff0c;快速绕过这道关卡&#xff0c;轻松完成自…
阅读更多...
【C51】独立按键控制LED灯

【C51】独立按键控制LED灯

1.简介 在单片机应用系统中&#xff0c;常常使用轻触按键组成键盘。轻触按键具有自动回弹的特点&#xff0c;即按下按键&#xff0c;两个触点接通&#xff0c;放开按键&#xff0c;两个触点断开。轻触按键的外形及电路符号如图&#xff0c;通常轻触按键有4个引脚&#xff0c;4个…
阅读更多...
Redis - 深入理解Redis事务

Redis - 深入理解Redis事务

目录 Redis是如何实现事务的&#xff1f;事务中执行的命令出现错误&#xff0c;会回滚事务吗&#xff1f;同一个连接可以重复开启事务吗&#xff1f;多个客户端同时开启事务会怎样&#xff1f;使用Redis事务只用MULTI和EXEC吗&#xff1f;Redis中的WATCH机制是怎么实现的&#…
阅读更多...
GAMES104：13 引擎工具链基础-学习笔记

GAMES104：13 引擎工具链基础-学习笔记

文章目录 一&#xff0c;工具链二&#xff0c;复杂的工具2.1 界面GUI2.2 设计模式Design Pattern2.3 数据的加载和存储2.4 资产引用 三&#xff0c;资产加载Deserialization3.1 资产解析Parse3.2 资产版本兼容性&#xff08;Compatibility&#xff09; 四&#xff0c; 如何制作…
阅读更多...
搞安全必看——IPS和IDS到底有啥区别？

搞安全必看——IPS和IDS到底有啥区别？

号主&#xff1a;老杨丨11年资深网络工程师&#xff0c;更多网工提升干货&#xff0c;请关注公众号&#xff1a;网络工程师俱乐部 下午好&#xff0c;我的网工朋友。 随着数字化转型的加速推进&#xff0c;网络安全已成为各行业不可或缺的一环。对于现代企业和组织而言&#x…
阅读更多...
【JavaEE初阶】多线程6(线程池\定时器)

【JavaEE初阶】多线程6(线程池\定时器)

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 目录 实例3:线程池 参数解释 核心线程数, 最大线程数 允许空闲的最大时间 ,时间单位 任务队列(阻塞队列) 线程工厂>工厂设计模式 拒绝策略 使用举例 模拟实现一个线…
阅读更多...
从零开始讲DDR（0）——DDR的前世今生

从零开始讲DDR（0）——DDR的前世今生

一、计算机组成 计算机组成结构&#xff08;Computer Architecture&#xff09;是计算机系统的核心&#xff0c;它定义了计算机的基本工作原理和设计模式。计算机的组成可以分成以下3大类&#xff1a;中央处理器&#xff08;CPU&#xff09;、存储器和输入/输出子系统。 1.1 中…
阅读更多...
Linux文件IO-基础知识了解及文件描述符

Linux文件IO-基础知识了解及文件描述符

1、简介 本章给大家介绍 Linux 应用编程中最基础的知识&#xff0c;即文件 I/O&#xff08;Input、Outout&#xff09;&#xff0c;文件 I/O 指的是对文件的输入/输出操作&#xff0c;说白了就是对文件的读写操作&#xff1b;Linux 下一切皆文件&#xff0c;文件作为 Linux 系…
阅读更多...
深度学习 之 常见损失函数简介：名称、作用及用法

深度学习 之 常见损失函数简介：名称、作用及用法

引言 在机器学习和深度学习中&#xff0c;损失函数&#xff08;Loss Function&#xff09;是模型训练过程中一个不可或缺的部分。它用来度量模型预测结果与真实值之间的差异&#xff0c;从而指导模型参数的优化。合理选择损失函数对于提高模型的准确性和泛化能力至关重要。本文…
阅读更多...
Mint Expedition Season 3 拉开帷幕：登顶高峰的时刻到了

Mint Expedition Season 3 拉开帷幕：登顶高峰的时刻到了

自 7 月 15 日 Mint Expedition 启动以来&#xff0c;Mint&#xff0c;一条专注于 NFT 行业的以太坊 Layer 2&#xff0c;日常交易量和交易额都出现了爆发式增长。这一成功离不开 Mint 社区的合作&#xff0c;包括 Minters、Web3 去中心化应用程序的开发者&#xff0c;以及大量…
阅读更多...
模电模块（一）

模电模块（一）

这个看起来功能挺全的&#xff0c;就是小贵&#xff0c;有时间自己做一个&#xff1a; 首页-康威科技-淘宝网 (taobao.com) 画一个集成板&#xff0c;集合上述模块的功能。
阅读更多...
深圳国际VR/AR博览会圆满落下帷幕

深圳国际VR/AR博览会圆满落下帷幕

近日&#xff0c;深圳国际VR/AR博览会在深圳国际会展中心2号馆圆满落下帷幕。该展会于9月11日至13日举行&#xff0c;是一个与光博会同期举行的大型盛会。 据主办方介绍&#xff0c;深圳国际VR/AR博览会&#xff08;Shenzhen International VR/AR Expo&#xff09;&#xff0c;…
阅读更多...
力扣最热一百题——缺失的第一个正数

力扣最热一百题——缺失的第一个正数

目录 题目链接&#xff1a;41. 缺失的第一个正数 - 力扣&#xff08;LeetCode&#xff09; 题目描述 示例 提示&#xff1a; 解法一&#xff1a;标记数组法 1. 将非正数和超出范围的数替换 2. 使用数组下标标记存在的数字 3. 找到第一个未标记的位置 4. 为什么时间复杂…
阅读更多...
【与C++的邂逅】--- C++的IO流

【与C++的邂逅】--- C++的IO流

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; 与C的邂逅 本篇博客我们来了解C中io流的相关知识。 &#x1f3e0; C语言输入输出 C语言中我们用到的最频繁的输入输出方式就是scanf ()与printf()。 sc…
阅读更多...
数据处理与统计分析篇-day03-Numpy环境搭建

数据处理与统计分析篇-day03-Numpy环境搭建

概述 python优势 Python作为当下最为流行的编程语言之一 可以独立完成数据分析的各种任务 数据分析领域里有海量开源库 机器学习/深度学习领域最热门的编程语言 在爬虫&#xff0c;Web开发等领域均有应用 常用开源库 numpy NumPy(NumericalPython) 是 Python 语言的一…
阅读更多...
创客中国AIGC专题赛冠军天鹜科技：AI蛋白质设计引领者

创客中国AIGC专题赛冠军天鹜科技：AI蛋白质设计引领者

“落霞与孤鹜齐飞,秋水共长天一色——这句出自《滕王阁序》的诗句,是我作为江西人熟记于心的佳句。它描绘的天地壮丽景色常浮现于我的脑海,正是这种豁达与壮观,启发我们将公司命名为‘天鹜科技’,我们希望将源自自然的蛋白质与现代科技的创新精神相结合,打造蛋白质设计与应用的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023