您的位置：首页 > 移动开发 > Android开发

Android 与H5交互的小Demo

2017-05-09 16:16 267 查看

Android与H5交互

最近H5与Android交互，混合型开发看样子很火啊，平时也只是听说，都没有实际的去玩过，正好今天玩了玩，并不是很难啊，今天就记录下来步骤，方便以后直接查看

Web View确实是Android提供的一个很强大的控件啊，以前用的不多，现在才发现它的功能确实不可小觑

WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);

想要与H5交互，这步还真的必不可少

//加载assets文件夹下的test.heml页面
webView.loadUrl("file:///android_asset/test.html");

这步就是加载assets文件夹下的HTML文件

当让就这样的话，也是用你手机里的浏览器去打开的，想要用本App去加载的话还要设置WebViewClient

webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
webView.loadUrl(url);
return true;
}
});

这样我们写的App就能去加载网页了

说到交互，就是H5里面的代码和本地Java代码互相调用嘛，那就先定义个让H5 去调用的方法

private class JsInteration {
@JavascriptInterface
public String back(){
return "hello world";
}
}

记得加上注解，这个注解的功能语义上就已经很明显了

接着，Java代码中调用WebView的一个方法

webView.addJavascriptInterface(new JsInteration(),"android");

这样在H5里面我们就可以调用Java本地方法了，第二个参数嘛，随便起，只要和H5里面的代码想对应就行，代码在后面会展示滴

接着就来看Java是怎么调用JS的吧

调用JS的基本格式为 webView.loadUrl("javascript:methodName(parameterValues)");

比方说我们调用没有返回值的方法

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

webView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String s) {
Toast.makeText(MainActivity.this,s,Toast.LENGTH_SHORT).show();
}
});

如果说JS里面的方法是带返回值的，也可直接调用evaluateJavascript（）就行了，个人比较喜欢用这个

MainActivity.class

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView= (WebView) findViewById(R.id.webview);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
//加载assets文件夹下的test.heml页面
webView.loadUrl("file:///android_asset/test.html");

webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
webView.loadUrl(url);
return true;
}
});

webView.addJavascriptInterface(new JsInteration(),"android");

}
@TargetApi(Build.VERSION_CODES.KITKAT)
public void onClick(View view){
webView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String s) {
Toast.makeText(MainActivity.this,s,Toast.LENGTH_SHORT).show();
}
});
}

private class JsInteration {
@JavascriptInterface
public String back(){
return "hello world";
}
}

test.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="www.baidu.com">点击</a>
<p id="p"></p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航