码迷,mamicode.com
首页 > 移动开发 > 详细

[翻译]基于WebView开发Web APP

时间:2015-01-31 00:27:40      阅读:269      评论:0      收藏:0      [点我收藏+]

标签:

作者:zhanhailiang 日期:2015-01-30

原文链接:Building Web Apps in WebView

基于Android视图类WebView,可以直接在Activity Layout中展示Web页面,这样可以增强更新的灵活性。简单理解,WebView展示HTML页面,但是其本身并不支持浏览器的常用功能,诸如浏览进度控制,地址栏等。

使用场景&实现

场景1

对于应用程序中需要频繁更新的模块,可以使用WebView来实现,这样更新内容即可实时更新,诸如用户协议页面,新手引导等。

场景2

对于需要实时拉取服务器信息来更新视图的应用程序,可以使用WebView来实现。

实现

在Android应用中,创建一个包含WebView的Activity,直接加载Web url即可展示相应页面。如需使用Javascript,只需要开启Javascript即可。

应用程序添加WebView

在Activity Layout中添加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");

为了使用WebView功能,你需要在manifest文件中申请网络访问权限,如下:

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

WebView使用Javascript

  1. 在WebView中开启Javascript;
  2. 创建Java与Javascript通信的接口;

开启Javascript

WebView默认未开启Javascript,需要通过WebView.getSettings().setJavaScriptEnabled(true)来开启Javascript,如下:

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

WebSettings提供了修改一系列设置的方法,如自定义User-Agent头等,有兴趣请查看WebSettings API

如何在Javascript中调用Android应用程序的接口

应用程序可以提供接口给Javascript调用,如Javascript调用Android原生的Toast接口展示提示,而不是简单的使用alert()接口。其原理是在WebView中定义了接口,并调用addJavascriptInterface添加该接口,此时WebView中的代码就可以直接调用该接口,如下:

定义如下类:

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,则需要添加注释@JavascriptInterface到你想要在Javascript中使用的方法中,否则将无法在Javascript中调用该方法。如上定义将暴露showToast方法给Javascript调用。

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

按以上初始化后,即可在Javascript直接调用Android.showAndroidToast(‘Hello Android!‘):

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

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

注:以上Anroid对象运行在独立的线程中,并不在初始化的线程中。

注:通过addJavascriptInterface()即可实现Javascript调用原生的Android API来控制原生应用程序。权利越大,责任就越大。addJavascriptInterface特性即是相当有用的特性,也会造成巨大的安全问题。当WebView中的HTML文本是不可信时(如劫持代码恶意插入非法的Javascript代码),此时攻击者就可以调用你的客户端代码来实施攻击行为。

WebView处理页面浏览

当用户在WebView中点击超链接时,应用程序的默认行为是调用默认处理url的程序来处理。通常是调用浏览器打开相应链接。但是你可以在WebView中覆盖该行为,使用自定义行为(如在当前WebView中打开该链接)。这样就可以实现WebView浏览历史功能。

只需要设置WebViewCleint()对象即可实现在当前WebView中打开链接功能:

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

也可以通过继承WebViewCleint类来自定义更丰富的自定义点击行为:

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 myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());

WebView实现浏览历史功能

当在WebView中覆盖默认的URL加载行为,此时WebView将自动记录浏览历史,这样就可以基于WebView的goBack()和goForward()来实现浏览功史的前进和后退功能,如下:

如下自定义设备的返回按钮为若当前WebView可回退,即回退当前WebView;否则使用系统默认的返回功能:

@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);
}

更多阅读

  1. Building Web Apps in WebView(需翻墙)
  2. Android WebView中的JavaScript代码使用

[翻译]基于WebView开发Web APP

标签:

原文地址:http://blog.csdn.net/billfeller/article/details/43320835

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!