参考 张洋：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变化。