WebView的介绍与简单实现Android和H5互调的方法

介绍：

WebView是Andorid中提供的一种视图控件，它可以在应用中嵌入一个浏览器控件，并且可以开发者可以通过它来嵌套H5页面或者加载本地html文件，整合了nativ和webview，并且可以通过简单的代码实现两者之间的通信交互。在移动端中，WebView所扮演的作用非常重要，可以作为应用的嵌套控件，也可以用来作为轻量级的信息展示器。下面我们针对该控件进行进一步的讲解，并且介绍如何实现Andorid和H5互调的方法。

WebView的实现

引入WebView

在项目的build.graddle中加入如下代码：

allprojects {
    repositories {
        ......
    }
}

在要使用的activity中，添加如下代码：

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

2.在activity对webview进行操作

public class MainActivity extends AppCompatActivity {
    private WebView mWebView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView = findViewById(R.id.webview);
        mWebView.loadUrl("https://www.baidu.com");
        mWebView.setWebViewClient(client);
        mWebView.setWebChromeClient(chromeClient);

    }
    public WebViewClient client = new WebViewClient(){
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    };

    public WebChromeClient chromeClient = new WebChromeClient(){
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            if(newProgress == 100){
                view.setVisibility(View.VISIBLE);
            }
        }
    };
}

Andorid和H5互调的方法

WebView提供了两种方法与H5相互调用的方式：

JS 调用 Native 接口

Android 端需要提供一个 JS 接口类供 H5 调用，这个类需要继承自 Object 类，由于该类是运行在 JS 线程中的，所以它的方法需要被 @JavascriptInterface 标识。方法名可以任意命名，但是不容许重载：

public class WebAppInterface {
    private Context mContext;

    public WebAppInterface(Context context) {
        mContext = context;
    }

    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

Android 端在 WebView 中启动 H5 界面时，需要通过 setJavaScriptEnabled 方法设置启用 JavaScript：

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);

H5 端调用 JS 接口，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>调用Android原生Toast</title>
</head>
<body>
    <input type="button" value="调用Android原生Toast" onclick="showToast('这是Android原生Toast')"/>
    <script type="text/javascript">
        function showToast (string) {
            window.Android.showToast(string)
        }
    </script>
</body>
</html>

Native 调用 JS 接口

使用 evaluateJavascript 方法，该方法可以在 WebView 中执行一段 JS 代码。需要注意的是，该方法在 Android 4.4 版本以下不可用，因此需要特殊处理：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    webView.evaluateJavascript("javascript:showAndroidToast('这是来自Android代码')", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            Toast.makeText(mContext, value, Toast.LENGTH_SHORT).show();
        }
    });
} else {
    webView.loadUrl("javascript:showAndroidToast('这是来自Android代码')");
}

H5 端提供如下方法供 Native 调用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>调用Android原生 Toast</title>
    <script type="text/javascript">
        function showAndroidToast(string) {
            alert(string);
        }
    </script>
</head>
<body>
</body>
</html>

示例1：

Android实现页面跳转与H5显示。
Android侧代码：

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.setWebViewClient(new WebViewClient(){
            //覆盖shouldOverrideUrlLoading方法
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //解析url
                Uri uri = Uri.parse(url);
                //如果url的协议为wvjbscheme，说明是由JS调用的
                //因为前面已经拦截过一次，说明肯定是能够处理scheme的
                if(uri.getScheme().equals("wvjbscheme")){
                    if(uri.getHost().equals("baicai")){
                        Intent intent = new Intent(Intent.ACTION_VIEW,uri);
                        startActivity(intent);
                        return true;
                    }
                    return false;
                }
                return super.shouldOverrideUrlLoading(view, url);
            }
        });

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        String html = "<html><body><h1>HTML中的一个跳转页面</h1>" +
                "<p>点击下方按钮来调用我们的原生代码</p>" +
                "<p><button type=\"button\" onclick=\"javascript:window.baicai.gotoNative()\">跳转到原生界面</button></p>" +
                "</body></html>";
        webView.loadDataWithBaseURL("file:///android_asset/", html, "text/html", "UTF-8", null);
    }
}

H5侧代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>跳转页面</title>
    <script type="text/javascript">
        function gotoNative() {
            var url = "wvjbscheme://baicai/jump?title=跳转到百菜网";
            window.location.href = url;
        }
    </script>
</head>
<body>
<p>欢迎来到百菜网</p>
</body>
</html>

设置Webview长按事件。
Android侧代码：

public class MainActivity extends AppCompatActivity {
    private WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    class JavaScriptInterface {
        private Context mContext;

        public JavaScriptInterface(Context c) {
            mContext = c;
        }

        @android.webkit.JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }

        @android.webkit.JavascriptInterface
        public void showLongToast(String toast){
            Toast.makeText(mContext, toast, Toast.LENGTH_LONG).show();
        }
    }

    private void initWebView(){
        webView = findViewById(R.id.webview);
        webView.setWebViewClient(new WebViewClient(){
            //覆盖shouldOverrideUrlLoading方法
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
            @Override
            public void onPageFinished(WebView webView, String url){
                webView.loadUrl("javascript:document.body.contentEditable=true; void 0");
            }
        });
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new JavaScriptInterface(this), "Android");

        String html = "<html><body><h1>HTML中的一个长按事件</h1>" +
                "<p long-pressable-on-android='true'>点击下方按钮来显示toast提示</p>" +
                "</body></html>";
        webView.loadDataWithBaseURL("file:///android_asset/", html, "text/html", "UTF-8", null);
    }
}

H5侧代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>长按事件</title>
    <script type="text/javascript">
        var pressTimer;
        var longPress = function() {
            window.Android.showLongToast("接收到一个长按事件");
        };
        document.querySelector('p.long-pressable-on-android')
            .addEventListener('mousedown', function(event) {
                pressTimer = window.setTimeout(longPress,3500);
            });
    </script>
</head>
<body>
<p>欢迎来到百菜网</p>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：WebView的介绍与简单实现Android和H5互调的方法 - Python技术站