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

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

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

 

 

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

Xml布局文件：

 

"1.0" encoding="utf-8"?>
"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"/>

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

 

HTML内容：

 

    
        "Content-Type" content="text/html;charset=utf-8">
        
    
    
        
WebView与Javascript交互
        

            "window.web.actionFromJs()">点击调用Native代码
        
        

        

            "window.web.actionFromJsWithParam('come from Js')">点击调用Native代码并传递参数
        
        

        
"log_msg">调用打印信息
    

 

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

    }

}

 

运行效果如图：

 

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