Android中WebView的开发
在Android手机中内置了一款高性能webkit内核浏览器，在SDK中封装为一个叫做WebView组件。下面总结一下使用webview
一、webview的基本使用方法
1. 添加权限：AndroidManifest.xml中设置权限"android.permission.INTERNET",否则会出Web page not available错误。
2. 在要Activity中生成一个WebView组件：WebView webView = new WebView(this);或者可以在activity的layout文件里添加webview控件
3. 设置WebView基本信息：
mWebView = (WebView) findViewById(R.id.wb);
mWebView.getSettings().setJavaScriptEnabled(true);//支持javascript
mWebView.requestFocus();//触摸焦点起作用
mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);//取消滚动条
mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);//设置允许js弹出alert对话框
mWebView.addJavascriptInterface(new JsInteration(), "control");//js访问android，定义接口
//设置了Alert才会弹出，重新onJsAlert（）方法return true可以自定义处理信息
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result)
{
//return super.onJsAlert(view, url, message, result);
Toast.makeText(MainActivity.this, message, Toast.LENGTH_LONG).show();
return true;
}
});
4. 设置WevView要显示的网页：互联网用:webView.loadUrl("http://www.google.com"); 本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets文件中
5. 如果希望点击链接由自己处理，而不是新开Android的系统browser中响应该链接。给WebView添加一个事件监听对象（WebViewClient)并重写其中的一些方法： shouldOverrideUrlLoading：对网页中超链接按钮的响应。当按下某个连接时WebViewClient会调用这个方法，并传递参数
public boolean shouldOverrideUrlLoading(WebView view,String url){ view.loadUrl(url); return true; }
6. 处理https请求webView默认是不处理https请求的，页面显示空白，需要进行如下设置：
webView.setWebViewClient(new WebViewClient() {
@Override
public void onReceivedSslError(WebView view,
SslErrorHandler handler, SslError error) {
handler.proceed();
// handler.cancel();
// handler.handleMessage(null); }
});
onReceivedSslError为webView处理ssl证书设置
其中handler.proceed();表示等待证书响应handler.cancel();表示挂起连接，为默认方式handler.handleMessage(null);
可做其他处理另外还有其他一些可重写的方法
1，接收到Http请求的事件onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm)
2，载入页面完成的事件public void onPageFinished(WebView view, String url){ }同样道理，我们知道一个页面载入完成，于是我们可以关闭loading条，切换程序动作。
3，载入页面开始的事件public void onPageStarted(WebView view, String url, Bitmap favicon) { }这个事件就是开始载入页面调用的，通常我们可以在这设定一个loading的页面，告诉用户程序在等待网络响应。 通过这几个事件，我们可以很轻松的控制程序操作，一边用着浏览器显示内容，一边监控着用户操作实现我们需要的各种显示方式，同时可以防止用户产生误操作。
4. 如果用webview点链接看了很多页以后，如果不做任何处理，点击系统“Back”键，整个浏览器会调用finish()而结束自身，如果希望浏览的网页回退而不是退出浏览器，需要在当前Activity中处理并消费掉该Back事件。 覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法。
@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {
webView.goBack();// 返回前一个页面
return true;
}
return super.onKeyDown(keyCode, event);
}
二、webview与js的交互（相互调用参数、传值）
前端网页全部代码,文章最后有示例项目完整源码
<!DOCTYPE html><html><head> <meta charset="utf-8">
<title>jaydenxiao遇上了webview</title>
<script>
function sayHello() {
alert("我是无参无返回toast")
}
function alertMessage(message) {
alert(message)
}
function toastMessage(message) {
window.control.toastMessage(message)
}
function sumToJava(number1, number2){
window.control.onSumResult(number1 + number2)
}
function sumToJava2(number1, number2) {
return number1 + number2;
}
</script>
</head><body>
<button type="button" id="button" onclick="toastMessage('js调用了android方法')">js访问android中方法
</button>
</body>
</html>
调用示例：
js调用Java
调用格式为window.jsInterfaceName.methodName(parameterValues)此例中我们使用的是control作为注入接口名称。
function toastMessage(message) {
window.control.toastMessage(message)
}
function sumToJava(number1, number2){
window.control.onSumResult(number1 + number2)
}
Java调用JS
webView调用js的基本格式为webView.loadUrl(“javascript:methodName(parameterValues)”)****1. android调用js无参无返回值函数
final String call = "javascript:sayHello()";
mWebView.post(new Runnable() {
@Override
public void run() {
mWebView.loadUrl(call);
}
});
2. android调用js有参无返回值函数
final String call = "javascript:alertMessage(\"" + "我是android传过来的内容,hey man" + "\")";
mWebView.post(new Runnable() {
@Override
public void run() {
mWebView.loadUrl(call);
}
}
);
3. android调用js有参有返回值函数（4.4之前）
Android在4.4之前并没有提供直接调用js函数并获取值的方法，所以在此之前，常用的思路是 java调用js方法，js方法执行完毕，再次调用java代码将值返回。
(1).android调用js代码
final String call = "javascript:sumToJava(1,2)";mWebView.post(new Runnable() {
@Override public void run() {
mWebView.loadUrl(call); }
});
(2).js函数处理，并将结果通过调用android方法返回
网页端：
function sumToJava(number1, number2){ window.control.onSumResult(number1 + number2) }
(3).android在回调方法中获取js函数返回值
@JavascriptInterfacepublic void onSumResult(int result) {
Toast.makeText(getApplicationContext(), "我是android调用js方法(4.4前)，入参是1和2，
js返回结果是" + result, Toast.LENGTH_LONG).show();
}
4. android调用js有参有返回值函数（4.4以上）：****
Android 4.4以上使用evaluateJavascript即可。这里展示一个简单的交互示例 具有返回值的js方法js代码如下：
function sumToJava2(number1, number2) {return number1 + number2;}
android代码如下：
@TargetApi(Build.VERSION_CODES.KITKAT)
public void Android2JsHaveParmHaveResult2(View view) {
mWebView.evaluateJavascript("sumToJava2(3,4)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String Str) {
Toast.makeText(getApplicationContext(), "我是android调用js方法(4.4后)，入参是3和4，
js返回结果是" + Str, Toast.LENGTH_LONG).show();
}
} );
}
知识点
1.图片自适应
当我用webview直接显示该网页的时候，图片并不能自适应，只能够显示一部分。那么如何做到自适应手机屏幕呢？具体见代码：
WebSettings webSettings = view.getSettings();
// User settings
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);//适应内容大小
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
注意：对于比较复杂的网页，该方法不一定有效，需要开发者自行测试。
2.获取图片地址
那如何下载网页中的图片呢？我们可以通过webview中的setOnLongClickListener获取HitTestResult对象，通过判断该对象的类型获取点击图片的URL，然后把图片下载到本地。
webwiew.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(final View v) {
final WebView.HitTestResult result = ((WebView) v).getHitTestResult();
int type = result.getType();
if (type == WebView.HitTestResult.IMAGE_TYPE) {
WebView.HitTestResult result = ((WebView) v).getHitTestResult();
String imgurl = result.getExtra();//图片地址
}
return false;
}
});
HitTestResult的类型有：
| 类型 | 名称 | 作用 |
|---|---|---|
| int | ANCHOR_TYPE | 已经废弃 |
| int | EDIT_TEXT_TYPE | 打开一个可编辑的区域 |
| int | EMAIL_TYPE | 邮件 |
| int | GEO_TYPE | map地址 |
| int | IMAGE_ANCHOR_TYPE | 已经废弃 |
| int | IMAGE_TYPE | 图片 |
| int | PHONE_TYPE | 电话号码 |
| int | SRC_ANCHOR_TPE | html的a标签，内容是一个http地址 |
| int | SRC_IMAGE_ANCHOR_TYPE | html的a标签，内容由http及image |
| int | UNKNOW_TYPE | 未知内容 |
