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 1.void showToast(String toast)//显示Toast
3 2.String syncExec()//同步执行方法
5 3.void asyncExec(final String msg, final String callbackId)//异步执行方法
6 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的弹框消息会没法显示。

 1 // WebChromeClient主要用来辅助WebView处理Javascript的对话框、网站图标、网站标题以及网页加载进度等
 2 webview.setWebChromeClient(new WebChromeClient() {  3  @Override  4             public void onReceivedTitle(WebView view, String title) {  5  }  6 
 7  @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的方法

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

在Android里面执行下面代码便可调用该JavaScript方法

1 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方法.该方法的结果是同步返回的

1    //调用绑定的Java对象的方法，同步显示android返回的内容
2     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是如何处理异步方法的

 1     public interface Callback {  2             void onResult(String result);  3  }  4 
 5     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 
15     public void test() { 16             this.asyncFun(new Callback() { 17 
18  @Override 19                 public void onResult(String result) { 20                     Log.d(TAG, "result == " + result); 21  } 22  }); 23         }

在Java中是经过定义一个回调接口,在异步方法执行完后,在回调这个回调接口的方法,将结果传给调用者.

一样的道理,咱们也能够为JavaScript调用Android异步方法设计相同的调用模式.

例如

 1 /**
 2  * 异步方法  3  * @param msg  4  * @param callbackId  5      */
 6  @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异步方法示例

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

在Android中调用该异步方法

1 // 调用JavaScript异步方法
2 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权威指南>