首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

利用HTML5开发Android札记(中篇)

2012-08-16 
利用HTML5开发Android笔记(中篇)?资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个很简明的demo

利用HTML5开发Android笔记(中篇)

?

资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个很简明的demo 可以作为入门基础

学习的过程中做了点笔记 整理如下 虽然内容比较简单 但是数量还是比较多的 所以分了3篇

(上)包括Android设备多分辨率的问题,Android中构建HTML5应用程序基础

(中)包括Android与JS之间的互动,Android处理JS的警告对话框等,Android中的调试

(下)包括本地储存在Android中的应用,地理位置的应用,离线应用的构建

—————————————————————————————— 分割线 ————————————————————————————————————————

进入正题

● Android与JS之间的互相调用交互

WebView默认是禁用JavaScript的,在启用后,就可以在两者间建立接口进行调用

?

WebView myWebView = (WebView) findViewById(R.id.webview);WebSettings webSettings = myWebView.getSettings();webSettings.setJavaScriptEnabled(true);

?

(这里的webSetting用处非常大 可以开启很多设置 在之后的本地存储,地理位置等之中都会使用到)

1 在JS中调用Android的函数方法

?

首先 需要在Android程序中建立接口

?

final class InJavaScript {        public void runOnAndroidJavaScript(final String str) {        handler.post(new Runnable() {                public void run() {                     TextView show = (TextView) findViewById(R.id.textview);                    show.setText(str);                }            });        }    }
?

?

?

    //把本类的一个实例添加到js的全局对象window中,    //这样就可以使用window.injs来调用它的方法    webView.addJavascriptInterface(new InJavaScript(), "injs");

?

在JavaScript中调用

function sendToAndroid(){ var str = "Cookie call the Android method from js"; window.injs.runOnAndroidJavaScript(str);//调用android的函数}
?

2 在Android中调用JS的方法

?

JS中的方法

function getFromAndroid(str){ document.getElementById("android").innerHTML=str;}
?

Android调用该方法

Button button = (Button) findViewById(R.id.button);        button.setOnClickListener(new OnClickListener() {        public void onClick(View arg0) {         //调用javascript中的方法            webView.loadUrl("javascript:getFromAndroid('Cookie call the js function from Android')");        }    });
?

3 Android中处理JS的警告,对话框等

在Android中处理JS的警告,对话框等需要对WebView设置WebChromeClient对象

//设置WebChromeClientwebView.setWebChromeClient(new WebChromeClient(){//处理javascript中的alertpublic boolean onJsAlert(WebView view, String url, String message, final JsResult result) {//构建一个Builder来显示网页中的对话框Builder builder = new Builder(MainActivity.this);builder.setTitle("Alert");builder.setMessage(message);builder.setPositiveButton(android.R.string.ok,new AlertDialog.OnClickListener() {public void onClick(DialogInterface dialog, int which) {result.confirm();}});builder.setCancelable(false);builder.create();builder.show();return true;};//处理javascript中的confirmpublic boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {Builder builder = new Builder(MainActivity.this);builder.setTitle("confirm");builder.setMessage(message);builder.setPositiveButton(android.R.string.ok,new AlertDialog.OnClickListener() {public void onClick(DialogInterface dialog, int which) {result.confirm();}});builder.setNegativeButton(android.R.string.cancel,new DialogInterface.OnClickListener() {public void onClick(DialogInterface dialog, int which) {result.cancel();}});builder.setCancelable(false);builder.create();builder.show();return true;};@Override//设置网页加载的进度条public void onProgressChanged(WebView view, int newProgress) {MainActivity.this.getWindow().setFeatureInt(Window.FEATURE_PROGRESS, newProgress * 100);super.onProgressChanged(view, newProgress);}//设置应用程序的标题titlepublic void onReceivedTitle(WebView view, String title) {MainActivity.this.setTitle(title);super.onReceivedTitle(view, title);}});
?

● Android中的调试

通过JS代码输出log信息

Js代码: console.log("Hello World");Log信息: Console: Hello World http://www.example.com/hello.html :82 
?

在WebChromeClient中实现onConsoleMesaage()回调方法,让其在LogCat中打印信息

WebView myWebView = (WebView) findViewById(R.id.webview);myWebView.setWebChromeClient(new WebChromeClient() {public void onConsoleMessage(String message, int lineNumber, String sourceID) {Log.d("MyApplication", message + " -- From line "+ lineNumber + " of "+ sourceID);}});

以及

WebView myWebView = (WebView) findViewById(R.id.webview);myWebView.setWebChromeClient(new WebChromeClient() {public boolean onConsoleMessage(ConsoleMessage cm) {Log.d("MyApplication", cm.message() + " -- From line "+ cm.lineNumber() + " of "+ cm.sourceId() );return true;}});
?

*ConsoleMessage 还包括一个 MessageLevel 表示控制台传递信息类型。 您可以用messageLevel()查询信息级别,以确定信息的严重程度,然后使用适当的Log方法或采取其他适当的措施。

?

后面的内容在下篇中继续

?

?

热点排行