安卓端主程序,布局文件中加一个按钮和WebView控件,结果在logcat中查看
public class MainActivity extends Activity {
WebView mWebView;
@SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//必要按钮布局,webView绑定
Button mBtn = (Button) findViewById(R.id.btn_1);
mWebView= (WebView) findViewById(R.id.wv_view);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.addJavascriptInterface( new WebAPPInterface(), "app_api");//Web中的接口对象
mWebView.loadUrl("file:///android_asset/test.html");
mBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//原生app调用 web里面的函数
mWebView.loadUrl("javascript:func_in_js()");
}
});
}///end onCreate(...)
public class WebAPPInterface {
public WebAPPInterface() {
// TODO Auto-generated constructor stub
}
@JavascriptInterface //sdk17版本以上加上注解
public void traceTxt(String txt){
//这种函数提供给 Web控制App行为使用
Log.i("_Trace_","Android_String="+txt);
}
}
}
H5文件放在安卓项目文件夹assets路径下,文件名给为test.html ,JS中的代码:
<!DOCTYPE html>
<html>
<head>
<meta chatset="utf-8" />
<title>This is a test</title>
<style>
*{
margin: 0;
padding: 0;
}
a{
display: block;
width: 100px;
padding: 1em;
margin: 0 auto;
font-size: 1em;
color: #FFF2233;
background-color: highlight;
text-decoration: none;
}
</style>
</head>
<body>
<a>js中调用本地方法</a>
<script>
var hh=1;
function func_in_js(){
hh++;
document.getElementById("helloweb").innerHTML="Click_Time="+hh;
}
var aTag = document.getElementsByTagName('a')[0];
aTag.addEventListener('click', function(){
//调用android本地方法
hh++;
app_api.traceTxt("Number->"+hh);
//调用此方法后,在android的logcat中应该会看到输出效果
return false;
}, false);
</script>
<p></p>
<div id="helloweb">
</div>
</body>
</html>