参考 张洋：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变化。
Android中Javascript中的调用
时间： 2024-10-05 23:18:32