zoukankan      html  css  js  c++  java
  • Android-----WebView加载HTML界面布局并进行数据交互

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

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

    有关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() + "
    js调用了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() +  "
    js调用了Native函数传递参数:" + str;
                    OBDTextView.setText(text);
                }
            });
    
        }
    
    }

    运行效果如图:

     

  • 相关阅读:
    延时函数出错,volatile一例
    【转】STM32中的抢占优先级、响应优先级概念
    【转载】串口中怎样接收一个完整数据包的解析
    ARM-ContexM3/4组优先级和子优先级抢占规则
    【转载】Keil中的USE MicroLib说明
    线程让出实验【RT-Thread学习笔记 4】
    线程优先级抢占实验【RT-Thread学习笔记 3】
    RT-Thread的线程(任务)处理【RT-Thread学习笔记 2】
    熟悉RT-Thread的软硬件环境【RT-Thread学习笔记 1】
    RT-Thread下的串口驱动程序分析【转载】
  • 原文地址:https://www.cnblogs.com/xiobai/p/11084511.html
Copyright © 2011-2022 走看看