MyException - 我的异常网
当前位置:我的异常网» Web前端 » 怎么在WebView中建立Android Apps

怎么在WebView中建立Android Apps

www.MyException.Cn  网友分享于:2015-08-26  浏览:57次
如何在WebView中建立Android Apps
1. Web Apps的两种形式

在Android中,Web Apps有两种形式供用户访问。一种就是用手机上的浏览器直接访问的网络应用程序,这种情况用户不需要额外安装其他应用,只要有浏览器就行;而另一种,则是在用户的手机上安装客户端应用程序(.apk),并在此客户端程序中嵌入Web View来显示从服务器端下载下来的网页数据,比如新浪微博和人人网的客户端。对于前者来说,主要的工作是根据手机客户端的屏幕来调整网页的显示尺寸、比例等;而后者需要单独开发基于Web View的Web app. 本篇主要是学习后者的开发。



2. 怎样在Android应用程序中加入Web View?

2.1 先在layout文件中加入<WebView>元素

<WebView  xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/webview"    
android:layout_width="fill_parent"    android:layout_height="fill_parent"/> 


2.2 由于应用程序需要访问网络,所以需要在AndroidManifest.xml中请求网络权限的:

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


2.3 使用Web View:

1
WebView myWebView = (WebView) findViewById(R.id.webview); 


2.4 加载一个页面,可以用loadUrl()方法,例如:

1
myWebView.loadUrl("http://www.xxx.com"); 


3. 在Web View 中使用JavaScript

3.1 如果你加载到 Web View 中的网页使用了JavaScript,那么,需要在Websetting 中开启对JavaScript的支持,因为Web View 中默认的是JavaScript未启用。

1234 // 获取 WebSetting 
WebSettings webSettings = myWebView.getSettings(); // 开启Web View对JavaScript的支持 webSettings.setJavaScriptEnabled(true); 


3.2 将JavaScript与Android客户端代码进行绑定。

为什么要绑定呢? 可以看这个例子:如果JavaScript 代码想利用Android的代码来显示一个Dialog,而不用JavaScript的alert()方法,这时就需要在Android代码和 JavaScript代码间创建接口,这样在Android代码中实现显示对话框的方法,然后JavaScript调用此方法。

1)创建 Android代码和JavaScript代码的接口,即创建一个类,类中所写的方法将被JavaScript调用

public class JavaScriptInterface {       
Context mContext;       
/** 初始化context,供makeText方法中的参数来使用 */    
JavaScriptInterface(Context c) {         
mContext = c;     
}  
    
/** 创建一个方法,实现显示对话框的功能,供JavaScript中的代码来调用 */   
public void showToast(String toast) {        
 Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();     
}  
 } 


2)通过调用addJavascriptInterface方法,把我们上面创建的接口类绑定与运行在Web View上的JavaScript进行绑定。

12 // 第二个参数是为这个接口对象取的名字,以方便JavaScript调用
webView.addJavascriptInterface(new JavaScriptInterface(this), "Android"); 


3)现在,我们可以在html中的JavaScript部分调用showToast()方法了。
 <script type="text/javascript">     
function showAndroidToast(toast) {         
Android.showToast(toast);     
} 
</script>   
<input type="button" value="Say hello" 
onClick="showAndroidToast('Hello Android!')" /> 


4. 处理页面导航

当用户在Web View中点击页面上的超链接时, Android的默认行为是启动一个能处理URL的应用程序,通常情况下是启动默认的浏览器。而如果我们想用当前的Web View打开页面,则需要重载这个行为。这样我们就可以通过操作Web View的历史记录来向前和向后导航。

4.1 为Web View提供一个WebViewClient,从而在WebView中打开用户的链接。 如果我们想对加载页面有跟多的控制,可以继承并实现一个复杂的WebViewClient

1
myWebView.setWebViewClient(new WebViewClient()); 


private class MyWebViewClient extends WebViewClient {     @Override    
 public boolean shouldOverrideUrlLoading(WebView view, String url) {         
if (Uri.parse(url).getHost().equals("www.example.com")) {             
// This is my web site, so do not override; let my WebView load the page             
return false;         
}         
// Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs         
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));         
startActivity(intent);         
return true;     
} 
} 


4.2 利用Web View的历史记录来实现页面navigate backword.

重载Activity中的onKeyDown方法,实现此功能:

@Override    
public boolean onKeyDown(int keyCode, KeyEvent event) {     
// Check if the key event was the BACK key and if there's history     if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack() {         
myWebView.goBack();         
return true;     
}     
// If it wasn't the BACK key or there's no web page history, bubble up to the default     
// system behavior (probably exit the activity)     
return super.onKeyDown(keyCode, event); 
} 


5. 现在应用以上知识,实现一个简单的基于Web View的Android 应用程序

程序的功能主要是:当进入程序后,显示一个网页,此页面上有一个新闻超链接,用户点击超链接,在Web View中加载新闻的内容页面。

5.1 创建含有Web View的Activity:Home.java
package com.WebApp;
 import android.app.Activity; 
import android.os.Bundle; 
import android.view.KeyEvent; 
import android.webkit.WebSettings; 
import android.webkit.WebView;   
public class Home extends Activity {     
// declare a WebView     
private WebView myWebView;       
@Override     
public void onCreate(Bundle icicle) {         
super.onCreate(icicle);         
setContentView(R.layout.main);                   
// initialize the WebView         
myWebView = (WebView) findViewById(R.id.webview);                   
/* Enable the JavaScript in Web View */        
WebSettings webSettings = myWebView.getSettings();         webSettings.setJavaScriptEnabled(true);           
// bind the Android code to JavaScript code         myWebView.addJavascriptInterface(new myJavaScriptInterface(), "myJS");                  
 // load a web page         myWebView.loadUrl("file:///android_asset/first.html");     
}       
/**      
* This class is an interface between Android and JavaScript      
* whose methods can be accessed by JavaScript code      
*/    
final class myJavaScriptInterface {           
myJavaScriptInterface() {         
}           
/**          
* load the content page          
*/        
public void LoadContentPage() {             
myWebView.loadUrl("file:///android_asset/second.html");         
}     
}           
@Override     
public boolean onKeyDown(int keyCode, KeyEvent event) {        
 // Check if the key event was the BACK key and if there's history         
if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()){             
myWebView.goBack();             
return true;         
}        
 // If it wasn't the BACK key or there's no web page history, bubble up to the default         
// system behavior (probably exit the activity)         
return super.onKeyDown(keyCode, event);     
} 
} 


5.2 在Android项目文件下的assets目录下创建一个名为first.html的页面作为首页

 <html>         
<body>            
 <!-- 调用Android代码中的方法 -->            
<a onClick="window.myJS.LoadContentPage()" style="text-decoration: underline">             
Google+ is now under testing!             
</a>         
</body> </html> 


5.3 在Android项目文件下的assets目录下创建一个名为second.html的页面作为内容页
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Google+ is under testing</title>
</head>
<body> Google+ is in limited Field Trial Right now, we're testing with a small number of people,  but it won't be long before the Google+ project is ready for everyone.  Leave us your email address and we'll make sure you're the first to know when we're ready to invite more people.
</body>  
</html>

5.4 运行程序,测试

文章评论

那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
一个程序员的时间管理
一个程序员的时间管理
老程序员的下场
老程序员的下场
中美印日四国程序员比较
中美印日四国程序员比较
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
每天工作4小时的程序员
每天工作4小时的程序员
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
程序员必看的十大电影
程序员必看的十大电影
10个调试和排错的小建议
10个调试和排错的小建议
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
那些争议最大的编程观点
那些争议最大的编程观点
我是如何打败拖延症的
我是如何打败拖延症的
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员和编码员之间的区别
程序员和编码员之间的区别
代码女神横空出世
代码女神横空出世
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
漫画:程序员的工作
漫画:程序员的工作
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员的鄙视链
程序员的鄙视链
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
 程序员的样子
程序员的样子
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员都该阅读的书
程序员都该阅读的书
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
编程语言是女人
编程语言是女人
为什么程序员都是夜猫子
为什么程序员都是夜猫子
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
如何成为一名黑客
如何成为一名黑客
旅行,写作,编程
旅行,写作,编程
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
我的丈夫是个程序员
我的丈夫是个程序员
鲜为人知的编程真相
鲜为人知的编程真相
程序员应该关注的一些事儿
程序员应该关注的一些事儿
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有