WebView与Android原生通信

1.Android中打开 本地的HTML

Android中打开本地的HTML
初始化WebView，加载本地的Ht ml文件

javaMethod = new JavaMethod(this);
        webView = new WebView(this);
        WebSettings settings = webView.getSettings();
        settings.setDomStorageEnabled(true);
        settings.setJavaScriptEnabled(true);
        settings.setBlockNetworkImage(false);
        webView.setWebViewClient(javaMethod.getWebViewClient());
        webView.setWebChromeClient(javaMethod.getWebChromeClient());
        webView.addJavascriptInterface(javaMethod, "android");
        frameLayout.addView(webView);

        // webView加载一个网页
        webView.loadUrl("file:///android_asset/test_js.html");

js 调用 native

1. 借助WebView.ad dJavascriptInterfa ce 实现H5与Native通信

WebView的ad dJavascriptInterfa ce 方法允许Natvive向Web页面注入Java对象，之后，在js中便可以直接访问该对象，使用@JavascriptInterface注解的方法。

public class JavaMethod {
    private MainActivity mainActivity;
    private Handler uiHandler;

    public JavaMethod(MainActivity mainActivity) {
        this.mainActivity = mainActivity;
        uiHandler = new Handler(Looper.getMainLooper());
    }

    @JavascriptInterface
    public void JsToJavaInterface(final String param) {
        uiHandler.post(new Runnable() {
            @Override
            public void run() {
                mainActivity.setTextShow("from JavaInterface: " + param);
            }
        });
    }
}

在前端的js 代码中，是可以直接通过mJsMethodApi.callNative(jsonString)通知Native的，而且通过addJavascriptInterface注入的对象在H5的任何地方都可以调用，不存在注入时机跟注入失败的问题，在H5的head里调用都没问题

<html>

    <head>
        <meta http-equiv="Content-Type" charset="UTF-8"/>

        <script type="text/javascript">
        </script>
    </head>

    <body>

        <h3>Js Method</h3>
        <h3 id="textshow">调用结果</h3>
        
        <input type="button" value="JavascriptInterface" onclick="window.android.JsToJavaInterface('我来自Js')"/>

    </body>

</html>

2. shouldOverr ideUrlLoading

通过WebViewClient中的shouldOverr ideUrlLoading拦截url，制定一个对应协议。
在Html中增加一条

<input type="button" value="shouldOverrideUrlLoading" onclick="document.location = 'js://jstojava?arg1=1号参数&amp;arg2=2号参数'"/>

在Android代码中拦截url

 /**
     * shouldOverrideUrlLoading：webViewClient加载url时候的回调
     *
     * @return WebViewClient
     */
    public WebViewClient getWebViewClient() {
        WebViewClient webViewClient = new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                Uri uri = request.getUrl();
                // 与JS端定义好协议：  一般协议格式是Scheme（协议头）+ Authority(协议名)
                if (uri != null) {
                    String scheme = uri.getScheme();
                    if (scheme != null &amp;&amp; scheme.equals("js")) {
                        String authority = uri.getAuthority();
                        if (authority != null &amp;&amp; authority.equals("jstojava")) {
                            // 获取参数
                            String arg1 = uri.getQueryParameter("arg1");
                            String arg2 = uri.getQueryParameter("arg2");

                            showText(MessageFormat.format("参数: {0}; {1}", arg1, arg2));
                            Log.e("==TAG==>", "参数 -> arg1:" + arg1 + " ; arg2:" + arg2);

                        }
                        return true;
                    }
                }
                return super.shouldOverrideUrlLoading(view, request);
            }
        };
        return webViewClient;
    }

这种方式没有版本限制和漏洞，不过没有返回值，如果Js调用后需要 android 返回就得使用 loadUrl()或者evaluateJavasc ript()回传对应的接收方法了。值得一提的是，这种方式便于和IOS通用一套协议，简便Js端的代码量。

3. onJsAlert()、onJsConfirm()、onJsPrompt()

通过 WebChromeClient 中的onJsAlert()、onJsConfirm()、onJsPrompt()拦截Js中的alert()、confirm()、prompt() 消息。而alert、confirm、prompt代表Js中三种常用提示框，第一种没有返回值，第二种返回布尔值，第三种可返回任意值。由于考虑到灵活性，所以我们可以直接实现对prompt的拦截即可。

在Html中添加

  <script type="text/javascript">
        function jstojavaprompt(param){
             result = prompt(param);
             document.getElementById("textshow").innerHTML = (result);
        }
    </script>
...
<input type="button" value="onJsPrompt"
       onclick="jstojavaprompt('js://jstojava?arg3=1号参数&arg4=2号参数')"/><br/>

代码中设置setWebChromClient()，拦截onJsPrompt

    /**
     * onJsPrompt：调用本地方法jstojavaprompt()，然后回调onJsPrompt()
     *
     * @return WebChromeClient
     */
    public WebChromeClient getWebChromeClient() {
        return new WebChromeClient() {
            @Override
            public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
                Log.e("==TAG==>", "url:" + url);
                Uri uri = Uri.parse(message);
                // 与JS端定义好协议：  一般协议格式是Scheme（协议头）+ Authority(协议名)
                if (uri != null) {
                    String scheme = uri.getScheme();
                    if (scheme != null && scheme.equals("js")) {
                        String authority = uri.getAuthority();
                        if (authority != null && authority.equals("jstojava")) {
                            // 获取参数
                            String arg1 = uri.getQueryParameter("arg3");
                            String arg2 = uri.getQueryParameter("arg4");

                            showText(MessageFormat.format("参数: {0}; {1}", arg1, arg2));
                            Log.e("==TAG==>", "参数 -> arg1:" + arg1 + " ; arg2:" + arg2);

                            result.confirm("我来自onJsPrompt");

                        }
                        return true;
                    }
                }
                return super.onJsPrompt(view, url, message, defaultValue, result);
            }
        };

    }

Native调用JS

1. loadUrl() 方式

在Html中添加JS方法

<script type="text/javascript">
var s = '我来自Js方法';
        function javatojscallback(param){
             document.getElementById("textshow").innerHTML = (param);
             window.android.jsCallbackParams(s)
        }
</script>

window.android.JsToJavaInterface(s)是Js调用 android的方法，由于loadUrl()不能从Js返回数据，可以让Js回调android的方法回传参数。

在Android代码中添加接收Js回调传参的方法

  // Js回调Android的方法，传递参数
    @JavascriptInterface
    public void jsCallbackParams(String params){
        showText(params);
    }

在Android中调用JS方法

/**
     * 通过 webView.loadUrl 调用JS
     *
     * @param view view
     */
    public void loadUrl(View view) {
        webView.loadUrl("javascript:javatojscallback('我来自Java')");
    }

2. evaluateJavascript()方式

在Html中定义js的方法，供Java调用

var s = '我来自Js方法';
function javatojswith(param){
             document.getElementById("textshow").innerHTML = (param);
             return s;
        }

在Android中通过webView.evaluateJavascript()调用JS中的方法

/**
     * 通过 webView.evaluateJavascript 调用JS
     *
     * @param view
     */
    public void evaluate(View view) {
        webView.evaluateJavascript("javascript:javatojswith('这是来自Java的参数')",
                new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {
                        setTextShow(value);
                        Toast.makeText(WebActivity.this, value, Toast.LENGTH_SHORT).show();
                    }
                });
    }

WebView优化

为什么拥有Webview的H5页面打开这么慢，是因为它通常会经历以下几个阶段：
1）Webview初始化。
2）到达新的页面，网络连接，从服务器下载 html，css，js，页面白屏。
3）页面基本框架出现，js请求页面数据，页面处于loading 状态。
4）出现所需的数据，完成整个页面的渲染，用户可交互。

Webview提前初始化
提前加载WebView，进行WebView的初始化。加载Webview内核，这是一个重量级的操作，内核是以apk的形式存在。
App生成一个全局 webview，并且在启动时初始化，这样在后面使用时通过动态获取这个全局Webview，然后添加到rootview中，这样就可以进行复用从而减少初始化的时间。