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的异步方法也可以通过回调的方式,将结果回调给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()");
《JavaScript权威指南》