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

你可能感兴趣的:(JavaScript)