Android中的WebView

Android基于效率和灵活性的考虑，现在越来越多的开发者采用Hybrid方式开发App，那么如何使android和h5有效结合呢，WebView就可以使网页轻松的内嵌到app里，还可以直接跟js相互调用。这么看来Hybrid开发离不开WebView这个组件了，那就让我们探讨一下Webview的一些属性和功能以及用法

WebView是什么

WebView类是一个扩展Android的视图类，允许将Web页面作为活动布局的一部分。它并不一个完整网络浏览器，它采用了WebKit渲染引擎来显示网页，默认情况下，只显示一个Web页面。WebView可以方便的在线更新内容，不需要发布新版本的app来更新模块。所以使用WebView都需要在android清单文件中加入如下连接网络的权限，除非访问的是本地assets中的html资源

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

那么我们如果在android界面中加入一个WebView呢，其实很简单我们可以通过在xml中配置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="match_parent"
    android:layout_height="match_parent"
/>

同样我们可以在Activity中直接建立一个WebView显示这个网页

WebView mWeb = new WebView(this);
mWeb.loadUrl("http://www.baidu.com");
setContentView(mWeb);

那么我们如何用WebView来显示一个网页呢，其实也是很简单的，我们可以通过loadUrl方法来显示一个网页，上面在Activity中的WebView已经使用了这个方法，如果加载本地文件我们可以使用

webView.loadUrl("file:///android_asset/XX.html");

这个本地的html文件存放于assets 文件中。如果使用xml中配置的WebView我们同样也适用

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

通过实际运行一下这个WebView，我们可以发现显示效果并不是我们想象的那样，app并没有在这个WebView的控件中显示这个网页，而是启动了手机的浏览器。我们可以通过WebViewClient覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为，使网页用WebView打开

 mWeb = (WebView) findViewById(R.id.mWebView);
 mWeb.loadUrl("http://www.baidu.com");

 mWeb.setWebViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            //true 说明事件被webview消费了，不用再向上传播，否则就要上传播
            return true;
        }
 });

这样就网页就显示在我们自己WebView中了 ，

---

WebChromeClient和WebViewClient

实际使用的话，如果你的WebView只是用来处理一些html的页面内容，只用WebViewClient就行了，如果需要更丰富的处理效果，比如JS、进度条等，就要用到WebChromeClient。

WebViewClient

主要帮助WebView处理各种通知、请求事件。如果希望链接在当前WebView中显示而不是外部浏览器，必须覆盖 webview的WebViewClient对象。

• shouldOverrideUrlLoading(WebView view, String url)
  在web页面里单击链接的时候，会自动调用android自带的浏览器来打开链接，需要通过这个方法在本页面打开
  
  
• onLoadResource(WebView view, String url)
  通知主程序WebView要通过给定的url来加载资源了，这个方法在加载资源时响应
  
  
• onPageStarted(WebView view, String url, Bitmap favicon)
  通知主程序开始加载界面，在加载页面时响应
  
  
• onPageFinished(WebView view, String url)
  通知主程序界面加载完毕，在加载页面结束时响应
  
  
• onReceivedError(WebView view, WebResourceRequest request, WebResourceError error)
  通知主程序加载错误，在加载出错时响应
  
  
• onReceivedSslError(WebView view, SslErrorHandler handler, SslError error)
  通知主程序，在加载资源时发生了SSL错误

---

WebChromeClient

主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等，一下是一些方法，更多需要看API

• onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg)
  通知主程序启动一个新窗口
  
  
• onCloseWindow(WebView window)
  通知主机应用程序关闭指定的WebView，如有必要，将其从系统中删除。
  
  
• onJsConfirm(WebView view, String url, String message, JsResult result)
  通知客户端显示一个确认对话框给用户
  
  
• onJsAlert(WebView view, String url, String message, JsResult result)
  通知客户端显示一个警告对话框
  
  
• onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result)
  通知客户端显示一个提示对话框
  
  
• onProgressChanged(WebView view, int newProgress)
  通知主应用程序加载页面的当前进展情况。
  
  

---

WebSettings

在创建WebView时，系统有一个默认的设置，我们可以通过WebView.getSettings来得到这个设置。负责管理一个web视图设置，当第一次创建一个web视图时，它获得了一组默认设置，这些默认设置通过所有的getxx方式返回。从WebView.getSettings方法获得的WebSettings对象绑定到WebView的生命周期中，如果这个web视图被破坏，在WebSettings调用任何方法将抛出IllegalStateException。这个对象一般负责管理WebView的缩放、字体、编码等设置。
以下是一些常用方法，具体查询API

• getAllowFileAccess（）
  获取此的WebView是否支持文件访问
  
  
• setBlockNetworkImage(boolean flag)
  设置WebView是否从网络上加载图像资源，是否显示网络图像
  
  
• setBuiltInZoomControls(boolean enabled)
  设置是否显示缩放工具
  
  
• setCacheMode(int mode)
  设置WebView的缓存模式，覆盖默认的缓存模式，有以下几种
  LOAD_NO_CACHE：不要使用缓存，从网络加载
  LOAD_CACHE_ELSE_NETWORK：如果内容已经存在cache 则使用cache，即使是过去的历史记录。如果cache中不存在，从网络中获取。所以加上这句，不仅可以使用cache离线显示用户浏览过的内容，还可以在有网络的情况下优先调用缓存，为用户减少流量
  LOAD_CACHE_ONLY：只从缓存中加载，不使用网络
  LOAD_DEFAULT：不设置时候的默认缓存模式，即不使用缓存
  
  
• setDefaultFontSize(int size)
  设置默认的字体大小（1-72），默认值是16
  
  
• setDefaultTextEncodingName(String encoding)
  设置解码HTML页面时使用的默认文本编码名称，默认值是“UTF-8”。
  
  
• setJavaScriptEnabled(boolean flag)
  通知的WebView可以执行JavaScript， 默认为false。
  
  
• setSupportZoom (boolean support)
  设置是否支持变焦

---

WebView开发问题

浏览网页的回退

当我们在使用一些浏览器浏览网页的时候，经常会遇到这种功能，点击Android的返回键，就会产生网页回退，这个功能应该如何实现呢

webview.setOnKeyListener(new View.OnKeyListener() {
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                if (event.getAction() == KeyEvent.ACTION_DOWN) {
                    if (keyCode == KeyEvent.KEYCODE_BACK && webview.canGoBack()) {
                        webview.goBack();
                        return true;
                    }
                }
                return false;
            }
        });

错误处理

当我们使用浏览器的时候，通常因为加载的页面的服务器的各种原因导致各种出错的情况，最平常的比如404错误，通常情况下浏览器会提示一个错误提示页面。事实上这个错误提示页面是浏览器在加载了本地的一个页面，用来提示用户目前已经出错了。是当我们的app里面使用webview控件的时候遇到了诸如404这类的错误的时候，若也显示浏览器里面的那种错误提示页面就显得很丑陋了，那么这个时候我们的app就需要加载一个本地的错误提示页面，这里就是其实就是webview如何加载一个本地的页面

webview.setWebViewClient(new WebViewClient(){

            @Override
            public void onReceivedError(WebView view, int errorCode,
                    String description, String failingUrl) {
                switch(errorCode)
                {
                case HttpStatus.SC_NOT_FOUND:
                    view.loadUrl("file:///android_assets/error_handle.html");
                    break;
                }
            }
        });

其实，当出错的时候，我们也可以选择隐藏掉WebView，而显示native的错误处理控件，这个时候只需要在onReceivedError里面显示出错误处理的native控件同时隐藏掉webview即可。

WebView和javaScript代码交互

1. WebView调用js
这种方式比较简单，可以通过loadUrl方法实现

webView.loadUrl(“javascript:play()”);
表示webview在调用js中的一个叫做play的方法

2. js调用WebView
下面这个类是用于暴露给js的类

/**
 * 暴露给js的类和方法
 */
class MyJavaScriptInterface {

    private Context context;

    public MyJavaScriptInterface(Context con) {
        this.context = con;
    }

    @JavascriptInterface
    public void clickMe(Context context) {
        Toast.makeText(context, "click", Toast.LENGTH_SHORT).show();
    }

}

那么在js中应该如何调用这个java代码呢，我们需要首先设置WebView允许JavaScript执行，然后将本地的类（用于被js调用的类）映射出去
“myJs”这个名字就是公布出去给JS调用的，那么js就可以直接调用本地的MyJavaScriptInterface类中的方法了

 webview.getSettings().setJavaScriptEnabled(true);
 webview.addJavascriptInterface(new MyJavaScriptInterface(context),"myJs");

//-----js用这个是调用
<body onload="javascript:myJs.clickMe()">  
    ...
</body>

若webview中的js调用了本地的方法，正常情况下发布的debug包时，js调用是没有问题的，但是通常发布release商业版本的apk都是要经过代码混淆，这个时候会发现之前调用正常的js无法正常调用本地方法了。这是因为混淆的时候已经把本地代码的引用给打乱了，导致js中的代码找不到本地方法的地址。
我们可以通过在proguard.cfg文件中加上一些代码来解决，声明本地中被js调用的代码不被混淆

-keep public class com.test.webview.MyJavaScriptInterface{
    public <methods>;
}

---

js对象注入漏洞解决

问题及解决

在上面我们通过webview.addJavascriptInterface()方法将这个功能类暴露给了js，但是addJavascriptInterface()方法存在安全隐患，在JavaScript中可以反射调用到Class的任意属性，比如可以通过对象取得包名和类名，获取类的结构等，再有甚者可以通过这种方式进行远程挂马，可以通过网页挂马的形式来恶意获取用户信息破坏运行环境等行为。Google官方在android 4.2之后通过加入@JavascriptInterface 注释来选择性的暴露方法，即只有标示了@JavascriptInterface的方法JavaScript才能调到。 所以在新版android中可以通过addJavascriptInterface/@JavascriptInterface这个方式解决这个漏洞， 但是由于目前绝大多数app支持android 4.2以前的版本。那么针对android 4.2之前的版本我们还有什么方法么？
首先，我们肯定不能再调用addJavascriptInterface方法了。那么我们如何交互呢，我们知道JS与Java进行交互，有以下几种，比如prompt, alert等，这样的动作都会对应着WebChromeClient类中相应的方法，对于prompt，它对应的方法是onJsPrompt方法，即WebChromeClient 输入框弹出模式，通过这个方法，JS能把信息传递到Java，而Java同样也能把信息传递给JS

public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) 

我们可以利用这个方式，进行数据传递，在使用时候，我们需要判断系统版本是否在4.2以下，因为在4.2以上，Android修复了这个安全问题，我们只是需要针对4.2以下的系统作修复

原理： 我们让JS调用一个Javascript方法，这个方法调用prompt方法，通过prompt把JS中的信息传递过来，这些信息是我们自己组合的包括方法名称参数等信息，我们最好这个信息做成一个json样式，这样更方便解析。然后在WebView端的onJsPrompt方法中，我们用json的方式去解析传递过来的文本，得到方法名、参数等，然后通过反射机制，调用指定对象的方法，这样就实现了js调用WebView，也就可以解决js注入的漏洞

用法及流程

那么我们以一个实例来看一下如何使用 prompt 方式的传递信息，实现 native 和 webview 两端的详细通信

1. 制定通信协议

数据的传输需要约定双方的通信协议，所以我们需要定制一套通信协议来让 js 和 native 相互联系

1）js传递给native的通信协议

我们可以通过uri的形式传递我们的数据，通过 scheme://host:port/path 来定制传递的信息，我们可以定制如下 “hybird协议”

hybrid://className:port/methodName?jsonObject

hybrid：做为传输协议
className：对应的native类
port：native的执行结果callback 的缓存位置
methodName：native类中提供的方法
jsonObject：用json封装好的方法参数

比如我们要调用android中Toast的makeText方法，我们就可以如下方式传递

hybird://Toast:callbackAddress/makeText ? {“msg”:”native log”}

2） native传递给js的通信协议

native向js的通信协议也需要制定，一个必不可少的元素就是返回值，这个返回值和js的参数做法一样，通过json对象进行传递，该json对象中有状态码code，提示信息msg，以及返回结果result，如果code为非0，则执行过程中发生了错误，错误信息在msg中，返回结果result为null，如果执行成功，返回的json对象在result中，看一下这个jsonObj

//失败的样子 eg：
{
    "code":404,
    "msg":"method is not exist",
    "result":null
}

//成功的样子
{
    "code":0,
    "msg":"success",
    "result":{
        "key1":"value1",
        "key2":"value2",     
    }
}

获取返回值通过 native调用js暴露的方法即可，需要将返回的jsonObj和js层传给native层的port一并带上

webView.loadUrl("javascript:Hybrid.onFinish(port,jsonObj);");

2. 构建 Hybrid.js 和 myHtml.html 文件

首先我们看一下 Hybrid.js 文件

(function (win) {
    var hasOwnProperty = Object.prototype.hasOwnProperty;
    var Hybrid = win.Hybrid || (win.Hybrid = {});
    var Inner = {
            callbacks: {},
            call: function (obj, method, params, callback) {
                var port = Util.getPort();
                this.callbacks[port] = callback;
                var uri=Util.getUri(obj,method,params,port);
                window.prompt(uri, "");
            },
            onFinish: function (port, jsonObj){
                var callback = this.callbacks[port];
                callback && callback(jsonObj);
                delete this.callbacks[port];
            },
        };

    var Util = {

        getPort: function () {
            return Math.floor(Math.random() * (1 << 30));
        },
        getUri:function(obj, method, params, port){
            params = this.getParam(params);
            var uri = 'hybrid://' + obj + ':' + port + '/' + method + '?' + params;
            return uri;
        },
        getParam:function(obj){
            if (obj && typeof obj === 'object') { return JSON.stringify(obj); } else { return ''; }
        }
    };
    for (var key in Inner) {
        if (!hasOwnProperty.call(Hybrid, key)) {
            Hybrid[key] = Inner[key];
        }
    }
})(window);

我们定义了Util类，其中包含三个方法，分别是
getPort：用于随机生成port
getUri：用于生成native需要的协议uri
getParam：用于生成json字符串
Inner类包含call和onFinish方法，在 call 方法中，调用 Util.getPort() 获得了 port 值，然后将 callback 对象存储在了callbacks中的 port 位置，接着调用 Util.getUri() 将参数传递过去，将返回结果赋值给 uri，调用window.prompt(uri, “ ”) 将uri传递到native层。而 onFinish() 方法接受native回传的 port 值和执行结果，根据 port 值从 callbacks 中得到原始的 callback 函数，执行 callback 函数，然后从 callbacks 中删除。最后将Inner类中的函数暴露给外部的JSBrige对象，通过一个for循环一一赋值

然后再看一下我们的 myHtml.html 文件

<html>
<head>
    <meta charset="utf-8">
    <title>myJS</title>
    <!-- 引入JS -->
    <script src="file:///android_asset/Hybrid.js" type="text/javascript">
        <script type="text/javascript">
    </script>

</head>

<body>

<div class="blog-header">
    <h3>JS调用android中的方法</h3>
</div>
<ul class="entry">
    <li>
        弹出气泡提示<br/>
        <!-- function (obj, method, params, callback)-->
        <button onclick="Hybrid.call('hybrid','toast',{'entity':'我是气泡 .。o0'},function(res){alert(JSON.stringify(res))})">
            点击产生气泡
        </button>
    </li>
    <br/>
    <br/>
    <li>
        获得设备IMEI<br/>
        <!-- function (obj, method, params, callback)-->
        <button onclick="Hybrid.call('hybrid','getDeviceVersion',{}, function(res){alert(JSON.stringify(res))})">
            点击获取Imei号
        </button>
    </li>
</ul>

</body>
</html>

我们可以看到有两个按钮有两个方法，和都是都过调用JS中的call方法 “function (obj, method, params, callback)” 执行的

3. native端的 JsCallJava 和 JsCallBack

JsCallJava 类主要提供两个功能，第一个 executeJS 方法
作用是从一个Map中查找key是不是存在，不存在则反射拿到对应的Class中的所有方法，将方法是 public static void 类型的，并且参数是Webview，JSONObject，Callback 类型的三个参数，如果满足条件，则将所有满足条件的方法 put 进去
另一个方法是 callJava方法
callJava方法，就是将js传来的 uri 进行解析，然后根据调用的类名的命名从刚刚的 map 中查找是否存在，存在的话拿到该类所有方法的 methodMap ，然后根据方法名从 methodMap 拿到方法，反射调用，并将参数传进去，参数就是刚才那三个参数：WebView，JSONObject，Callback

public class JsCallJava {

    //保存hybird和方法类的键值对
    private static Map<String, ArrayMap<String, Method>> mInjectNameMethods = new ArrayMap();

    /**
     * 动态注入方法
     *
     * @param exposedName
     * @param clazz
     */
    public static void executeJS(String exposedName, Class<JsMethod> clazz) {
        if (!mInjectNameMethods.containsKey(exposedName)) {
            try {
                mInjectNameMethods.put(exposedName, getAllMethod(clazz));
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 通过反射获取类中所有符合规定的方法
     * 以public static 开头的方法
     *
     * @param injectedClass
     * @return
     */
    public static ArrayMap<String, Method> getAllMethod(Class injectedClass) {
        ArrayMap<String, Method> map = new ArrayMap<>();
        Method[] methods = injectedClass.getDeclaredMethods();
        for (Method method : methods) {
            String name;
            if (method.getModifiers() != (Modifier.PUBLIC | Modifier.STATIC) || (name = method.getName()) == null) {
                continue;
            }
            //获取方法参数类型，约定好传参形式
            Class[] parameters = method.getParameterTypes();
            if (null != parameters && parameters.length == 3) {
                if (parameters[0] == WebView.class && parameters[1] == JSONObject.class && parameters[2] == JsCallBack.class) {
                    map.put(name, method);
                }
            }
        }
        return map;
    }

    /**
     * 通过Uri资源格式解析返回的数据
     * @param webView
     * @param uriString
     * @return
     */
    public static String callJava(WebView webView, String uriString) {
        String methodName = "";
        String className = "";
        String param = "{}";
        String port = "";
        if (!TextUtils.isEmpty(uriString) && uriString.startsWith("hybrid")) {
            Uri uri = Uri.parse(uriString);
            className = uri.getHost();
            param = uri.getQuery();
            port = uri.getPort() + "";
            String value = uri.getPath();
            if (!TextUtils.isEmpty(value)) {
                methodName = value.replace("/", "");
            }
        }

        if (mInjectNameMethods.containsKey(className)) {
            ArrayMap<String, Method> methodHashMap = mInjectNameMethods.get(className);

            if (methodHashMap != null && methodHashMap.size() != 0 && methodHashMap.containsKey(methodName)) {
                Method method = methodHashMap.get(methodName);
                if (method != null) {
                    try {
                        method.invoke(null, webView, new JSONObject(param), new JsCallBack(webView, port));
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
            }
        }
        return null;
    }
}

看到 JsCallJava 类中用了 new JsCallBack(webView, port) 进行新建对象，该对象就是用来回调 JS 中回调方法的 java 对应的类。这个类你需要将 JS 传来的port传进来之外，还需要将 WebView 的引用传进来，因为要使用到WebView的loadUrl方法，这里使用弱引用来防止内存泄漏

/**
 * 返回响应
 */
public class JsCallBack {
    private static Handler mHandler = new Handler(Looper.getMainLooper());
    private static final String CALLBACK_JS_FORMAT = "javascript:hybrid.onFinish('%s', %s);";
    private String mPort;
    private WeakReference<WebView> mWebViewRef;

    public JsCallBack(WebView view, String port) {
        mWebViewRef = new WeakReference<>(view);
        mPort = port;
    }


    public void apply(JSONObject jsonObject) {
        final String execJs = String.format(CALLBACK_JS_FORMAT, mPort, String.valueOf(jsonObject));
        if (mWebViewRef != null && mWebViewRef.get() != null) {
            mHandler.post(new Runnable() {
                @Override
                public void run() {
                    mWebViewRef.get().loadUrl(execJs);
                }
            });

        }

    }
}

apply方法通过Handler的切换回到主线程中执行，这是因为暴露给js的方法可能会在子线程中调用这个callback，这样的话就会报错

4. 在Activity中注册这个WebView

然后就是通过Activity中加载这个WebView来显示这个界面了，还有别忘了提供提供html中对应的供JS使用的native代码，方法要满足
public static void 开头并且有Webview，JSONObject，Callback三个参数
比如toast方法

public static void toast(WebView webView, JSONObject entity, JsCallBack back)

然后我们在主Acitivity中加入这个WebView

public class MainActivity extends Activity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mWebView = new WebView(this);
        setContentView(mWebView);

        WebSettings settings = mWebView.getSettings();
        settings.setJavaScriptEnabled(true);
        mWebView.setWebChromeClient(new MyWebChromeClient());
        mWebView.setWebViewClient(new MyWebViewClient());
        mWebView.loadUrl("file:///android_asset/myHtml.html");

        JsCallJava.executeJS("hybrid", JsMethod.class);
    }
}

然后我们看一下效果

其他细节请看这个小例子：http://download.youkuaiyun.com/detail/hkx_smile/9505711

这就是关于WebView的一些总结 恩恩