H5网页图
我们开发过程中，为了工作需要会用到Android与H5混合开发。混合开发就是一部分功能用原生开发，另外一部分原生的功能改为Html 5来开发。单纯的数据展示，我们可以采用WebView来渲染展示，但有时候可能会用到WebView与Javascript数据交互的情况，那么下面我们就来讲解一下两者之间如何互相调用交互的。
Android与JS是通过WebView交互，实际上就是：
- Android调用JS代码
- JS调用Android代码
前提，网络权限，WebView和webSettings配置，调用setJavaScriptEnabled(true);支持JS脚本
WebView webView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true); //开启js
...
1. Android调用JS代码
- 调用JS无参无返回值方法
android代码：
//加载完页面之后的处理
@Override
public void onPageFinished(WebView view, String url) {
//网页加载完之后，android调用js方法
webView.loadUrl("javascript:showFromAndroid()");
super.onPageFinished(view, url);
}
...
js代码：
<!doctype html>
<html>
...
function showFromAndroid() {
alert("Android调用Js");
}
...
</html>
- 调用JS有参无返回值方法
android代码：
//加载完页面之后的处理
@Override
public void onPageFinished(WebView view, String url) {
//网页加载完之后，android调用js方法
String msg ="展示内容";
webView.loadUrl("javascript:showFromAndroid('"+msg+"')");
super.onPageFinished(view, url);
}
...
js代码：
<!doctype html>
<html>
...
function showFromAndroid(param) {
alert("Android调用Js"+param);
}
...
</html>
- 调用JS有参有返回值方法
android代码：
@Override
public void onPageFinished(WebView view, String url) {
//网页加载完之后，android调用js方法
mWebView.evaluateJavascript（"javascript:showFromAndroid()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
}
});
}
js代码：
<!doctype html>
<html>
...
function showFromAndroid(param) {
return "Android调用Js"+param;
}
...
</html>
2. JS调用Android代码
(1) 定义一个交互的类，@JavascriptInterface注解
public class AndroidForJs {
private Context context;
public AndroidForJs(Context context) {
this.context = context;
}
//api17以后，只有public且添加了 @JavascriptInterface 注解的方法才能被调用
@JavascriptInterface
public void showToast(String toast) {
Toast.makeText(context, "js调用android showToast():" + toast, Toast.LENGTH_SHORT).show();
}
}
(2) 注册JavaScriptInterface接口，JS绑定
webView.addJavascriptInterface(new AndroidForJs(this),"AndroidView");
(3) 方法调用，例如：window.AndroidView.show("JS called~");
<!doctype html>
<html>
...
function showAndroidToast(toast) {
window.AndroidView.showToast(toast);
}
...
</html>
网友评论