Android中WebView使用全解

开始

在Android系统中内嵌的WebKit，这是一个浏览器内核，它帮助着我们可以浏览网页。在实际开发中，如果你想让你的App能够访问网页，那就需要用到WebView这个控件。

如何使用？

其实使用起来很简单，通常情况下我们会在布局XML中写入这个控件之后在Activity中进行调用:

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/web">

Activity/Fragment中：

WebView webView = (WebView) findViewById(R.id.web);

webView.loadUrl("https://lovelyyakir.github.io");

运行一下就能看到这样的效果：

1-1

使用进阶

webView的跳转和返回

在实际使用中你会发现，有时候我们需要点击网页中的某个链接进行网页跳转，而系统会默认加载自带浏览器，而不是我们的WebView。如果你想要让WebView跳转那又该怎么做呢？

其实很简单，我们只需要给WebView设置一个webClient，并且重写里面的shouldOverrideUrlLoading()就能很简单的实现啦。

webView.setWebViewClient(new WebViewClient(){

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return true;

}

});

谷歌工程师给我们提供了两个参数，我们需要调用load方法传入url，并且需要在返回值中返回true。允许在本WebView中进行跳转。当我们点击返回，你会发现程序退出了。当然这不是

我们想要的结果。所以我们需要在Activity中重写onKeyDown(),进行判断，当我们的页面可以返回时点击返回，返回上一个界面，无法返回执行其他操作或者退出。

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

if (webView.canGoBack()&&keyCode==KeyEvent.KEYCODE_BACK) {

webView.goBack();

return true;

}

return super.onKeyDown(keyCode,event);

}

便是这个效果：

1-2

强制关闭某个Web界面

在Native与H5交互完成的情况之下，我们需要主动关闭当前的WebView回到原生界面，这时候又该如何处理呢？其实解决途径有很多这里介绍两种解决方法：

1.我们可以监听到最后的网页的Url获取Url之后通过字符串匹配的方式关闭当前界面，你可以在WebClient中重写下面这个方法，将跳转的URL取出来。

@Override

public voidonLoadResource(WebViewview,Stringurl){

//监听到进入了关闭页面就把activity关闭

LogUtil.e("跳转的url:"+url);

}

通过匹配字符串做相应的操作。

2.通过控制台获取相关的信息，根据信息做相应操作。

webView.setWebChromeClient(newWebChromeClient(){

@Override

public boolean onConsoleMessage(ConsoleMessageconsole Message){

LogUtil.e(consoleMessage.message());

if("success".equals(consoleMessage.message())||"close window".equals(consoleMessage.message())){

finish();

}

return super.onConsoleMessage(consoleMessage);

}

});

通过WebView的setChromClient重写onConsoleMessage通过相关的信息做相应的操作。

进阶操作

WebView与Javascript进行交互

在实际开发中，调用webview，我们希望能与其他其他网页进行交互。非原生界面调用原生方法，原生界面调用非原生方法。（WebView与Javascript相互调用）。

1.Javascript调用Java原生代码

我们先看一段Javascript的代码:

$("#test1").click(function(e){window.injs.takeFrontIDCardCamera();});

$("#test2").click(function(e){window.injs.takeBackIDCardCamera();});

$("#test3").click(function(e){window.injs.takeFaceCamera();});

这里表示三个Javascript点击事件，window.injs.takeFaceCamera();这行代码中window表示窗口，injs表示作用域，紧跟着的就是方法名了。我们需要让WebView允许和Javascript进行交互，并且绑定作用域。

webView.getSettings().setJavaScriptEnabled(true);

webView.addJavascriptInterface(this,"injs");

最后重写Javascript方法:

@JavascriptInterface

public void takeFrontIDCardCamera() {

Toast.makeText(this,"Native get takeFrontIDCardCamera",Toast.LENGTH_SHORT).show();

}

@JavascriptInterface

public void takeBackIDCardCamera() {

Toast.makeText(this,"Native get takeBackIDCardCamera",Toast.LENGTH_SHORT).show();

}

@JavascriptInterface

public void takeFaceCamera() {

Toast.makeText(this,"Native get takeFaceCamera",Toast.LENGTH_SHORT).show();

}

Javascript调用原生方法时弹出一个土司验证

1-3

2.原生界面调用Javascript

下面展示几个Javascript本地方法

function  jhjcardfontjs(font){

alert(font);

}

function  jhjcardbackjs(back){

alert(back);

}

function jhjfacejs(face){

alert(face);

}

调用无参的方法时只需要在webview的load方法中写入javascript:你的方法()。像这样:

webView.loadUrl("javascript:jhjcardfontjs()");

如果有参数要注意，脚本中会有转义符需要处理一下再传入：

String var="";

var=var.replaceAll("\\", "\\\\");

webView.loadUrl("javascript:jhjcardfontjs('" + var + "')");

登陆Session同步

用户通过原生App进行登录，之后进行某些操作到H5界面，这个时候原生界面和H5界面的登陆状态不同，为了防止用户再次登陆造成的用户体验问题，我们需要让WebView同步我们原声界面的Session让用户不用重新登陆。

1.获取用户登录信息Cookie,你可以通过你使用的网络请求框架获取Cookie。这里我使用OkHttp获取我的Cookie信息，之后将这个信息保存起来：

Listcookies=OkHttpUtils

.getInstance()

.getOkHttpClient()

.cookieJar()

.loadForRequest(HttpUrl.parse(SysConfig.myFinalUrl(SysConfig.loginUrl)));

for(Cookiecookie:cookies){

//保存在内存当中

if(!cookie.value().contains("dk")){

Constant.appCookie=cookie;

}

}

2.在WebView中加载他：

CookiesessionCookie=Constant.appCookie;//这里的cookie就是上面保存的cookie

CookieSyncManager.createInstance(this);

CookieManagercookieManager=CookieManager.getInstance();

if(sessionCookie!=null){

cookieManager.removeSessionCookie();

StringcookieString=sessionCookie.name()+"="+sessionCookie.

value()+"; domain="+sessionCookie.domain();

cookieManager.setCookie(sessionCookie.domain(),cookieString);

CookieSyncManager.getInstance().sync();

wbQrContent.setWebViewClient(newWebViewClient(){

@Override

public booleanshouldOverrideUrlLoading(WebViewview,Stringurl){

view.loadUrl(url);

return true;

}

});

}

补充

1.WebViewClient和WebChromeClient有什么不同？

WebViewClient主要帮助WebView处理各种通知、请求事件而如果你想处理js、进度条等，就要用到WebChromeClient。他们的区别在于功能的区别。

2.为什么我调用JS修改原生UI报错了？

如果你在JavaScript中调用原生方法修改Ui,你需要确保这个方法执行在主线程。这是由于JavaBridge并不在主线程中。（你可以使用hander,runOnUiThread,Rxjava）