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);
                }
            });
    
        }
    
    }

    运行效果如图:

     

  • 相关阅读:
    从例图中学习思维导图的基本概念
    名企面试官精讲典型编程题之C++篇
    PPT,要你好看(全彩)
    文字即艺术
    MindManager中读图工具的使用
    思维导图的三招十八式
    放之四海皆适用的设计原则(一)
    MindManager的例图资源
    内容营销11金规
    专业嵌入式软件开发——全面走向高质高效编程(含DVD光盘1张)
  • 原文地址:https://www.cnblogs.com/xiobai/p/11084511.html
Copyright © 2011-2022 走看看