Android-----WebView加载HTML界面布局并进行数据交互

约定不等于承诺〃 2021-10-18 19:58 270阅读 0赞

注：在做例子之前要先做好准备工作，在app下新建一个名为：assets的目录（不懂怎么创建的可参考：**https://blog.csdn.net/Biegral/article/details/47170037**）

assets目录下存放要加载的HTML文件等

![1672281-20190625175217732-30654754.png][]

有关webView的讲解自行百度，这里直接用例子来大概了解一下：

Xml布局文件：

<?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内容：

<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调用了js函数并传递参数："+arg);
                }
    
            </script>
        </head>
        <body>
            <p>WebView与Javascript交互</p>
            <div>
                <button onClick="window.web.actionFromJs()">点击调用Native代码</button>
            </div>
            <br/>
            <div>
                <button onClick="window.web.actionFromJsWithParam('come from Js')">点击调用Native代码并传递参数</button>
            </div>
            <br/>
            <div id="log_msg">调用打印信息</div>
        </body>
    </html>

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");  //加载文件的路径以及文件名
            OBDmwebView.addJavascriptInterface(this,"web");
    
            OBDTextView = this.findViewById(R.id.obd_text);
    
            String [] data = {
        "20190606001","fs301","13024","粤-A888","白色","2019-02-02 15:38:28","338km"};
    
        }
    
        //此方法没参数
        @android.webkit.JavascriptInterface
        public void actionFromJs() {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    Toast.makeText(OBDCheckWebView.this, "js调用了Native函数", Toast.LENGTH_SHORT).show();
                    String text = OBDTextView.getText() + "\njs调用了Native函数";
                    OBDTextView.setText(text);
                }
            });
        }
    
        //可传递参数
        @android.webkit.JavascriptInterface
        public void actionFromJsWithParam(final String[] str) {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    Toast.makeText(OBDCheckWebView.this, "js调用了Native函数传递参数：" + str, Toast.LENGTH_SHORT).show();
                    String text = OBDTextView.getText() +  "\njs调用了Native函数传递参数：" + str;
                    OBDTextView.setText(text);
                }
            });
    
        }
    
    }

运行效果如图：

![1672281-20190626083011619-584776621.png][]

转载于:https://www.cnblogs.com/xiobai/p/11084511.html

[1672281-20190625175217732-30654754.png]: /images/20211018/e2efbd3219e542a79ce1bf708943e591.png
[1672281-20190626083011619-584776621.png]: /images/20211018/6c3e67f176d24e1d8d64760e534db228.png