使用HTML5开发Android本地应用

来源：互联网发布：js给input设置属性编辑：程序博客网时间：2024/05/21 23:09

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

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

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

String path ="file:///android_asset/index.html";
String TAG ="WebClientDemo";
booleanisLoadResources = true;
WebView mWebView;

@Override
public voidonCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.webview1);
   init();
   mWebView.loadUrl(path);
}

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

   mWebView = (WebView) findViewById(R.id.myWebView1);
   mWebView.setBackgroundColor(Color.WHITE);
   mWebView.getSettings().setDefaultTextEncodingName("UTF-8");
   mWebView.getSettings().setSupportZoom(true);
   mWebView.getSettings().supportMultipleWindows();
   mWebView.getSettings().setJavaScriptEnabled(true);
   mWebView.clearView();

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

   mWebView.setWebViewClient(new WebViewClient() {
   // Intercepts url loading
   public booleanshouldOverrideUrlLoading(WebView view, String url) {
   view.loadUrl(url);
   return true;
   }

                    ...
           }

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

   // Intercepts the resource loading events
   @Override
   public 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 message
   public void onReceivedError(WebView view,int errorCode,
      String description, String failingUrl) {
   Log.i(TAG,failingUrl);
   Toast.makeText(activity, "网页错误: " + errorCode + "网页不可用",
      Toast.LENGTH_LONG).show();
   }

   // Intercepts form resubmission
   public void onFormResubmission(WebView view,Message dontResend,
      Message resend) {
   Log.i(TAG,"Resubmission");
   Toast.makeText(activity, "不可重复提交，按Back回到上级网页",
      Toast.LENGTH_SHORT).show();

   }

   // Intercepts page started event
   public void onPageStarted(WebView view,String url, Bitmap favicon) {
   Log.i(TAG,"Page load start");
   }

   // Intercepts page finished event
   public void onPageFinished(WebView view,String url) {
   Log.i(TAG,"Page load finish");
   }

在Webview下，当按下Back键时，需要调用WebView中Back，访问历史页面，当没有历史页面的时候提示是否要退出。
需要在当前Activity中重写onKeyDown函数，处理Back事件。

public booleanonKeyDown(int keyCode, KeyEvent event) {
   // Forwards the back key event to browser plugin
   if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()){
   String url;
   mWebView.goBack();
   return true;
   }
   // Pops up a dialog before exit
   if ((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(){
      @Override
      publicvoid onClick(DialogInterface dialog,
         int which) {
         }
      })
      .setPositiveButton(R.string.confirm,
      new DialogInterface.OnClickListener(){
      @Override
      publicvoid onClick(DialogInterface dialog,
         int whichButton) {
         android.os.Process
         .killProcess(android.os.Process
            .myPid());
      }
      }).show();
   return true;
   }
   return super.onKeyDown(keyCode, event);
}

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

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

退出提示框

HTML5显示效果和页面代码：

  <scripttype="application/x-javascript">
function drawText() {
   var canvas =document.getElementById("canvas");
   if (canvas.getContext){
      var ctx =canvas.getContext("2d");
      varmessage = "First HTML5 page"

     ctx.fillStyle = "#FF0000";
      ctx.font ="30px serif";
   var xPosition = 20;
   var yPosition = 30;

     ctx.fillText (message,xPosition,yPosition);
   }
}
  </script>

<body onload="drawText();">
<canvas id="canvas"width="300" height="300"></canvas>
</body>

0 0