Android中构建HTML5应用

Android中构建HTML5应用

使用WebView控件 与其他控件的使用方法相同 在layout中使用一个<WebView>标签

WebView不包括导航栏，地址栏等完整浏览器功能，只用于显示一个网页

在WebView中加载Web页面，使用loadUrl()

Java代码 

1. WebView myWebView = (WebView) findViewById(R.id.webview);   
2. myWebView.loadUrl("http://www.example.com");  

注意在manifest文件中加入访问互联网的权限：

Xml代码   

1. <uses-permission android:name="android.permission.INTERNET" />  

 

在Android中点击一个链接，默认是调用应用程序来启动，因此WebView需要代为处理这个动作 通过WebViewClient

Java代码   

1. //设置WebViewClient   
2. webView.setWebViewClient(new WebViewClient(){      
3.     public boolean shouldOverrideUrlLoading(WebView view, String url) {      
4.         view.loadUrl(url);      
5.         return true;      
6.     }     
7.     public void onPageFinished(WebView view, String url) {   
8.             super.onPageFinished(view, url);   
9.     }   
10.     public void onPageStarted(WebView view, String url, Bitmap favicon) {   
11.         super.onPageStarted(view, url, favicon);   
12.     }   
13. });  

这个WebViewClient对象是可以自己扩展的，例如

Java代码   

1. private class MyWebViewClient extends WebViewClient {   
2.     public boolean shouldOverrideUrlLoading(WebView view, String url) {   
3.         if (Uri.parse(url).getHost().equals("www.example.com")) {   
4.             return false;   
5.         }   
6.         Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));   
7.     startActivity(intent);   
8.     return true;   
9.     }   
10. }  

 

之后：

Java代码   

1. WebView myWebView = (WebView) findViewById(R.id.webview);   
2. myWebView.setWebViewClient(new MyWebViewClient());   

另外出于用户习惯上的考虑 需要将WebView表现得更像一个浏览器，也就是需要可以回退历史记录

因此需要覆盖系统的回退键 goBack，goForward可向前向后浏览历史页面

Java代码   

1. public boolean onKeyDown(int keyCode, KeyEvent event) {   
2.     if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack() {   
3.         myWebView.goBack();   
4.         return true;   
5.     }   
6.     return super.onKeyDown(keyCode, event);   
7. }  

Java代码

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

  （这里的webSetting用处非常大 可以开启很多设置 在之后的本地存储，地理位置等之中都会使用到） 1 在JS中调用Android的函数方法   首先 需要在Android程序中建立接口  

Java代码

1. final class InJavaScript {   
2.        public void runOnAndroidJavaScript(final String str) {   
3.         handler.post(new Runnable() {   
4.                public void run() {    
5.                    TextView show = (TextView) findViewById(R.id.textview);   
6.                    show.setText(str);   
7.                }   
8.            });   
9.        }   
10.    }  

Java代码

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

  在JavaScript中调用

Js代码

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

   2 在Android中调用JS的方法   在JS中的方法：

Js代码

1. function getFromAndroid(str){   
2.         document.getElementByIdx_x_x_x("android").innerHTML=str;   
3. }  

   在Android调用该方法

Java代码

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