随着H5性能的不断提升，虽然离原生APP还有一段不小的距离，但是WebAPP的体验比之当时，无疑是提升了不少。

今天介绍一个组件，可以实现将一个WebAPP->APP（俗称套壳APP？大雾）

或者简单的理解——就是一个在AndroidAPP内浏览网页组件（小型的浏览器？）

WebView

概述

WebView组件是Android提供用于显示网页信息，它内置了WebKit引擎，所以我们可以把WebView当作一个轻量级的浏览器使用。

Webkit是一个开源的浏览器引擎，Chrome浏览器也是基于它

使用前也需要添加权限

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

使用WebView加载网页

基本使用介绍

加载网页

webView.loadUrl("http://uuw.baidu.com");

效果如👈，效果将会是跳转到百度（一般会以浏览器打开，如果设置了默认的）

加载本地网页

webVieuloadUrl(file:///android-asset/XXX.html); //这里的格式是固定的,文件位置assets目录下

post方式传送参数

String postData = "clientID = cid & username = name";
webview.postUrl(url, EncodingUtils.getBytes(postData, "base64"));
webview.postUr(String url, byte[] postData) //加载页面使用Post方式, postData为参数

使用loadData方法来加载html数据

//loadData()需要三个参数: HTML TAG ,MIME类型(text/html),网页编码方式(utf-8)
wv.loadData(content, "text/html","UTF-8");

效果如👈 ，显示编写的html数据内容

简单测试

布局文件添加一个WebView

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView">
    </WebView>

</android.support.constraint.ConstraintLayout>

完整代码

package com.example.a4_17webview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {
    private WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webView);
        //加载网页
        //webView.loadUrl("http://www.baidu.com");

        //loadData
        webView.loadData("<html><body>LOADDATA</body></html>","text/html","utf-8");
    }
}

参数设置

基本设置

WebSettings webSettings = webView.getSettings(); //获取设置
WebSettings.setSavePassword(false);//保存密码 
webSettings.setSaveFormData(false); //保存表单数据 
webSettings.setJavaScriptEnabled(true); //WebView默认是不支持
JavaScriptwebSettings.setSupportZoom(false); //缩放
webview.setScrollBarStyle(View.SCROLLBARS INSIDE OVERLAY); //在内容显示内部显webView.goBack(); //返回
webView.goForward(); //前进
webView.stoploadingl(); //停止加载
webView.requestFocusl();//如果不设置的话,会出现不能弹出软键盘等问题

//希望点击链接继续在当前browser中响应，必须覆盖WebViewClient对象
webView.setWebViewClient(new WebViewClient(){
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
       }
    });
//处理标题，图标
webView.setWebChromeClient(new WebChromeClient(){
    @Override
        public void onReceivedTitle(WebView view, String title) {
            super.onReceivedTitle(view, title);
        }
    });

简单测试

完整代码：

package com.example.a4_17webview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webView);

        //loadData
        //webView.loadData("<html><body>LOADDATA</body></html>","text/html","utf-8");

        /**参数设置**/
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setSupportZoom(true);
        settings.setBuiltInZoomControls(true);
        webView.requestFocus();
        webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

        //希望点击链接继续在当前browser中响应，必须覆盖WebViewClient对象
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        //处理标题，图标
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
            }
        });

        //加载网页
        webView.loadUrl("http://www.baidu.com");

    }
}

效果如👇

点击任意内容👉仍在当前WebView

但是上面的案例有个小问题，点击返回会直接退出程序，而不是预期的返回上一个页面。

比如上面演示的，访问百度后点击百度的任意内容，进入下一个内容，点返回不会返回百度，而是直接退出程序。

为了解决这个问题，我们进行

回退键设置

重写onKeyDown方法

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

与JS的交互

WebView提供了addJavascriptInterface(Object obj,String interfaceName)这个方法。

但是在API17后Android官方限制javascript代码只能调用声明了@JavascriptInterface 注解的Java方法。

该方法将一个Java对象绑定到一个Javascript对象中，这样初始化webView后，在webView加载的页面就可以直接通过Javascript:window.demo访问到绑定的java对象。

Javascript对象名即interfaceName(demo)
Javascript作用域为Global

案例

建一个assets包下面创建一个index.html文件并书写html代码

index.html

<html>
    <head>
        <title>hello webview</title>
        <script language="JavaScript">
            function myfun(){
                document.getElementById("imgid").src="https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/w%3D500/sign=c290a0a3d9ca7bcb7d7bc72f8e086b3f/cb8065380cd7912327430d14a3345982b2b7802b.jpg";
            }

        </script>
        <body>
            <a οnclick="window.demo.clickOnAndroid()">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555663226281&di=ddc3da2be5311ade569ca4bc2c9b5f98&imgtype=0&src=http%3A%2F%2Fimg.evolife.cn%2F2014-12%2F89a506ac5543ca53.jpg" id="imgid" width="300" height="400">
            </a>
        </body>
    </head>
</html>

完整代码

package com.example.a4_17webview;

import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    private WebView webView;
    private Handler handler;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webView);
        handler = new Handler();
        //loadData
        //webView.loadData("<html><body>LOADDATA</body></html>","text/html","utf-8");

        /**参数设置**/
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setSupportZoom(true);
        settings.setBuiltInZoomControls(true);
        webView.requestFocus();
        webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

        //希望点击链接继续在当前browser中响应，必须覆盖WebViewClient对象
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        //处理标题，图标
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
            }
        });

        webView.addJavascriptInterface(new MyObject(),"demo");
        //加载网页
        //webView.loadUrl("http://www.baidu.com");

        //加载写的index.html
        webView.loadUrl("file:///android_asset/index.html");
    }

    //内部类
    public class MyObject{
        @JavascriptInterface
        public void clickOnAndroid(){
            handler.post(new Runnable() {
                @Override
                public void run() {
                    webView.loadUrl("javascript:myfun()");
                }
            });
        }
    }


    //回退键
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

}

测试效果

点击后👉

安卓网络编程——WebView

WebView

概述

使用WebView加载网页

基本使用介绍

简单测试

参数设置

基本设置

简单测试

回退键设置

与JS的交互

案例