Android Html5開發(一)

本文的目的是學習如何進行Android native+html5的混合開發。

首先什么是Android native+html5的混合開發？

通常來說就是使用html5+css+JavaScript等Web前端開發技術開發出html文件,再通過Android 的WebView加載html文件實現App的UI開發 ，Android系統提供數據庫、通訊錄、攝像頭、音頻等API供JavaScript調用。

因此在混合開發過程中需要解決下面三個問題：

1.Android 如何調用JavaScript方法

2.JavaScript如何調用Android方法

3.JavaScrpit如何調用Android異步方法

4.Android如何調用JavaScript的異步方法

這四個問題解決之后，Android native+html5的混合開發就只需要分別進行html5+css+JavaScript 的Web前端開發和Android native開發了。

下面通過示例來學習如何解決上面四個問題。

1.准備工作

1.1 設置WebView的WebSettings使WebView 可以執行JavaScript。

webview = (WebView) findViewById(R.id.myWebView); // 得到設置屬性的對象
WebSettings webSettings = webview.getSettings(); // 使能JavaScript
webSettings.setJavaScriptEnabled(true); // 支持中文，否則頁面中中文顯示亂碼
webSettings.setDefaultTextEncodingName("UTF-8");

1.2 為WebView添加JavascriptInterface,這一步至關重要,為JavaScript調用Android代碼提供了接口

//傳入一個Java對象和一個接口名,在JavaScript代碼中用這個接口名代替這個對象,通過接口名調用Android接口的方法
webview.addJavascriptInterface(new JavascriptInterfaceImpl(this, webview), "Android");

 JavascriptInterfaceImpl 的實現見Demo。

在 JavascriptInterfaceImpl 中定義了

1.void showToast(String toast)//顯示Toast
2.String syncExec()//同步執行方法
3.void asyncExec(final String msg, final String callbackId)//異步執行方法
4.

四個方法,下面會通過這四個方法,來學習JavaScript和Android之間的相互調用。

 

1.3 為WebView設置WebViewClient,這一步對使用JavaScript不是必須的。

// WebViewClient 主要幫助WebView處理各種通知、請求事件的
webview.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } }); 

1.4 為WebView設置WebChromeClient，不設置WebChromeClient的話，JavaScript的彈框消息會無法顯示。

// WebChromeClient主要用來輔助WebView處理Javascript的對話框、網站圖標、網站標題以及網頁加載進度等
webview.setWebChromeClient(new WebChromeClient() {  3  @Override  4             public void onReceivedTitle(WebView view, String title) {  5  }  6 
 @Override  8             public boolean onJsAlert(WebView view, String url, String message,  9  JsResult result) { 10                 return super.onJsAlert(view, url, message, result); 11  } 12         });

1.5 加載本地html頁面

// 載入頁面：本地html資源文件
webview.loadUrl("file:///android_asset/sample.html");

 Sample.html文件放置在assets目錄下面，Sample.html的具體實現查看Demo

 

2.Android調用JavaScript方法

 Android調用JavaScript方法非常簡單,例如 Sample.html中定義了一個名為myFunction的方法

    function myFunction() 2  { 3         alert("Hello World!"); 4  } 5     

在Android里面執行下面代碼即可調用該JavaScript方法

webview.loadUrl("javascript:myFunction()");

注意兩點:

1.webview.loadUrl()方法需要在UI線程中調用

2.調用的JavaScript方法需要定義在WebView加載的html文件中

在Android4.4以上的系統還提供了另外一個方法可以執行JavaScrpit代碼

public void evaluateJavascript (String script, ValueCallback<String> resultCallback)

3.JavaScript如何調用Android方法

在1.2中我們給WebView添加JavascriptInterface,JavascriptInterface的實現類是JavascriptInterfaceImpl,接口名是"Android",因此我們可以在JavaScript代碼中通過Android這個接口名來調用JavascriptInterfaceImpl里面的Android方法。

例如,調用JavascriptInterfaceImpl的syncExec方法.該方法的結果是同步返回的

   //調用綁定的Java對象的方法，同步顯示android返回的內容
    function showAndroidSyncMsg() 3  { 4         console.log("showAndroiHello method"); 5         var str = Android.syncExec(); 6  alert(str); 7     }

4.JavaScript如何調用Android異步方法

JavaScript如何調用Android異步方法是一個難點,因為沒有提供直接的接口可以調用Android異步方法,並且接收Android異步返回的結果.在此之前我們先看下Java是如何處理異步方法的

    public interface Callback {  2             void onResult(String result);  3  }  4 
    public void asyncFun(final Callback callback) {  6             new Thread() {  7  @Override  8                 public void run() {  9                     SystemClock.sleep(3 * 1000); 10                     callback.onResult("async result"); 11  } 12  }.start(); 13  } 14 
    public void test() { 16             this.asyncFun(new Callback() { 17 
 @Override 19                 public void onResult(String result) { 20                     Log.d(TAG, "result == " + result); 21  } 22  }); 23         }

在Java中是通過定義一個回調接口,在異步方法執行完后,在回調這個回調接口的方法,將結果傳給調用者.

同樣的道理,我們也可以為JavaScript調用Android異步方法設計相同的調用模式.

例如

/**
 * 異步方法  3  * @param msg  4  * @param callbackId  5      */
 @JavascriptInterface  7     public void asyncExec(final String msg, final String callbackId) {  8         new Thread() {  9  @Override 10             public void run() { 11                 SystemClock.sleep(5 * 1000); 12                 mHandler.post(new Runnable() { 13  @Override 14                     public void run() { 15                         String url = "javascript:" + callbackId + "('" + msg 16                                 + " from android " + "')"; 17  mWebView.loadUrl(url); 18  } 19  }); 20  } 21  }.start(); 22     }

該方法有兩個參數,一個是傳進來的數據,一個是要回調的JavaScript方法名.asyncExec在異步執行完后,通過webview.loadUrl()方法將結果回調給JavaScript的回調方法.

在JavaScript端需要定義一個回調方法接收回調結果,例如:

//調用綁定的Java對象的方法，異步顯示android返回的內容
function showAndroidAsyncMsg() { console.log("showAndroidAsyncMsg method"); //異步回調方法
    //調用android 異步接口
    Android.asyncExec("異步消息", "onCallback"); } // 定義回調方法
function onCallback(msg) { alert(msg); }

5.Android如何調用 JavaScript的異步方法

Android調用JavaScript異步方法和第二節中調用JavaScript方法是一樣的,只是這里的JavaScript方法是異步的,關於JavaScript的異步實現,可以參照

http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html

JavaScript的異步方法也可以通過回調的方式,將結果回調給Android.首先需要在JavascriptInterfaceImpl中定義一個方法,接收JavaScript的回調結果,例如本文中的

public void callBack(String msg) //接收JavaScript的異步消息

編寫一個JavaScript異步方法示例

      //異步方法
      function asyncFun() { 3         console.log("asyncFun method");　　　　 4         setTimeout(function() { 5           console.log("異步執行");　　　　　　 6           Android.callBack("來自JavaScript的異步消息");　　　　 7  }, 8         5000);　　 9       }

在Android中調用該異步方法

// 調用JavaScript異步方法
webview.loadUrl("javascript:asyncFun()");

6.小結

至此，已經學習了Android和JavaScript之間的相互調用，Android版本的Html5開發框架PhoneGap在實現Android和JavaScript的相互調用的時候和本文使用的相同的方式，包括異步調用的設計.但是PhoneGap的核心Cordova對參數類型的轉換,異步消息的隊列管理做了很好的封裝,讓使用者可以更簡單的實現Android和JavaScript之間的混合開發.下一篇文章會介紹Cordova框架.

思考:

1.Android和JavaScript之間能傳哪些類型的參數?如果將各種類型的Android參數傳遞給JavaScript,JavaScript如何解析?

 

Demo下載地址

http://files.cnblogs.com/files/kuangbiao/Html5Demo.tar.gz

html相關知識參考

http://www.w3cschool.cn/index-5.html

推薦javascript教程

<javascript權威指南>