標籤：android style blog http java color
參考 張洋：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變化。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
