WebView使用全攻略

最新推荐文章于 2024-04-20 13:54:43 发布

编码很酷

最新推荐文章于 2024-04-20 13:54:43 发布

阅读量8.1k

点赞数

分类专栏： Android进阶之路文章标签： webview web开发性能优化迭代微博

本文链接：https://blog.csdn.net/Huang_Cai_Yuan/article/details/50498012

版权

Android进阶之路专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.> 转载请标明出处

本文出自[HCY的微博]

一、概述

移动web开发相对原生开发有以下好处：

开发成本低，可以适配多种平台的设备
迭代更新成本低，可以快速的实现更新的内容全覆盖

所以对于频繁更新的业务，比如商城。就比较适合用web进行开发。采用web开发，在App端必然离不开WebView这个组件。本文将从以下几个方面阐述WebView的相关知识及Web开发中的常用技巧。

内容加载
与服务端的交互
性能优化
安全性
Web开发常用技巧

二、内容加载

WebView的内容加载主要分为以下三种方式。

加载远端页面
加载本地页面
加载html代码

加载远端代码

比如加载百度

wvTest.loadUrl("http://www.baidu.com");

加载本地代码

比如加载assets/error.html

wvTest.loadUrl("file:///android_asset/error.html");

加载html代码

    String summary = "<html><body>You scored <b>192</b> points.</body></html>";
    wvTest.loadData(summary, "text/html", null);

三、与服务端的交互

WebView与服务端的交互方式主要有两种:

JavaScript的交互方式
拦截Url请求的交互方式

JavaScript的交互方式

假设有一个名为error.html的网页文件在assets目录中，代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面无法显示</title>
<style type="text/css">
html,body,div,img,p,ul,li{ margin:0; padding:0;}
html,body,img {width:100%; height:100%;}
.wrapper{ position:relative; margin:0 auto;width:100%; height:100%; min-height:445px; overflow:hidden; font-size:14px; line-height:180%;}
.wrapper img { width:100%; height:100%;}
.wrapper p{ margin-left:8px;  padding-right:15px; position:absolute;top:50px;}
a.refresh{ float:right; -webkit-border-radius:5px;  background:#ccdeff; display:block; width:60px; height:20px; text-align:center; line-height:20px; font-size:12px; text-decoration:none; color:#201f1f; -webkit-tap-highlight-color:#a7c7ff;}
.wrapper ul{ margin-left:35px; margin-top:5px; position:absolute;top:100px;}
</style>
</head>

<body>
 <script language="javascript">
         //提供给App端调用测试的代码
         function testForClient() {
                   window.error.refresh();   

                }
        </script>
<div class="wrapper">
    //调用App端名为error的对象的refresh方法
    <p><a href="javascript:window.error.refresh()" class="refresh">刷新</a>该页面无法显示，您可以尝试：</p>
    <ul>
        <li>检查您的网络连接是否正常</li>
        <li>点击右侧刷新按钮重新连接</li>
        <li>可能是服务器故障，请稍后再试</li>
    </ul>
</div>
</body>
</html>

JavaScript调用App端的方法
1.开启JS功能，这一步很重要

wvTest.getSettings().setJavaScriptEnabled(true);

2.使用WebView的addJavascriptInterface(Object object, String name)方法将App端的对象注入到WebView中,其中object为注入到JS上下文中的对象，其中的name就是JS中使用的对象名
例如将要被使用的对象的类代码如下

public class JavascriptSimple {
    String url = null;
    WebView view = null;

    public JavascriptSimple(WebView view, String url) {
        this.view = view;
        this.url = url;
    }
    //1.为了防止JS反射攻击,4.1以上的系统必须添加此注解，否则将无法被JS调用
    //2.当然，只有public方法才能被调用
    //3.在JS中被调用的方法都在JavaBridge线程里面，而WebView所有的方法都只能在主线程中调用。
    @JavascriptInterface
    public void refresh() {
        if (view == null || TextUtils.isEmpty(url)) {
            return;
        }
        // 所有JS方法都在JavaBridge线程中回调，所以对于UI操作要回调到主线程
        Handler mainHandler = new Handler(Looper.getMainLooper());
        mainHandler.post(new Runnable() {

            @Override
            public void run() {
                view.loadUrl(url);
            }
        });
    }
}

注入到JS中的代码为

wvTest.addJavascriptInterface(new JavascriptSimple(wvTest, ""), "error");

3.在被调用的方法前面加上@JavascriptInterface注解，若不添加，4.1以上的系统中JS将无法成功调用App端的方法。

4.在JS中被调用的方法都在JavaBridge线程里面，而WebView所有的方法都只能在主线程中调用。。否则会出现警告信息A WebView method was called on thread ‘JavaBridge’. All WebView methods must be called on the same thread。

APP调用JavaScript的方法

1.首先必须要加载JavaScript方法所在的Url，否则App端无法调用成功。

wvTest.loadUrl("file:///android_asset/error.html");

2.调用JavaScript方法

    btDemo.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                wvTest.loadUrl("javascript:testForClient()");
            }
        });

拦截Url请求的交互方式

1.首先要重写WebViewClient的shouldOverrideUrlLoading方法

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (TextUtils.isEmpty(url)) {
            return true;
        }
        //继续做URL解析，执行特定的业务逻辑处理
        return doOverrideUrlLoading(view, url);
    }

拦截请求响应实现离线缓存

        @Override
        public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        //return null表示不拦截响应请求
            return cacheEnabled ? interceptRequest(request.getUrl().toString()) : null;
        }

private WebResourceResponse interceptRequest(String url) {
            if (TextUtils.isEmpty(url)) {
                return null;
            }
            byte[] binary = aCache.getAsBinary(url);
            if (binary == null || isUpdate) {
                byte[] bytes = cacheRequest(url);
                binary = bytes;
            }
            if (binary == null || !isUseCache) {
                return null;
            } else {
                LogUtils.i(String.format("read %s cache", url));
                InputStream inputStream = new ByteArrayInputStream(binary);
                return new WebResourceResponse("", "UTF-8", inputStream);
            }
        }

        private byte[] cacheRequest(String url) {
            try {
                OkHttpClient client = new OkHttpClient();
                Request request = new Request.Builder()
                        .url(url)
                        .build();
                Response response = client.newCall(request).execute();
                if (!response.isSuccessful()) {
                    log(String.format("cache %s failed", url));
                    return null;
                } else {
                    log(String.format("cache %s succeeded", url));
                    byte[] bytes = response.body().bytes();
                    aCache.put(url, bytes);
                    return bytes;
                }

            } catch (Exception e) {
                e.printStackTrace();
                log(String.format("cache %s failed", url));
                return null;
            }
        }

2.解析Url，做特定的业务逻辑处理。
比如有http://www.xxx.com/?act=test&p={此处为json数据}
就可以通过act来区分不同的业务，p后面的json数据可以作为参数，传递给业务处理方法。

四、WebView的性能优化

加快渲染速度

可以在页面开始加载时调用setBlockNetworkImage(true);方法来阻止图片的加载，先渲染除图片以外的东西。当加载完成之后调用setBlockNetworkImage(false);方法来开启图片的加载，经过测试加载速度快了许多。

public abstract class BaseWebViewClient extends WebViewClient {
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        // 为了加快加载速度，先阻止图片加载，待数据加载完毕在onPageFinished回调中开启图片加载功能
        view.getSettings().setBlockNetworkImage(true);

    }

    @Override
    public void onPageFinished(WebView view, String url) {
        // 网页加载完毕，开启加载图片
        view.getSettings().setBlockNetworkImage(false);

    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (TextUtils.isEmpty(url)) {
            return true;
        }
        //继续做URL解析，执行特定的业务逻辑处理
        return doOverrideUrlLoading(view, url);
    }

    /**
     * 子类中继续处理URL拦截操作
     * 
     * @param view
     * @param url
     * @return
     */
    protected abstract boolean doOverrideUrlLoading(WebView view, String url);

}

防止内存泄漏

在界面退出时要及时调用WebView的相关释放方法，以免内存泄漏。

    @Override
    protected void onDestroy() {
        super.onDestroy();
        wvTest.stopLoading();
        wvTest.removeAllViews();
        wvTest.destroy();
    }

五、WebView的安全性

1.JavaScript反射攻击

JavaScript可以通过反射技术，调用注入对象的父类的public方法，执行一些不安全代码。

解决方案
1.在被调用的方法前面加上@JavascriptInterface注解，在4.1以上的系统只有加了此注解的方法才能被JavaScript调用。

2.通过shouldOverrideUrlLoading方法屏蔽拦截不属于自己的网站的url请求。

六、Web开发常用技巧

1.从网页中启动App端的Activity

启动App端的Activity，可以配置URL Scheme采用隐式意图的方式启动。
Scheme介绍见http://developer.android.com/guide/topics/manifest/data-element.html

1.配置Scheme

       <activity android:name="com.hcy.test.SchemeAty" >

            <!-- android:exported="false" 含有intent-filter的组件默认是导出的，即可以被其它应用调用，若加上了这句代码就变成不可导出，第三方应用就没有权限调用这个组件，不管你下面怎么配置都是无法调用的 -->
            <intent-filter>

                <!-- 指定向用户显示数据的动作 -->
                <action android:name="android.intent.action.VIEW" />
                <!-- 隐式意图必须要的category,若没有这个无法启动 -->
                <category android:name="android.intent.category.DEFAULT" />
                <!-- 指定该Activity能被浏览器安全调用 -->
                <category android:name="android.intent.category.BROWSABLE" />
                <!-- 1.若scheme相同则继续匹配第2点,若scheme不相同则不符合调用要求 -->
                <!-- 2.若host相同则继续第3点,若host不相同则不符合调用要求 -->
                <!-- 3.若port相同，则符合调用要求,若port不相同则不符合调用要求 -->
                <!-- 4.scheme、host、port都是大小写敏感的，注意大小写区别 -->
                <data
                    android:host="test"
                    android:port="8990"
                    android:scheme="hcy" />
            </intent-filter>
        </activity>

2.启动这个Activity

在其它应用中启动

    Intent intent = new Intent();
    intent.setData(Uri.parse("hcy://test:8990/fc?p1=12&p2=1"));
    startActivity(intent);

在html中启动

<a href="hcy://test:8990/fc?p1=12&p2=1">launch activity by scheme</a>

3.解析意图内容

Intent intent = getIntent();
        StringBuilder sb = new StringBuilder();
        if (intent != null) {
            // 获取整个Scheme串
            sb.append("dataString=" + intent.getDataString() + ",");
            // 获取scheme
            sb.append("scheme=" + intent.getScheme() + ",");
            Uri uri = intent.getData();
            if (uri != null) {
                // 获取host
                sb.append("host=" + uri.getHost() + ",");
                // 获取port
                sb.append("port=" + uri.getPort() + ",");
                // 获取path
                sb.append("path=" + uri.getPath() + ",");
                // 获取请求内容
                sb.append("queryString=" + uri.getQuery() + ",");
                // 获取请求参数值
                sb.append("p1=" + uri.getQueryParameter("p1"));
            }
        }

结果为:

dataString=hcy://test:8990/fc?p1=12&p2=1,scheme=hcy,host=test,port=8990,path=/fc,queryString=p1=12&p2=1,p1=12

2.让WebView支持Https网页链接

重写WebViewClient的onReceivedSslError方法

@Override
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
        //当发生SSL错误时，继续信任SSL证书
        handler.proceed();
    }

编码很酷

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
WebView使用全攻略

1.> 转载请标明出处本文出自[HCY的微博]一、概述移动web开发相对原生开发有以下好处：开发成本低，可以适配多种平台的设备迭代更新成本低，可以快速的实现更新的内容全覆盖所以对于频繁更新的业务，比如商城。就比较适合用web进行开发。采用web开发，在App端必然离不开WebView这个组件。本文将从以下几个方面阐述WebView的相关知识及Web开发中的常用技巧。内容加载与服务端
复制链接

扫一扫