Android基于JsBridge封装的高效带加载进度的WebView

最新推荐文章于 2025-06-26 09:03:12 发布

原创

最新推荐文章于 2025-06-26 09:03:12 发布 · 置顶 · 1.5w 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#webview #hybrid app #android

本文介绍了如何在Android中封装一个带有加载进度条的WebView，并集成JsBridge，实现高效加载H5页面，支持HTTPS，Cookie同步，以及错误页面处理。通过ProgressBarWebView和自定义的WebViewClient、WebChromeClient，提供了加载进度显示和便捷的JavaScript交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Tamic
http://blog.csdn.net/sk719887916/article/details/52402470

概述

从去年4月项目就一直用起了JsBridge,前面也针对jsBridge使用姿势介绍过一篇入门篇，《Android JsBridge实战打造专属你的Hybrid APP》，本篇接着继续深入，通过再次优化封装，大大优化了部分代码，简化上层调用流程，快速部署你的Hybridge APP。

再进行具体编码前，我先进行了一般商业APP对WebView的需求

可加载本地和云端H5
拥有cookie持久能力
添加公共参数
回退前进功能
Js与本地navtive交互
拥有加载默认错误页面能力
加载网页可展现进度
支持https

好为了满足以上常用功能，大致对webview相关知识进行下普及。

效果图：

这里写图片描述

WebView

谷歌提供的系统组件，用来加载和展现html网页，其采用webkit内核驱动，来实现网页浏览功能。

拥有load() URL和本地html文件

    // 云端
    webView.loadUrl("https://www.baidu.com"); 
    // 本地
    webView.loadUrl("file:///android_asset/demo.html");

WebViewClient

WebViewClient主要辅助WebView执行处理各种响应请求事件的，比如：

onLoadResource
onPageStart
onPageFinish
onReceiveError
onReceivedHttpAuthRequest
shouldOverrideUrlLoading

本次加载失败页面，和拦截加入header头必须用到它，由于android无法拦截h5本身ajax的请求，所以对header同步不是很好，建议大家对于ajax请求采用cookie形式，以防止url参数服务端无法获取的问题。

加入header 一般直接使用webView.load(url, header)

view.loadUrl(url, header);

为了方便上层开发者调用，可以将此code加入到WebViewClient 的shouldOverrideUrlLoading中执行
姿势那就是这样：

 public boolean shouldOverrideUrlLoading(WebView view, String url) {
   if(this.onPageHeaders(url) != null) {
     view.loadUrl(url, this.onPageHeaders(url));
 }
   return super.shouldOverrideUrlLoading(view, url);
}

错误页面也是复写WebViewClient的onReceivedError（） 来加入自定义的抽象onPageError（），姿势如下：

public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
    view.loadUrl(this.onPageError(failingUrl));
}

onPageHeaders()便是上层抽象出来的接口，方便我们直接加入header，而onPageError（）是方便指定加载错误页面，那么在activity中就是这样了，

 mProgressBarWebView.setWebViewClient(new    CustomWebViewClient(mProgressBarWebView.getWebView()) {

        @Override
        public String onPageError(String url) {
            return "file:///android_asset/error.html";
        }

        @Override
        public Map<String, String> onPageHeaders(String url) {
            return CookieManger.getHeader(getContext());
        }
    });