WebView应用详解

关注

原创最新推荐文章于 2026-04-24 09:45:00 发布 506 阅读 AI 写同款· GEO 优化 ›

Android WebView与JSBridge实战详解：从基础配置到高级应用本文介绍了Android混合开发中WebView与JSBridge的核心应用。首先讲解了WebView基础配置，包括启用JavaScript、DOM存储等设置，以及本地assets目录调试方法。重点分析了JSBridge双向通信实现：原生调用JavaScript通过evaluateJavascript方法获取返回值；JavaScript调用原生则需使用@JavascriptInterface注解。最后针对Vue3项目，提供了打包配置方案以确保资源路径正确。这些技术要点为混合应用开发提供了实用解决方案。阅读详情

前面几篇文章已经介绍过WebView的相关内容了，但是都是专题形式，这次算是一个综合的补充吧！

Android与前端交互之JSBridge

https://blog.youkuaiyun.com/yoonerloop/article/details/78033908

Android中网页数据的抓取和修改

https://blog.youkuaiyun.com/yoonerloop/article/details/59158191

本文将介绍WebView相关属性、浏览器监听、加载过程监听、JS和WebView原生通信这几个方面！

一、WebView基本信息配置

WebSettings webSettings = getSettings();

//支持js
webSettings.setJavaScriptEnabled(true);
//支持插件
webSettings.setPluginsEnabled(true);
//提高渲染的优先级
webSettings.setRenderPriority(RenderPriority.HIGH);
//否通过手势触发播放媒体，默认是true，需要手势触发，默认true
webSettings.setMediaPlaybackRequiresUserGesture(true);
//将图片调整到适合webview的大小
webSettings.setUseWideViewPort(true);
// 缩放至屏幕的大小
webSettings.setLoadWithOverviewMode(true);
//支持缩放，默认为true。是下面那个的前提。
webSettings.setSupportZoom(true);
//设置内置的缩放控件。
webSettings.setBuiltInZoomControls(true);
//隐藏原生的缩放控件
webSettings.setDisplayZoomControls(false);
//支持内容重新布局
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
//打开H5缓存，默认关闭
webSettings.setAppCacheEnabled(true);
//设置缓存模式
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
//支持自动加载图片
webSettings.setLoadsImagesAutomatically(true);
//设置可以访问文件
webSettings.setAllowFileAccess(true);
//当webview调用requestFocus时为webview设置节点
webSettings.setNeedInitialFocus(true);
//支持通过JS打开新窗口
webSettings.setJavaScriptCanOpenWindowsAutomatically(false);
//设置WebView是否保存表单数据，默认true，保存数据。
webSettings.setSaveFormData(false);
//否支持多屏窗口，默认支持
webSettings.setSupportMultipleWindows(true);
//设置代理字符串，如果为空则使用系统提供的
webSettings.setUserAgentString("");
// 开启 DOM storage API 功能
webSettings.webSettings.setDomStorageEnabled(true);
//开启 database storage API 功能
webSettings.webSettings.setDatabaseEnabled(true);
//开启 Application Caches 功能
webSettings.webSettings.setAppCacheEnabled(true);

//设置下载
webview.setDownloadListener(new WebDownLoadListener());
//监听WebView弹窗
webview.setWebChromeClient(new WebChromeClient());
//监听WebView加载
mWebView.setWebViewClient(new BasicWebViewClient());

二、WebView加载方式

在WebView有三种常用的加载方式：分别是loadUrl，LoadData，LoadDataWithBase

1、loadUrl直接加载一个URL就可以实现网页的加载。

2、wvWebView.loadData(String data,String minmeTye,String encoding);

参数一：要加载的网页字符串数据，
参数二：加载minmeTye数据，一般为图片，
参数三：编码格式。

此方法会自动把特殊字符转换，需要设置过滤，因此在加载css等含有特殊字符的文件应该谨慎。

3、wvWebView.loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl);

参数一：要加载的网页数据的路径，即包含各类资源的总路径，
参数二：需要加载的网页内容的字符串数据，
参数三：加载minmeTye数据，一般为图片，
参数四：编码格式，
参数五：返回的URL,一般为null。

一般会使用方式一来加载图片，但是有时候加载的URL会关联多个文件，例如：一个HTML中含有的多个js,css,图片等资源，若是使用的一种加载方式会显示不全，无法显示图片等等，这时候需要用到第三种方式加载，他比第二种方式更加强大。

三、setWebChromeClient

在基本信息配置里面有个setWebChromeClient，该信息配置的作用是捕获View的事件。如果只是简单的加载网页，这个过程可能用不着。如果需要更丰富的处理效果，比如JS、进度条等，就要用到WebChromeClient。下面介绍各个方法的作用。

1、void onProgressChanged(WebView view, int newProgress)

设置加载进度，0——100之间，0表示开始加载，100表示加载完成，可以在这个过程中设置进度操作或者处理自定义进度条。

2、public void onReceivedTitle(WebView view, String title)

获取网页标题

3、public boolean onConsoleMessage(ConsoleMessage consoleMessage)

拦截控制台信息，当html中调用console相关输出的时候会回调onConsoleMessage显示打印信息。

4、public boolean onJsAlert(WebView view, String url, String message, JsResult result)

当网页调用alert()来弹出alert弹出框前回调，用以拦截alert()函数。

5、public boolean onJsConfirm(WebView view, String url, String message, JsResult result)

当网页调用confirm()来弹出confirm弹出框前回调，用以拦截confirm()函数。

6、public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result)

当网页调用prompt()来弹出prompt弹出框前回调，用以拦截prompt()函数。

7、public Bitmap getDefaultVideoPoster()

视频(全屏)播放时候，当视频不能播放时候显示指定的Bitmap图片。

8、 public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams)

当用户按下“选择文件”按钮来处理带有“file”输入类型的HTML表单时候回调，这时候需要调用startActivityForResult打开手机图库页面。

9、public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback)

请求位置信息和权限。

10、public void onShowCustomView(View view, int requestedOrientation, CustomViewCallback callback)

视频全屏时候调用。

11、 public void onHideCustomView()

退出视频全屏时候调用。

其他不常用的就不再介绍了。这些里面最常用的使用onProgressChanged设置进度，使用onJsAlert、onJsConfirm打印交互日志等。

四、setWebViewClient

setWebViewClient相比setWebChromeClient更加常用，更实用，他能够监听H5加载的整个过程。

1、 public void onPageStarted(WebView view, String url, Bitmap favicon)

开始加载的时候调用，可用于加载中的loading的显示，启动超时时间计算等等。

2、public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request)

重定向时候调用，可以拦截一些网页做定向跳转，可以根据定义好的连接协议解析连接做出相应的行为，呼起第三方APP以及登陆验证等等。

3、public void onPageFinished(WebView view, String url)

加载完成时候回调，可用于加载过程中loading的隐藏，配合onPageStarted计算加载超时时间，URL过滤，获取WebView信息，设置数据等等。

4、 public void onReceivedError(WebView view, int errorCode, String description, String failingUrl)
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error)

加载出现错误时候回调，API 23以上上面onReceivedError回调方法失效，无法触发，错误页面直接白屏显示，得在第二个方法中拦截。

5、public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error)

加载SSL错误时候回调。

其他的都不太常用，上面的setWebViewClient几个方法都是比较常用的。

五、JS调用Android方法

setWebChromeClient和setWebViewClient比较重要，因此上面做了详细的介绍，便于理解整个加载的过程。通常再加载H5中我们还需要和前端保持通信，Android调用JS返回的数据，和JS调用Android本地数据，这两个相互调用的过程之前有篇文章专门通过JSBradge框架进行使用介绍，这次介绍通过Android原生方法进行通信，先来介绍Android调用JS返回的数据。

1、根据和前端约定好的字段进行使用addJavascriptInterface方法进行注册

addJavascriptInterface(new AppJavascript(), "AppJavascript");

"AppJavascript"就是和前端约定的规则字段。

2、创建AppJavascript对象，并给方法添加注解

    public class JavascriptBridge {

        /**
         * JS调用addJsData方法并且传递json数据。
         */
        @JavascriptInterface
        public void addJsData( String json) {

        }

        /**
         * JS调用getVersionCode方法获取APP的版本号。
         */
        @JavascriptInterface
        public String getVersionCode() {
            return Utils.getVersion();
        }
    }

只要JS注册该字段"AppJavascript"之后，就可以调用JavascriptBridge里面添加@JavascriptInterface的方法了，如上面的addJsData方法，JS调用了addJsData方法，就会把所需要的信息该传递过来，这样客户端就能够收到数据，从而进行相应的处理。在这里一般客户端和前端约定一个数据规则例如根据类型执行动作打开native页面，开关设置页面，展示native弹窗分享等，根据数据获取id，name，callback等等。这样就完成了JS调用native端的通信。

五、Android调用JS方法

再有些情况下Android需要调用JS方法将数据结果反馈回去，例如登陆成功失败，H分享的平台等，这时候需要JS提供方法，客户端进行调用，将数据反馈回去。可以使用：webView.loadUrl("javascript:"+xxx())，例如：

    //无参数
    webView.loadUrl("javascript:method()");
    //一个参数
    webView.loadUrl("javascript:" + method + "('" + code + "')");
    //两个参数
    mWebView.loadUrl("javascript:" + method + "('" + platfrom + "','" + code + "')";

括号里面表示的就是参数，需要注意的是参数的形式，参数是要用英文单引号括起来的，否则会报错参数未定义，导致交互失败。

收录于