[WebView学习之三]:使用WebView来创建Apps

Posted 2020-06-29 gcczhongduan

       上一篇我们学习了( [WebView学习之二]:使用Web Apps 支持不同分辨率屏),今天我们来继续学习。

       (博客地址:http://blog.csdn.net/developer_jiangqq),转载请注明。

       Author:hmjiangqq

       Email:[email protected]  

         假设你想要常见一个Web应用程序(或者不过一个网页)来作为client应用程序的一部分,你能够使用WebView来实现。

WebView是继承与androidView类，在上面你能够作为Activity布局的一部分来显示Web页面。这不包含AndroidWeb浏览器的所有功能(比如:没有导航栏以及地址栏),所有的WebView默认情况下不过一个Web页面。

       一个通常的应用场景是:你可能须要通过使用ViewView在应用程序(Application)中更新用户终端协议或者用户指南等信息。在你的Android应用程序中你能够创建带有WebView控件的Activity，然后在线显示你的文档。

      第二种应用场景是:假设你的应用程序总须要连接网络来进行获取数据(比如:邮件)。在这个情况下在Android应用程序(Application)中使用WebView来显示全部用户数据而不是运行一个网络请求然后接续数据进行布局显示。相反的你能够在Android应用程序中实现一个WebView来设计载入Web页面。

      本文主要解说一下怎么样開始使用WebView以及一些其它的事情，比如:处理页面导航以及在你的AndroidApplication中从Web页面绑定javascript到client代码中。

 

(一):在你的AndroidApplication中加入WebView

       为了在你的Application中加入一个WebView，仅仅要简单的在你Activity布局中加入<WebView>标签,以下就是一个覆盖全屏幕的WebView的样例布局    

<span style="font-size:18px;"><?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"
/>
</span>

然后使用loadUrl()方法来在WebView中载入一个网页

<span style="font-size:18px;">WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.baidu.com");
</span>

在执行之前，我们的应用须要訪问訪问，此刻不要忘记在你的配置文件里加入INTERNET訪问权限。比如

<span style="font-size:18px;"><manifest ... >
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>
</span>

以上就是实现了一个主要的WebView。

 

(二)在WebView中使用Javascript (Using JavascriptInWebView)

        假设你在WebView中载入的网页中使用Javascript，你必须为你的WebView开启Javascript支持。

一旦Javascript被支持使用。你就能够在你用应用程序代码和Javascript代码之间创建接口。

        1.开启Javascript支持(Enabing JavaScript)

        Javascript在WebView中默认是关闭的，你能够通过WebSettings调用getSettings()获取WebSettings对象，而且设置setJavaScriptEnab led(true)来开启Javascript支持。比如:

<span style="font-size:18px;">WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
</span>

   WebSettings同一时候提供你可能实用的其它一系列设置方法。比如:你专门为Android应用程序开发基于WebView的WebApp,那么你能够通过调用

setUserAgentString()来自己定义设置用户代理，这样就能够验证你的Web页面上面的请求是不是来自Androidclient。

      2.绑定Javascript代码到Android中(BindingJavaScriptcode to Androidcode)

      当我们在AndroidApplication中设计基于WebView的Web应用程序(Application)。这样你能够在Javascript代码和Androidclient代码之间创建接口。比如:Javascript能够调用Andriod代码的方法来显示一个弹框(Dialog),而不是直接使用Javascript的alert()方法。

      你能够调用addJavascriptInterface方法，使用一个实例来将你的Javascript和须要Javascript调用的类命名进行绑定。这样你就在javascript代码与Android代码中间就绑定了一个接口。以下来看一个样例:

<span style="font-size:18px;">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();
    }
}
</span>

 [注]:假设设置targetSdkVersion为17或者更高的时候，你必须在你想訪问的Javascript的方法上面加入@JavascriptInterface注解。假设你不加入这个注解，那么你的Web页面程序在Android 4.2或者更高版本号中是不会调用该方法。

   在上面的样例中 WebAppInterface接口类同意Web页面使用showToast()方法来创建一个toast消息。

你能够通过调用addJavaScriptInterface方法来把该类绑定到Javascript中而且命名为"Android",请看以下的样例:

<span style="font-size:18px;">WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
</span>

这边为执行在WebView中的JavaScript定义了名字为"Android"的接口.这边你的Web应用能够訪问WebAppInterface类。比如：以下的html和Javascript脚本能够实现点击button的时候显示一个Toast消息。

<inputtype="button" value="Say hello"onClick="showAndroidToast('Hello Android!')" />
 
<scripttype="text/javascript">
   function showAndroidToast(toast) {
       Android.showToast(toast);
   }
</script>

我们这边不须要进行初始化Android命名的Javascript接口，WebView会自己主动让你的Web页面能够调用。所以当我们点击button的时候,showAndroidTest()方法会使用Android接口来调用WebAppInterface.showToast()方法

     [注]:1.被绑定到Javascript的对象执行在另外一个线程，而不是构造新线程。

              2.使用addJavascriptInterface()能够同意JavaScript来控制Android应用程序.这是一个非常实用的特性同一时候也会出现非常严重的安全问题。一旦在WebView中的HTML是不可靠的(比如:部分或者所有HTML代码有一个不知道人或者不知名进程提供),然后攻击者让你的Androi的应用程序运行它提供的HTML代码。除非你写的HTML以及Javascript都会出现WebView中。不然尽量不要使用addJavaScriptInterface()方法。同一时候你也应该同意用于在WebView中导航到不是你写的其它网页(相反的你能够同意使用默认Web浏览器来打开外部链接,这样你就要进行处理控件页面导航)。

 

(三)处理页面导航(HandingPage Navigation)

        当用户在WebView上点击网页上面的一个链接时，Android会默认启用一个应用程序来处理URL是,通常情况下Web浏览器会默认打开来进行处理载入这些URLs。

当然你能够为你的WebView覆盖这种方法，这样能够使用你自己实现的WebView来打开这些链接。你能够同意用户对你的WebView进行向前向后导航页面进行浏览。

你能够使用setWebViewClient()为你自己的WebView提供一个WebViewClient来自己处理打开这些链接地址。样例例如以下:

<span style="font-size:18px;">WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new WebViewClient());
</span>

如今用户点击的全部链接都会在你自己的WebView中进行载入。

假设你想对于链接的链接很多其它的控制，你能够创建自己的WebViewClient来进行重写shouldOverrideUrlLoading()方法.样例例如以下:

<span style="font-size:18px;">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;
    }
}
</span>

该为WebView创建一个新WebViewClient实例。

<span style="font-size:18px;">WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());
</span>

那么如今用户进行点击一个链接的时候，系统会自定调用shouldOverrideUrlLoading()方法,该会检查URL是不是匹配特殊对象(比如上面定义的)。

假设不匹配那么这方法会返回一个false表示不重载URL载入(该同意WebView依照默认方法载入URL)。假设该不匹配。那么会创建一个Intent来启动一个新的Activity来处理URLs

 

(四)导航Web历史页面(Navigating Web page history)

        当WebView进行载入URL的时候，该会自己主动保存历史訪问页面。你能够使用goBack()和goForward()方法来进行向前或者向后导航。

        以下就是一个样例:你能够使用返回键。来对页面进行回退操作。

<span style="font-size:18px;">@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);
}
</span>

假设该WebView存在用户訪问历史记录那么canGoBack()方法会返回true。

相同的你能够使用canGoBack()方法来检查是否存在历史记录，假设拟进行这个检查，一旦不存在历史或者近期记录，那么goBack()以及goForward()方法就会抛出异常。

 

后面的文章会针对该知识点。会专门封装一个WebView组件，这样用起来更加方便点,敬请期待…