下面我们对过一个登陆小例子来探讨一下 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);
}