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变化。