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>有兩個輸入框，分別用於輸入賬號和密碼，還有一個按鈕，以及一個跳轉的連結：
以上就是全部程式碼了，最後我將會把原始碼貼上：