hybrid App开发也不是什么新鲜事了，其中native和h5之间的交互则是必不可少的。Android中是如何和H5交互的？
1、webView加载页面
我们都知道在Android中是通过webView来加载html页面的，根据HTML文件所在的位置不同写法也不同：
mWebView
.loadUrl(
"file:///android_asset/test.html")
mWebView
.loadUrl(
"http://www.baidu.com")
如果只是这样调用mWebView.loadUrl()加载的话,那么当你点击页面中的链接时，页面将会在你手机默认的浏览器上打开。那如果想要页面在App内中打开的话，那么就得设置setWebViewClient：
mWebView.setWebViewClient(
new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
mWebView.loadUrl(url);
return true;
}
}
});
2、Android本地通过Java调用HTML页面中的JavaScript方法
想要调用js方法那么就必须让webView支持
WebSettings webSettings = mWebView
.getSettings();
webSettings
.setJavaScriptEnabled(
true);
若调用的js方法没有返回值，则直接可以调用mWebView.loadUrl("JavaScript:do()");其中do是js中的方法；若有返回值时我们可以调用mWebView.evaluateJavascript()方法：
mWebView.evaluateJavascript(
"sum(1,2)",
new ValueCallback<String>() {
@
Override
public void onReceiveValue(String value) {
Log.e(TAG,
"onReceiveValue value=" +
value);
}
});
js代码如下：
<script type="text/javascript">
function sum(a,b){
return a+b;
}
function do(){
document.getElementById("p").innerHTML="hello world";
}
</script>
2、js调用Android本地Java方法
在Android4.2以上可以直接使用@JavascriptInterface注解来声明，下面是在一个本地Java方法
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
定义完这个方法后再调用mWebView.addJavascriptInterface()方法：
mWebView.addJavascriptInterface(
new JsInteration(),
"android");
那么在js中怎么来调用呢？
<script type="text/javascript">
function s(){
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
</script>
4、拦截HTML页面中的点击事件
mWebView.setWebViewClient(
new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.equals(
"file:///android_asset/test2.html")) {
Log.e(TAG,
"shouldOverrideUrlLoading: " + url);
startActivity(
new Intent(MainActivity.
this,Main2Activity.class));
return true;
}
else {
mWebView.loadUrl(url);
return false;
}
}
});
以上就是Java调用js方法以及js调用Java方法的实现交互方式中的一种。下面给出完整代码：
mainActivity
public class MainActivity extends AppCompatActivity {
public static final String TAG =
"MainActivity";
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webView);
mWebView.loadUrl(
"file:///android_asset/test.html");
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(
true);
mWebView.addJavascriptInterface(
new JsInteration(),
"android");
mWebView.setWebViewClient(
new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.equals(
"file:///android_asset/test2.html")) {
Log.e(TAG,
"shouldOverrideUrlLoading: " + url);
startActivity(
new Intent(MainActivity.
this,Main2Activity.class));
return true;
}
else {
mWebView.loadUrl(url);
return false;
}
}
});
}
@TargetApi(Build.VERSION_CODES.KITKAT)
public void onClick(View v) {
mWebView.evaluateJavascript(
"sum(1,2)",
new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.e(TAG,
"onReceiveValue value=" + value);
}
});
}
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
}
test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function sum(a,b){
return a+b;
}
function s(){
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
</script>
</head>
<body>
<button onclick="s()">调用本地方法
</button>
<a href="file:///android_asset/test2.html">点击
</a>
<p id="p"></p>
</body>
</html>
