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 οnclick="s()">调本地方法</button> <a href="www.baidu.com">点击</a> <p id="p"></p> </body> </html>