webview使用入门（2）

最新推荐文章于 2023-12-27 15:13:50 发布

C_Wayne

最新推荐文章于 2023-12-27 15:13:50 发布

阅读量1.5k

点赞数

分类专栏： android android-jqueryMobile 文章标签： login string input xhtml class jquery

本文链接：https://blog.csdn.net/C_weibin/article/details/7437604

版权

android 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

android-jqueryMobile

4 篇文章 0 订阅

订阅专栏

下面我们对过一个登陆小例子来探讨一下 webview的某些常见用法

首先，我们先在assets文件夹里定义test.html文件，内容很简单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登陆验证小例子</title>
<script>
	function login(){
		alert("执行登陆");
	}
</script>
</head>

<body>
	<form method="post">
    	用户名：<input type="text" name="username"/><br/>
        密   码 ：
        <input type="password" name="password"/><br/>
        <input type="button" value="登陆"  οnclick="login()"/>
    </form>
</body>
</html>

然后在在代码中

private WebView webView=null;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        webView=(WebView) findViewById(R.id.webView);
        
     //   webView.setWebChromeClient(new MyWebChromeClient());//设置webChromeClient
     //   webView.setWebViewClient(new MyWebClient());
WebSettings settings=webView.getSettings(); settings.setJavaScriptEnabled(true);

webView.loadUrl("file:///android_asset/test.html");//加载自定义的登陆页 }
这里只实现一个简单的登陆页面

这时我们按 登陆按钮，后会没用 login()方法，也就是说会执行alert语句，但我们会发现点击之后没反应，这时我们需要为webView 设置一个

WebChromeClient()对象
我们加上这一句

  webView.setWebChromeClient(new WebChromeClient());//设置webChromeClient

这时我们再点击登陆就会出现下面一个对话框




但这个对话框相当难看，这时我们需要重写WebChromeClient的onJsAlert方法自定义我们的alert后的反应
我们先加上
webView.setWebChromeClient(new MyWebChromeClient());//设置webChromeClientMyWebChromeClient是我们自定义的


    class MyWebChromeClient extends WebChromeClient{

	@Override
	public boolean onJsAlert(WebView view, String url, String message,
			JsResult result) {
		
		Builder builder=new AlertDialog.Builder(JqueryMobile01Activity.this);
		builder.setTitle("自定义alert事件");
		builder.show();
		return true
	}
}



以上面那种方式就可以实现我们自定义的alert对话框，同样的confirm对话框也是同样的原理

如果我们要在程序里验证用户名和密码是否合法，如果合法就转转到另一个页面，不合法则提示，又该怎么做呢
我们再定义一个类，用于验证用户名和密码

	class AndroidClient{
		
		public boolean  validateLogin(String userName,String password){
			if("abc".equals(userName)&&"123".equals(password)){
				return true;
			}
			return false;
		}
	}


然后再用webView注入这个接口

 webView.addJavascriptInterface(new AndroidClient(), "androidClient");
这些步骤后我们就可以在js里调用validateLogin 
方法了


	function login(){
		var result=androidClient.validateLogin ($("#username").val(),$("#password").val());//这样使用得先引入jquery包，在以后有介绍
		if(!result){
			alert("登陆失败!")
		}else{
		location.href="file:///android_asset/success.html" //跳转到其他页面
		}
		
	}








登陆成功后跳到一个简单页面

这时如果我们按返回键，会发现程序是完全退出，而不是返回到登陆页面，这时如果我们要返回登陆页面，这里需要捕捉一下按钮事件，然后再处理




	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		if(keyCode==KeyEvent.KEYCODE_BACK){
			if(webView.canGoBack()){
				webView.goBack();
				return true;
			}
		}
		
		return super.onKeyDown(keyCode, event);
	}









代码下载：http://download.csdn.net/detail/c_weibin/4208253

C_Wayne

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
webview使用入门（2）

下面我们对过一个登陆小例子来探讨一下 webview的某些常见用法首先，我们先在assets文件夹里定义test.html文件，内容很简单登陆验证小例子 function login(){ alert("执行登陆"); } 用户名：密码：然后在在代码中
复制链接

扫一扫