Android使用Html实现登录功能——重点掌握Webview js的使用

大家好，很久没有写博客了，因为工作需要，项目需要转换成H5的形式，所以闭关修炼html，所以可能在未来的几篇博客，我都会涉及到这类的知识，我不会太多的涉及到理论，更多的是实际的代码，下面就开始这次需求的实现，先看看主要界面。

这就是主要的效果了，代码不多，很容易理解的，这里主要通过webview，用js实现交互。
首先看看webview里面常用的方法：

如何创建WebView:
1、添加权限：AndroidManifest.xml中必须使用许可”android.permission.INTERNET”,否则会出Web page not available错误。
2、在要Activity中生成一个WebView组件：WebView webView = new WebView(this);
3、设置WebView基本信息：
如果访问的页面中有Javascript，则webview必须设置支持Javascript。

      webview.getSettings().setJavaScriptEnabled(true); 
      触摸焦点起作用
      webview.requestFocus();//如果不设置，则在点击网页文本输入框时，不能弹出软键盘及不响应其他的一些事件。

4、设置WevView要显示的网页：
      互联网用：webView.loadUrl("http://www.google.com");
      本地文件用：webView.loadUrl("file:///android_asset/XX.html");  本地文件存放在：assets文件中

5、如果希望点击链接由自己处理，而不是新开Android的系统browser中响应该链接。
      给WebView添加一个事件监听对象（WebViewClient)     
      并重写其中的一些方法

shouldOverrideUrlLoading：对网页中超链接按钮的响应。当按下某个连接时WebViewClient会调用这个方法，并传递参数：按下的url
onLoadResource
onPageStart
onPageFinish
onReceiveError
onReceivedHttpAuthRequest

 6.listview,webview中滚动拖动到顶部或者底部时的阴影(滑动到项部或底部不固定)
       WebView.setOverScrollMode(View.OVER_SCROLL_NEVER);

7.//android 中 webview 使用 localStorage

WebSettings settings = mWebView.getSettings();
// 设置可以使用localStorage
settings.setDomStorageEnabled(true);
// 应用可以有数据库
settings.setDatabaseEnabled(true);
String dbPath = this.getApplicationContext().getDir(“database”, Context.MODE_PRIVATE).getPath();
settings.setDatabasePath(dbPath);
// 应用可以有缓存
settings.setAppCacheEnabled(true);
String appCaceDir = this.getApplicationContext().getDir(“cache”, Context.MODE_PRIVATE).getPath();
settings.setAppCachePath(appCaceDir);
8、如果用webview点链接看了很多页以后，如果不做任何处理，点击系统“Back”键，整个浏览器会调用finish()而结束自身，如果希望浏览的网页回退而不是退出浏览器，需要在当前Activity中处理并消费掉该Back事件。
覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法。

    public boolean onKeyDown(int keyCoder,KeyEvent event){
                        if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){
                              webview.goBack();   //goBack()表示返回webView的上一页面
                                 return true;
                           }
                        return false;
                   }

WebView相关问题注意：

Android的webView很强大，其实就是一个浏览器，你可以把它嵌入到你想要的位置，我这里遇到两个问题，就是怎么知道网页的加载进度和加载网页时，点击网页里面的链接还是在当前的webview里跳转，不想跳到浏览器那边，解决办法如下：

//此方法可以处理webview 在加载时和加载完成时一些操作
webView.setWebChromeClient(new WebChromeClient（）{
  @Override
  public void onProgressChanged(WebView view, int newProgress) {
    if(newProgress==100){                      
      // 这里是设置activity的标题， 也可以根据自己的需求做一些其他的操作
          title.setText("加载完成")；
     }else{
     title.setText("加载中.......");
      }
    }
});
webView.setWebViewClient(new WebViewClient（）{

  @Override

    public boolean shouldOverrideUrlLoading(WebView view, String url) { 
     //重写此方法表明点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边
       view.loadUrl(url);
       return true;
  }

 @Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, android.net.http.SslError error) { 
// 重写此方法可以让webview处理https请求
        handler.proceed();
} 
});

介绍完Webview，就可以开始我们今天的编码了；

首先先把布局写好：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#458EFD"
        android:gravity="center"
        android:padding="10dip"
        android:textColor="#ffffff"
        android:textSize="24sp" />

<WebView
    android:id="@+id/web"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</LinearLayout>

布局不是很复杂，就是标题和webview。

接下来看到MainActivity.java

public class MainActivity extends Activity{
    WebView view;
    JavaScriptObject js;
    TextView titleTv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        view=(WebView) findViewById(R.id.web);
        titleTv=(TextView) findViewById(R.id.text);
        js=new JavaScriptObject(this);
        view.getSettings().setDefaultTextEncodingName("utf-8");  
        view.getSettings().setJavaScriptEnabled(true);  
        view.addJavascriptInterface(js, "myObj");
        view.loadUrl("file:///android_asset/demo.html");
        view.setWebViewClient(new WebViewClient() {
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
            // 出现错误是   的回调
            @Override
            public void onReceivedError(WebView view, int errorCode,
                    String description, String failingUrl) {
                // TODO Auto-generated method stub
                super.onReceivedError(view, errorCode, description, failingUrl);
            }
        });
        view.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onReceivedTitle(WebView view, String title) {
                // 设置标题
                super.onReceivedTitle(view, title);
                if (titleTv != null) {
                    titleTv.setText(title);
                }
            }

            @Override
            public void onShowCustomView(View view, CustomViewCallback callback) {
                // TODO Auto-generated method stub
                super.onShowCustomView(view, callback);
            }

        });

    }


}

具体的方法介绍，在前面也介绍过了，就不再赘述，值得注意的是，我这里还添加了一个js——JavaScriptObject。

public class JavaScriptObject {  
    Context mContxt;  
    public JavaScriptObject(Context mContxt) {  
        this.mContxt = mContxt;  
    }  
    @JavascriptInterface
    public void fun2(String name,String psd) {  
        Toast.makeText(mContxt, "账号："+name+" 密码："+psd, 0).show();
    }

} 

这里有一个构造方法和函数，这个fun2方法在html里面被调用。

下面看看html是怎么写的:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style type="text/css">
div {
     align: center;
}
</style>
    <script type="text/javascript">
    function btnLogin() {
        var name = document.getElementById("name").value;
        var psd = document.getElementById("psd").value;
        login(name,psd);
    }
    function login(name,psd){
         myObj.fun2(name,psd);
    }

</script>
</head>
<body>
<div id="pid">
    账号登录
    <br/>
    <br/>
    账号 : <input id="name" type="text"></div>
<br/>
密码 : <input id="psd" type="password"></div>
<br/>
<br/>
记住密码<input type="checkbox"/> <a href="http://blog.csdn.net/qq_25193681/article/details/52117281" target="_blank">忘记密码</a>
<br/>
<br/>

<button onclick="btnLogin()">登录</button>
</div>
</body>
</html>

有两个输入框，分别用于输入账号和密码，还有一个按钮，以及一个跳转的链接：

以上就是全部代码了，最后我将会把源码贴上：