Android ----- WebView to load HTML interface layout and data exchange

Note: The first well prepared before doing example, app under a new name: assets directory (do not know how to create reference may be: https://blog.csdn.net/Biegral/article/details/47170037 )

Store to load HTML files directory under assets

Baidu related webView explain themselves, where the direct use of examples to find out about:

Xml layout file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <WebView
        android:id="@+id/obd_webview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <TextView android:id="@+id/obd_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=""/>

</LinearLayout>

HTML content:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <script type="text/javascript">
            function actionFromNative(){
                 document.getElementById("log_msg").innerHTML +=
                     "<br\>Native调用了js函数";
            }

            function actionFromNativeWithParam(arg){
                 document.getElementById("log_msg").innerHTML +=
                     ( " <Br \> Native call js function and pass parameters: " + Arg); 
            }

         </ Script> 
    </ head> 
    <body> 
        <P> the WebView and Javascript interacting </ P> 
        <div> 
            <Button the onClick = " window.web.actionFromJs () " > click to call Native Code </ Button> 
        </ div> 
        a 
        <div> 
            <Button the onClick = " window.web.actionFromJsWithParam ( 'Come from Js') " > click to call Native code and pass parameters </ Button> 
        </ div> 
        a
        <div id="log_msg"> Print information call </ div> 
    </ body> 
</ HTML>

The logic Android:

public class OBDCheckWebView extends AppCompatActivity {

    private WebView OBDmwebView;
    private TextView OBDTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_obdcheck_webview);

        OBDmwebView = this.findViewById(R.id.obd_webview);
        OBDmwebView.getSettings().setJavaScriptEnabled(true);   //启用Javascript
        OBDmwebView.loadUrl("file:///android_asset/web.html");  //Loading the file path and the file name 
        OBDmwebView.addJavascriptInterface ( the this , " Web " ); 

        OBDTextView = the this .findViewById (R.id.obd_text); 

        String [] Data = { " 20,190,606,001 " , " FS301 " , " 13024 " , " Guangdong -A888 " , " white " , " 2019-02-02 15:38:28 " , " 338km " }; 

    } 

    // this method did parameter
    android.webkit.JavascriptInterface @
     public  void actionFromJs () { 
        runOnUiThread ( new new Runnable () { 
            @Override 
            public  void RUN () { 
                Toast.makeText (OBDCheckWebView. the this , " JS function called Native " , Toast.LENGTH_SHORT) .Show ( ); 
                String text = OBDTextView.getText () + " \ NJS function called Native " ; 
                OBDTextView.setText (text); 
            } 
        }); 
    } 

    // passing parameters 
    @ android.webkit.JavascriptInterface
    public  void actionFromJsWithParam (Final String [] STR) { 
        runOnUiThread ( new new the Runnable () { 
            @Override 
            public  void RUN () { 
                . Toast.makeText (OBDCheckWebView the this , " JS Native function call transfer parameters: " + STR, Toast.LENGTH_SHORT ) the .Show (); 
                String text = OBDTextView.getText () +   " \ NJS Native function call transfer parameters: " + STR; 
                OBDTextView.setText (text); 
            } 
        }); 

    } 

}

Operating results as shown:

Android ----- WebView to load HTML interface layout and data exchange

Guess you like