Now the APP will nest some COOL INTERFACE of H5, and our APP needs to interact with H5, let’s take a look at how to carry out specific interaction.

Basic Webview setup

The following is the basic setup of the WebView

WebSettings setting = mWebView.getSettings();
setting.setJavaScriptCanOpenWindowsAutomatically(true);// Set js to open Windows directly, such as window.open(). Default is false
        setting.setJavaScriptEnabled(true);// Whether to allow js execution. Default is false. Setting true alerts you to possible XSS vulnerabilities
        setting.setSupportZoom(true);// Whether it can be scaled. Default is true
        setting.setBuiltInZoomControls(false);// Whether to display the zoom button. Default is false
        setting.setUseWideViewPort(true);// Set this property to scale at any rate. Big view mode
        setting.setLoadWithOverviewMode(true);// Work with setUseWideViewPort(true) to resolve web page adaptation issues
        setting.setAppCacheEnabled(true);// Whether to use cache
        setting.setDomStorageEnabled(true);//DOM Storage
        setting.setDatabaseEnabled(true);
        setting.setAllowFileAccess(true);
        setting.setAppCacheEnabled(true);
        setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); // The image is too big
        setting.setDatabasePath(getActivity().getApplicationContext().getCacheDir().getAbsolutePath());
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            setting.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
Copy the code

Enabling log

If you enable the setting of printing web logs, you can see the log information:

webview.setWebChromeClient(new WebChromeClient() {
            public boolean onConsoleMessage(ConsoleMessage cm) {
                LogUtils.e(TAG, "Print web log ------"+cm.message() + " -- From line "
                        + cm.lineNumber() + " of "
                        + cm.sourceId());
                return true; }});Copy the code

Add JavascriptInterface;

mWebView.addJavascriptInterface(new AndroidJavaScript(), "test");

Copy the code

AndroidJavaScript

public class AndroidJavaScript {
        @JavascriptInterface
        public void testPage(a) {
            LogUtils.e("test"."testPage"); }}Copy the code

TestPage is the name of the convention with H5. The above is a simple interaction between Android and JS. The details need to be discussed with H5.

HTML simple code

There are basically two buttons, two JS methods

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript">

function AndroidCallJs(){
     document.getElementById("content").innerHTML =
         
       


        Android calls JS functions with no arguments
       \>;
}

function AndroidCallJsParam(arg){
     document.getElementById("content").innerHTML =
         ("<br\>"+arg);
}
</script>
</head>
<body>
HTML Test <br/>
<h1><div id="content">Test </div></h1>
<br/>
<input type="button"  value="Click to call Android code" onclick="window.android.startFunction()" />
<br/>
<input type="button"  value="Click to call Android code and pass parameters" onclick="Window. The android. StartFunction (' https://blog.csdn.net/sinat_26397681?spm=1000.2115.3001.5343 ')"  />
</body>
</html>
Copy the code

Android calls

// Call the JS method with no arguments
webview.loadUrl("javascript:AndroidCallJs()");
// Call the HTML js method with arguments
webview.loadUrl("javascript:AndroidCallJsParam(" + "'https://blog.csdn.net/sinat_26397681?spm=1000.2115.3001.5343'" + ")");
Copy the code