webview使用入门（2）

最新推荐文章于 2024-10-15 13:28:41 发布

原创最新推荐文章于 2024-10-15 13:28:41 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#login #string #input #xhtml #class #jquery

android 同时被 2 个专栏收录

36 篇文章

订阅专栏

android-jqueryMobile

4 篇文章

订阅专栏

本文通过一个登陆小例子，详细介绍了如何在webview中实现登录页面的创建、加载、交互以及页面跳转等功能，并讨论了如何自定义alert对话框、验证用户名密码合法性以及处理返回键事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面我们对过一个登陆小例子来探讨一下 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="登陆"  onclick="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());//设置webChromeClient

MyWebChromeClient是我们自定义的

    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.youkuaiyun.com/detail/c_weibin/4208253