Android WebAPP开发入门

使用WebView开发web app

如果想发行一个web应用（或只包含网页）作为客户端的一部分，可以使用webview。WebView继承至View可以用于activity的布局来显示网页。但不包括一个完整网页浏览器的任何特征，例如：导航控制、地址栏等。默认的Webview所能做是显示一个网页。

使用WebView一个很有用的常见情况是：应用程序提供的一些信息可能需要更新，例如：最终用户协议、用户指南等。在这些情境下使用WebView可以使应用避免更新升级。在Android应用程序中，创建一个Activity包含WebView，可以使用它显示托管在网上的文档。

还有一种有用的情况是：应用程序向用户提供数据总是需要请求一个网络连接来检索数据，例如：电子邮件。这种情况下，你可以发现使用WebView来显示网页和所有用户数据比起执行网络请求、解析数据、渲染布局要更简单。因此，可以设计一个适合Android设备的网页，然后在加载网页的Android应用程序中实现WebView。

在应用程序中添加WebView

在使用< WebView > 标签添加到布局中，如下：

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>

WebView加载网页使用 loadUrl()，如下：

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.example.com");

网页加载需要INTERNET权限，在AndroidManifest.xml文件中添加权限：

<manifest ... >
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>

在WebView中使用JavaScript

如果计划在WebView中使用JavaScript加载网页，需要启用JavaScript。一旦JavaScript启用，就可以在应用程序代码和JS代码之间创建接口。

WebView默认不启用JavaScript。启用如下：

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

JS 与Android交互

当开发一个专门为WebView在Android应用程序中设计的Web应用程序时,可以在JavaScript代码和客户端Android代码之间创建接口。例如：JS调用一个Android的方法来显示一个对话框，而不是使用JS的alert()函数。
通过addJavascriptInterface()，绑定JS与Android代码。如下：

public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

注意：如果你的 targetSdkVersion 是17或更高，想要获得JS就必须给对应的Android方法（方法必须是public）添加@JavascriptInterface注解

使用addJavascriptInterface()绑定：

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
//这里的参数"Android",将在JS中由于调用Android方法，如：Android.showToast(toast);

网页通过JS方法调用Android：

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

处理页面导航

当用户从WebView中的网页点击链接时，默认行为是Android启动一个处理URL的应用程序。通常，默认的网页浏览器会打开并加载目标URL。但是，可以重写这种行为使网页在WebView中打开。
用户点击打开连接，只需为WebView提供一个WebViewClient，使用setWebViewClient()：

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new WebViewClient());

如果您希望更多地控制单击的链接加载的位置，创建自己的WebViewClient重写shouldOverrideUrlLoading() 方法，如下：

private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (Uri.parse(url).getHost().equals("www.example.com")) {
            // This is my web site, so do not override; let my WebView load the page
            return false;
        }
        // Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs
        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        startActivity(intent);
        return true;
    }
}

为WebView创建一个新的WebViewClient实例：

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());

网页浏览历史

当WebView覆盖URL加载时，它会自动累积访问过的网页的历史。通过goBack() 和goForward()可以再浏览历史中后退、前进。如下，当在Activity中按返回键时：

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // Check if the key event was the Back button and if there's history
    if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
        myWebView.goBack();
        return true;
    }
    // If it wasn't the Back key or there's no web page history, bubble up to the default
    // system behavior (probably exit the activity)
    return super.onKeyDown(keyCode, event);
}

如果用户存在实际的浏览记录canGoBack()返回true。同样使用canGoForward()检查是否有向前的历史。如果不检查，当用户到达历史结束的时候goBack()和GgoForward()就什么也做不了。