android加载本地html5

  • 时间:
  • 浏览:1044
  • 来源:成都艾邦软件开发
HTML5是现在最热门的技术之一Android自带的WebKit浏览器对于HTML5有着不错的支持而各种浏览器的最新版本都开始普遍的支持HTML5。使用HTML5开发手机应用的主要好处有两个一个是应用可以跨平台包括不同的手机平台和PC二是可以从服务器下载应用的内容但是不依赖于后台Server也可以运行可以把Web应用和本地应用更好的结合在一起。

这一系列文章的目的在于研究和实验使用HTML5开发Android本地应用的优缺点和可行性包括HTML5本身的优点和局限性网页部分和应用环境之间的交互以及我们可以怎样控制和修改浏览器插件的行为把它和手机本身的环境更好的结合在一起。

首先是把一个WebView嵌入到应用界面中建立起它和环境的交互然后加载一个简单的HTML5页面。要被加载的HTML文件放在asset目录中可以通过url file:///android_asset/index.html来加载。这个页面的作用只是用canvas画一个简单的图形。

\tString path file:///android_asset/index.html;\tString TAG WebClientDemo;\tboolean isLoadResources true;\tWebView mWebView;\tOverride\tpublic void onCreate(Bundle savedInstanceState) {\t\tsuper.onCreate(savedInstanceState);\t\tsetContentView(R.layout.webview1);\t\tinit();\t\tmWebView.loadUrl(path);\t}

初始化WebView设置参数关键是设置语言为UTF-8和保证支持JavaScript

\t\tmWebView (WebView) findViewById(R.id.myWebView1);\t\tmWebView.setBackgroundColor(Color.WHITE);\t\tmWebView.getSettings().setDefaultTextEncodingName(UTF-8);\t\tmWebView.getSettings().setSupportZoom(true);\t\tmWebView.getSettings().supportMultipleWindows();\t\tmWebView.getSettings().setJavaScriptEnabled(true);\t\tmWebView.clearView();

WebViewClient负责截获并修改加载网页过程中的各种事件。首先给mWebView设置一个新的WebViewClient然后重写函数shouldOverrideUrlLoading。这么做的原因保证点击WebView插件中的Url链接的时候仍然是在WebView插件中显示页面而不是调用系统的网络浏览器。

\t\tmWebView.setWebViewClient(new WebViewClient() {// Intercepts url loadingpublic boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);return true;}...}

 以下是在WebViewClient中截获并且修改其它的事件行为的代码。例子代码中截获的事件包括网页加载前加载后错误重复提交加载资源等。比如发生网页错误的时候可以用自己的错误信息取代浏览器插件的错误提示。

\t\t\t// Intercepts the resource loading eventsOverridepublic void onLoadResource(WebView view, String url) {if (!isLoadResources) {Log.i(TAG, Block resource loading: url);return;} else {Log.i(TAG, Continue resource loading: url);super.onLoadResource(view, url);}}// Intercepts error messagepublic void onReceivedError(WebView view, int errorCode,String description, String failingUrl) {Log.i(TAG, failingUrl);Toast.makeText(activity, 网页错误: errorCode 网页不可用,Toast.LENGTH_LONG).show();}// Intercepts form resubmissionpublic void onFormResubmission(WebView view, Message dontResend,Message resend) {Log.i(TAG, Resubmission);Toast.makeText(activity, 不可重复提交按Back回到上级网页,Toast.LENGTH_SHORT).show();}// Intercepts page started eventpublic void onPageStarted(WebView view, String url, Bitmap favicon) {Log.i(TAG, Page load start);}// Intercepts page finished eventpublic void onPageFinished(WebView view, String url) {Log.i(TAG, Page load finish);}

在Webview下当按下Back键时需要调用WebView中Back访问历史页面当没有历史页面的时候提示是否要退出。

需要在当前Activity中重写onKeyDown函数处理Back事件。

\tpublic boolean onKeyDown(int keyCode, KeyEvent event) {\t\t// Forwards the back key event to browser plugin\t\tif ((keyCode KeyEvent.KEYCODE_BACK) mWebView.canGoBack()) {String url;mWebView.goBack();return true;\t\t}\t\t// Pops up a dialog before exit\t\tif ((keyCode KeyEvent.KEYCODE_BACK) (!mWebView.canGoBack())) {new AlertDialog.Builder(this).setTitle(R.string.title).setMessage(R.string.quit_desc).setNegativeButton(R.string.cancel,new DialogInterface.OnClickListener() {Overridepublic void onClick(DialogInterface dialog,int which) {}}).setPositiveButton(R.string.confirm,new DialogInterface.OnClickListener() {Overridepublic void onClick(DialogInterface dialog,int whichButton) {android.os.Process.killProcess(android.os.Process.myPid());}}).show();return true;\t\t}\t\treturn super.onKeyDown(keyCode, event);\t}

WebChromeClient负责处理Javascript的对话框网站图标加载进度条等。下面的代码在Activity上添加一个加载网页的进度条

\t\tmWebView.setWebChromeClient(new WebChromeClient() {public void onProgressChanged(WebView view, int progress) {activity.setProgress(progress * 100);}\t\t});

退出提示框

HTML5显示效果和页面代码

script typeapplication/x-javascriptfunction drawText() {var canvas document.getElementById(canvas);if (canvas.getContext) {var ctx canvas.getContext(2d);var message First HTML5 pagectx.fillStyle #FF0000;ctx.font 30px serif;\t\tvar xPosition 20;\t\tvar yPosition 30;ctx.fillText (message,xPosition,yPosition);}} /script body οnlοaddrawText();canvas idcanvas width300 height300/canvas /body

在以后的文章中我们会讨论HTML5的其它功能和在手机上的应用方式。

转自/t5/MOTODEV-%E5%8D%9A%E5%AE%A2/%E4%BD%BF%E7%94%A8HTML5%E5%BC%80%E5%8F%91Android%E6%9C%AC%E5%9C%B0%E5%BA%94%E7%94%A8-%E4%B8%80/ba-p/1742

介绍:

Android的开发中除了本地app的处理外,有时需要与html5的交互,与html5的交互无非两种情况。
1:html5调用app本地的方法。
例如,在一个网页上点击一个分享按钮控件,这时会弹出本地原生的一键分享界面,通过html5调用本地方法将值传给本地分享所需的值。
2:app调用html5的javaScript方法。
同样是分享,例如,在app上原生界面上点击分享按钮然后调用html5的javaScript方法,javaScript方法里面在调用本地原生的一键分享界面。

如何使用:

wv_demo.loadUrl(url);wv_demo.setWebViewClient(new webViewClient());wv_demo.getSettings().setJavaScriptEnabled(true);wv_demo.addJavascriptInterface(new mJavaScriptinterface(), \"JSmeg\"); //javaScript调android本地方法 class mJavaScriptinterface { @JavascriptInterface //不能缺少 public void getShareInfo(String desc, String url, String title, String img) { //本地方法 }}private class webViewClient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); }}

html5调用app本地的方法,JSmeg是html5上的javaScript方法里面的关键字,通过这个关键字将app本地方法绑定到一块,调用本地getShareInfo方法。

js = \"var newscript = document.createElement(\"script\");\";js += \"newscript.src=\"/resource/js/androidgetinfo.js\";\";js += \"document.body.appendChild(newscript);\";wv_demo.loadUrl(url);wv_demo.setWebViewClient(new webViewClient());wv_demo.getSettings().setJavaScriptEnabled(true);bt_test1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mHandler.post(new Runnable() { @Override public void run() { wv_demo.loadUrl(\"javascript:androidGetInfo()\"); //Android本地调用html中的javaScript 函数 } }); }});private class webViewClient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); wv_demo.loadUrl(\"javascript:\" + js); //加载网络javascript方法 }}

app调用html5的javaScript方法,首先app在onPageFinished方法里面先加载javaScript方法,然后在app本地按钮监听方法里面调用html中的javaScript 函数。