Android——JsBridge实战（二）

最新推荐文章于 2024-05-03 02:53:36 发布

小欣儿

最新推荐文章于 2024-05-03 02:53:36 发布

阅读量1.2k

点赞数

分类专栏： Android主流框架文章标签： android cookie jsbridge html5

Android主流框架专栏收录该内容

17 篇文章 0 订阅

订阅专栏

概述

在进行具体编码前，我们先分析下一般商业APP对WebView的需求：

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

为了满足以上常用功能，大致对webview相关知识进行描述。

WebViewClient

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

onLoadResource
onPageStart
onPageFinish
onReceiveError
onReceivedHttpAuthRequest
shouldOverrideUrlLoading

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

加入header 一般直接使用webView.load(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());
        }
});

设置只让本应用程序的webview加载网页而不调用外部浏览器
解决方法：
设置WebViewClient，并重写WebViewClient的shouldOverrideUrlLoading方法返回true； WebViewClient的shouldOverrideUrlLoading方法的默认实现是直接返回false的。

mWebView.setWebViewClient(new WebViewClient(){
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
});

WebChromeClient

主要辅助WebView处理JavaScript的对话框、网站Logo、网站title、load进度等处理。

onCloseWindow(关闭WebView)
onCreateWindow()
onJsAlert ()
onJsPrompt
onJsConfirm
onProgressChanged
onReceivedIcon
onReceivedTitle
onShowCustomView

WebView只是用来处理一些html的页面内容，只用WebViewClient就行了，如果需要更丰富的处理效果，比如JS、进度条等，就要用到WebChromeClient。因为这次功能要用加载进度，不得不说它。

为了加入顶部的加载进度条，复写WebChromeClient中onProgressChanged，在这里更改我们加入的ProgressBar的进度，你也可以设置网页标题，甚至可以全屏！

public class CustomWebChromeClient extends WebChromeClient {
    private NumberProgressBar mProgressBar;

    public CustomWebChromeClient(NumberProgressBar progressBar) {
    this.mProgressBar = progressBar;
    }

    public void onProgressChanged(WebView view, int newProgress) {
         // newProgress=100 网页加载完成
        if(newProgress >= 95) {
            this.mProgressBar.setVisibility(8);
        } else {
            if(this.mProgressBar.getVisibility() == 8) {
                this.mProgressBar.setVisibility(0);
            }

            this.mProgressBar.setProgress(newProgress);
        }

        super.onProgressChanged(view, newProgress);
    }

   //获取tittle
    @Override
    public void onReceivedTitle(WebView view, String title) {
        super.onReceivedTitle(view, title);
    }

    //全屏
    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        super.onShowCustomView(view, callback);
    }
}

好了准备好了同步Header和进度条之后，就的考虑cookie同步问题

CookieSync

CookieManager
CookieManager是用来管理Cookie的，主要来管理cookie相关，提供如下API

setAcceptCookie（）
setCookie（）
getCookie(String url);
removeSessionCookies();
*hasCookies()
removeAllCookie()

CookieSyncManager
CookieSyncManagerl继承WebSyncManager，来管理同步cookie相关，主要有以下API

resetSync()
stopSync()
sync()
syncFromRamToFlash()
checkInstanceIsAllowed()

接着我们就可以这样操作来实现cookie同步了，

  CookieManager cookieManager = CookieManager.getInstance();
  // 接受服务器cookie
  cookieManager.setAcceptCookie(true);
  //移除之前的cookie
  cookieManager.removeSessionCookie();
  // 注入cookies
  List<String> cookies = getCookies(customCookies);
  for (String cookie : cookies) {
      cookieManager.setCookie(uri.getHost(), cookie);
  }
  // 同步cookie
  CookieSyncManager.getInstance().sync();

这里需要注意棒棒糖以上的会出现无法同步问题那么请这样做

if ( Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    cookieManager.flush();
} else {
    CookieSyncManager.getInstance().sync();
}

经测试，完美！

你可能想问？我想自定义像header一样加入一些自定义cookie，行，没问题，继续看！

public static List<String> createCustomCookies() {
    List<String> cookies = new ArrayList<>();
    cookies.add(“author ” + "= " + "tamic");
    cookies.add(“data” + "= " + "2016.8.15");
    cookies.add(“key” + "= " + 4fdfsfd34dfdfswer");
    cookies.add(“chanel” + "= " + "简书");
    return cookies;
}

很可能会遇到处理缓存问题，设置缓存webView缓存模式！这里在普及下相关姿势！

* 缓存模式

webview缓存模式有5种，具体方式：

LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
LOAD_DEFAULT: 根据cache-control决定是否从网络上取数据。
LOAD_CACHE_NORMAL: API level 17中已经废弃, 从API level 11开始作用同LOAD_DEFAULT模式
LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。

www.baidu.com的cache-control为no-cache，在模式LOAD_DEFAULT下，无论如何都会从网络上取数据，如果没有网络，就会出现错误页面；在LOAD_CACHE_ELSE_NETWORK模式下，无论是否有网，只要本地有缓存，都会加载缓存。本地没有缓存时才从网络上获取，
这个和Http缓存一致，我不在过多介绍，如果你想自定义缓存策略和时间，可以尝试下，

清除缓存

CacheManager来处理webview缓存相关：

clearCache(boolean)
CacheManager.clear：

在4.4以上的此api已经无法使用，也就是说缓存清空涉及安全，需要你自己去实现，就类似picasso, okhttp缓存，一样要开发者自我去实现。
当然也可以这样:

WebView.clearCache(true);

清空历史记录

mWebview.clearHistory();

需要在onPageFinished()的方法之后调用

webview支持https

webView.setWebViewClient(new SSLTolerentWebViewClient());
webView.loadUrl(myhttps url);

复写WebViewClient的nReceivedSslError函数，执行handler.cancel();给用户感知的话，来个对话框授权下就行了额

private class SSLTolerentWebViewClient extendsWebViewClient {
    public void onReceivedSslError(WebView view, final SslErrorHandler handler, SslError error) {
        AlertDialog.Builder builder = new AlertDialog.Builder(Tab1Activity.this);
        AlertDialog alertDialog = builder.create();
        String message = "SSL Certificate error.";
        switch (error.getPrimaryError()) {
            case SslError.SSL_UNTRUSTED:
                message = "The certificate authority is not trusted.";
            break;
            case SslError.SSL_EXPIRED:
                message = "The certificate has expired.";
            break;
            case SslError.SSL_IDMISMATCH:
                message = "The certificate Hostname mismatch.";
            break;
            case SslError.SSL_NOTYETVALID:
                message = "The certificate is not yet valid.";
            break;
    }

    message += " Do you want to continue anyway?";
    alertDialog.setTitle("SSL Certificate Error");
    alertDialog.setMessage(message);
    alertDialog.setButton(DialogInterface.BUTTON_POSITIVE, "OK", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            // Ignore SSL certificate errors
            handler.proceed();
        }
    });

    alertDialog.setButton(DialogInterface.BUTTON_NEGATIVE, "Cancel", new DialogInterface.OnClickListener() {
       @Override
        public void onClick(DialogInterface dialog, int which) {
            handler.cancel();
        }
    });
    alertDialog.show();
  }
}

* ProgressBarWebView

学习了上面基础知识，我这里就开始进行自定义的进度条ProgressBarWebView的封装了，这里我直接对BridgeWebView进行扩展。下面是主要部分。

 public class ProgressBarWebView extends LinearLayout {
     static final String TAG = ProgressBarWebView.class.getSimpleName();
     private NumberProgressBar mProgressBar;
     private BridgeWebView mWebView;

     public ProgressBarWebView(Context context) {
         super(context);
         this.init(context, (AttributeSet)null);
     }

     public ProgressBarWebView(Context context, AttributeSet attrs) {
         super(context, attrs);
         this.init(context, attrs);
     }

     @TargetApi(11)
     public ProgressBarWebView(Context context, AttributeSet attrs, int defStyleAttr) {
         super(context, attrs, defStyleAttr);
         this.init(context, attrs);
     }

     @TargetApi(21)
     public ProgressBarWebView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
         super(context, attrs, defStyleAttr, defStyleRes);
         this.init(context, attrs);
     }

为了使webview能有后退功能！我屏蔽了长按事件，并且对返回键建进行了拦截。

mWebView.setOnLongClickListener(new OnLongClickListener() {
        public boolean onLongClick(View v) {
            return true;
        }
 });

this.mWebView.setOnKeyListener(new OnKeyListener() {
    public boolean onKey(View v, int keyCode, KeyEvent event) {
        if(event.getAction() == 0 && keyCode == 4 &&      ProgressBarWebView.this.mWebView.canGoBack()) {
            ProgressBarWebView.this.mWebView.goBack();
            return true;
        } else {
            return false;
        }
    }
});

如果防止webview代码产生内存泄漏，请及时在activity销毁时，清空webview

@Override
public void onDestroy() {
    super.onDestroyView();
    if (mProgressBarWebView.getWebView() != null) {
        mProgressBarWebView.getWebView().destroy();
    }
}

看了构造方法你已明白，里面包含一个BridgeWebView和一个NumberProgressBar 成员属性，
* 对JsBridge进行封装

Java调用js代码：

public void registerHandler(final String handlerName, final JsHandler handler) {
    this.mWebView.registerHandler(handlerName, new BridgeHandler() {
        public void handler(String data, CallBackFunction function) {
             if(handler != null) {
                handler.OnHandler(handlerName, data, function);
             }
        }
    });
}

js调用Native

public void callHandler(final String handlerName, String javaData, final JavaCallHandler handler) {
    this.mWebView.callHandler(handlerName, javaData, new CallBackFunction() {
        public void onCallBack(String data) {
            if(handler != null) {
                handler.OnHandler(handlerName, data);
            }
        }
    });
}

为了方便上层调用我自己封装的接口JavaCallHandler 和JsHandler 。

public interface JsHandler {
    void OnHandler(String var1, String var2, CallBackFunction var3);
}

public interface JavaCallHandler {
    void OnHandler(String var1, String var2);
}

关键的东西已经介绍完，接着使用我们封装好的ProgressBarWebView。

案列使用

初始化

ProgressBarWebView  mProgressBarWebView = (ProgressBarWebView)    findViewById(R.id.login_progress_webview);

设置自定义WebViewClient

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) {
        // 可以加入header
        return null;
    }
});

加载指定Url

mProgressBarWebView.loadUrl("file:///android_asset/demo.html");

注册Js回调函数

ArrayList<String> mHandlerNames = new ArrayList<>();
mHandlers.add("login");
mHandlers.add("callNative");
mHandlers.add("callJs");
mHandlers.add("open");

回调js的方法

mProgressBarWebView.registerHandlers(mHandlers, new JsHandler() {
        @Override
        public void OnHandler(String handlerName, String responseData, CallBackFunction function) {

            if (handlerName.equals("login")) {
                Toast.makeText(MainActivity.this, responseData, Toast.LENGTH_SHORT).show();
            } else if (handlerName.equals("callNative")) {
                Toast.makeText(MainActivity.this, responseData, Toast.LENGTH_SHORT).show();

                function.onCallBack("我在上海");
            } else if (handlerName.equals("callJs")) {
              Toast.makeText(MainActivity.this, responseData, Toast.LENGTH_SHORT).show();
                // 想调用你的方法：
                function.onCallBack("好的 这是图片地址 ：xxxxxxx");
            } if (handlerName.equals("open")) {
                mfunction = function;
                pickFile();
            }
        }
    });

Native调用js

 mProgressBarWebView.callHandler("callNative", "hello H5, 我是java", new JavaCallHandler() {
        @Override
        public void OnHandler(String handlerName, String jsResponseData) {
            Toast.makeText(MainActivity.this, "h5返回的数据：" + jsResponseData, Toast.LENGTH_SHORT).show();
        }
    });

Native发送消息给js

    mProgressBarWebView.send("哈喽", new CallBackFunction() {
        @Override
        public void onCallBack(String data) {
            Toast.makeText(MainActivity.this, data, Toast.LENGTH_SHORT).show();
        }
    });
}

补充：

如果希望浏览的网页后退而不是退出浏览器，需要WebView覆盖URL加载，让它自动生成历史访问记录，那样就可以通过前进或后退访问已访问过的站点。

//改写物理按键——返回的逻辑
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if(keyCode==KeyEvent.KEYCODE_BACK){
        if(webView.canGoBack()){
            webView.goBack();//返回上一页面
            return true;
        }else{
            System.exit(0);//退出程序
        }
    }
    return super.onKeyDown(keyCode, event);
}