Android中Javascript中的调用
参考 张洋:2048-AI程序算法分析,并分析了android版本的源码,觉得android调用javascript代码可以很快复用web代码,提高开发效率,遂对android和javascript相互调用学习并记录。
一、什么是js与android交互?
通俗一点就是使用js代码调用java代码,或者使用java代码调用js代码。即混合编程。
二、为什么要使用js与java代码交互?
1.可以做一些js网页做本身处理不了的事情。例如:在网页上调用Android本地打电话,发短信功能、在网页上调用Android手机通讯录、在网页上调用第三方应用、在网页上调用一些Android的本地化处理(操作IO,数据库)等。
2.可以实现js开发人员与android开发人员合作开发。例如:js开发人员开发js代码供android开发人员调用,android开发人员就不必写js代码,可以专注于andrid开发,用到js的时候直接调用js代码就可以了。(反之亦然)
3.可以实现网页的动态更新。例如:可以利用js代码调用java的更新数据显示到网页上以达到动态更新网页的目的。
三、Android与JS代码相互调用
1.Android端代码
public class MyActivity extends Activity { private WebView myWebView; private ImageButton ibutton; private boolean flag = false; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my); ibutton = (ImageButton)findViewById(R.id.imageButton); myWebView = new WebView(this); myWebView.getSettings().setJavaScriptEnabled(true); //使能JavaScript myWebView.addJavascriptInterface(this,"Android"); //绑定JavaScript与Android代码 myWebView.loadUrl("file:///android_asset/index.html");//load web,即JS入口。JS调用android // ibutton.setImageDrawable(getResources().getDrawable(R.drawable.eg_bulbon)); } @JavascriptInterface // 如果target 大于等于API 17,则需要加上如下注解
public void onJSRun(boolean flag){ if(flag){ Log.e("ai~~~~~", "true"); handler.sendEmptyMessage(1); }else{ Log.e("ai~~~~~~~", "false"); handler.sendEmptyMessage(2); } } public Handler handler = new Handler(){ public void handleMessage(Message msg){ switch (msg.what){ case 1: Log.e("111111111","isCalled"); ibutton.setBackground(getResources().getDrawable(R.drawable.eg_bulbon)); try { Thread.currentThread(); Thread.sleep(200); } catch (InterruptedException e) { e.printStackTrace(); } myWebView.loadUrl("javascript:changeImage(false)"); //Android直接JS函数 break; case 2: Log.e("2222222222222","isCalled"); ibutton.setBackground(getResources().getDrawable(R.drawable.eg_bulboff)); try { Thread.currentThread(); Thread.sleep(200); } catch (InterruptedException e) { e.printStackTrace(); } myWebView.loadUrl("javascript:changeImage(true)"); break; default: break; } } }; @JavascriptInterface // 如果target 大于等于API 17,则需要加上如下注解
public void debug(String msg) { Log.e("ai", msg); }
web端代码:
<!DOCTYPE html> <html> <body> <script src="js/ai.js"></script> <script> changeImage(true); </script> <img id="myimage" onclick="changeImage()" src="img/eg_bulboff.gif"> <p>点击灯泡来点亮或熄灭这盏灯</p> </body> </html>
JS代码
function changeImage(flag) { Android.debug("the js call is run"); //JS调用Android函数 Android.onJSRun(flag); }
运行结果:隔300ms,UI变化。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。