Android Html5开发

Posted 2020-06-18

本文的目的是学习如何进行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异步方法

这三个问题解决之后，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)//异步执行方法

三个方法,下面会通过这三个方法,来学习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版本的Html5开发框架PhoneGap在实现Android和JavaScript的相互调用的时候和本文使用的相同的方式，包括异步调用的设计.但是PhoneGap的核心Cordova对参数类型的转换,异步消息的队列管理做了很好的封装,让使用者可以更简单的实现Android和JavaScript之间的混合开发.下一篇文章会介绍Cordova框架.

思考:

1.Android和JavaScript之间能传哪些类型的参数?如果将各种类型的Android参数传递给JavaScript,JavaScript如何解析?