文章目录
概述
由于手机硬件资源的快速提升，使得采用混合开发的可能性逐渐成为现实并且流行起来。Android开发中最为简单的方式就是通过Webview来嵌入一个网页使web作为App的一部分。
使用场景
- 非重交互场景
- 非计算密集型场景
- 对UI复杂度要求不高的场景
以上可见，《王者荣耀》断然不会使用混合开发的，其实谷歌举了两个最适合的场景：
第一：内容需要动态更新的场景，例如APP里面的法律条款展示等。
第二：总是需要通过网络来拉取展示内容的场景，例如新闻展示。
交互方式
我们知道，网页的行为现在是使用JavaScript来处理的，而Android原生使用的是Java（Kotlin），交互的意思即原生可以调用JavaScript方法，而JavaScript也可以调用原生的方法。
Java调用JS代码的方法有2种：
- 通过WebView的loadUrl（） 方法
- 通过WebView的evaluateJavascript（）方法
JS调用Java代码的方法有3种：
- 通过WebView的addJavascriptInterface（）进行对象映射
- 通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
- 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息
先上一张效果图：
Java调用JS代码
上面提到Android提供了两种方法来实现Java执行Js代码，其中evaluateJavascript()方法是从 API 19（4.4版本）开始提供的，而现在Android已经发布到 API 28 (9.0)了, 4.4以下版本占的比例已经非常少了，相信过不了多久基本上就不存在了，所以我们要放下历史包袱，直接使用新的方法。最重要的是，在Android 4.4及其以上版本Google 采用了 Chromium(http://www.chromium.org/) 作为系统WebView的底层内核，而不是WebKit了。新的webview对HTML5,CSS3,Javascript的支持更为广泛，而且js执行引擎直接换成了V8，执行效率大大提升.
void evaluateJavascript(String script, ValueCallback<String> resultCallback){}
参数script : 要执行的JS代码。
参数 resultCallback: Js代码执行后的返回值
具体步骤：
第一：新建一个工程，新建一个Activity，包含一个Webview控件。
第二：新建一个demo.html的文档，作为要在webview中展示的web页面，里面含有js代码。将其放在工程中的assets文件家中。
<!DOCTYPE html>
<html>
<head lang="zh-cmn-Hans">
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width"/>
<title>JsBridgeDemo</title>
</head>
<style>
.btn {
text-align: center;
background: #d8d8d8;
color: #222;
padding: 20px;
margin: 30px;
font-size: 24px;
border-radius: 4px;
box-shadow: 4px 2px 10px #999;
}
.btn:active {
opacity: .7;
box-shadow: 4px 2px 10px #555;
}
</style>
<body>
<div class="btn" onclick="showAndroidToast('Js调用Java')">Js调用Java函数</div>
<p id="content"></p>
<script type="text/javascript">
function showAndroidToast(toast) {
android.showToast(toast);
}
function fillContent(){
document.getElementById("content").innerHTML ="此处内容由Java调用Js方法展示在Webview上";
return "ok";
}
</script>
</body>
第三步：在activity中通过webview调用Js代码。
final WebView myWebView=findViewById(R.id.webView);
WebSettings webSettings=myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
myWebView.loadUrl("file:///android_asset/demo.html");
Button btnCallJs=findViewById(R.id.btn_call_js);
btnCallJs.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
myWebView.evaluateJavascript("fillContent()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Toast.makeText(MainActivity.this,value,Toast.LENGTH_SHORT).show();
}
});
}
});
首先设置允许Webview执行Js，然后加载assets文件夹中的demo.html网页，最后在点击按钮的时候使用evaluateJavascript()方法来执行Js代码。
JS代码的调用需要在web页面加载完成后才可以正常执行。可以通过监听WebViewClient的onPageFinished 回调来完成,如下代码所示。
myWebView.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView view, String url){
super.onPageFinished(view, url);
//执行Js代码
}
});
JS调用Java代码
上面提到有三种方法可以实现Js调用Java代码的目的，其中第一种简单明了，为Google推荐的方法，但是其在API 17（4.2）之前存在任意执行漏洞。但是我们前面分析了，4.4 都快没有了，4.2 就更别说了，所以我们直接针对Android4.4编程，使用这个方法是安全的。
具体步骤：
第一步：新建一个接口类JavaInterface ，里面定义给Js调用的方法。这些方法必须是public的，而且必须使用@JavascriptInterface进行注解，例如下面的代码示例中的showTost()。
public class JavaInterface {
private Context mContext;
JavaInterface(Context c) {
mContext = c;
}
@JavascriptInterface
public void showToast(String toast) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}
}
第二步：给Webview添加与Js的映射关系
myWebView.addJavascriptInterface(new JavaInterface(this),"android");
参数1：接口类的对象
参数2：Java对象映射到Js的对象名，可以在Js中使用这个对象来调用接口类中的方法。
第三步：在Js中调用Java方法
<script type="text/javascript">
function showAndroidToast(toast) {
android.showToast(toast);
}
</script>
可以看到，在js中可以使用android这个Js对象，直接调用我们定义在JavaInterface类中的方法。
总结
以上就是Android开发中使用Webview 完成原生与web的交互。开篇说道除了本文介绍的方式，还有其他几种方式，大部分不是有历史包袱就是本意不是用来做这件事情的，所以应该优先使用本文的方式，如果有的同学需要了解其他方法，可以参考这篇博客，写的比较全。
如果是在项目中使用而不是为了学习，推荐使用前人写好的三方库，例如DSBridge，JsBridge等。特别是dsbridge，三端全有，现代简洁，易用。