注：在做例子之前要先做好准备工作，在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=""/>

    <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 = {"","fs301","","粤-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);

            }

        });

    }

}

运行效果如图：

Android-----WebView加载HTML界面布局并进行数据交互的更多相关文章

  1. 移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下，android怎么加载H5界面

    PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...

  2. Android WebView加载本地html并实现Java与JS交互

    最近做的一个项目中,用到自定义地图,将自定义地图转换成html页面,现在需要做的是如何将本地的html加载到android中,并可以实现交互. 相关讲解: 其实webview加载资源的速度并不慢,但是 ...

  3. Andriod中WebView加载登录界面获取Cookie信息并同步保存,使第二次不用登录也可查看个人信息。

    Android使用WebView加载登录的html界面,则通过登录成功获取Cookie并同步,可以是下一次不用登录也可以查看到个人信息,注:如果初始化加载登录,可通过缓存Cookie信息来验证是否要加 ...

  4. 转:Android Webview 加载外部html时选择加载本地的js,css等资源文件

    原文地址:http://m.blog.csdn.net/blog/qduningning/43196819 在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片 ...

  5. Android WebView 加载富文本内容

    WebView加载数据的方式有两种: 1. webView.loadUrl(data);//加载url 2. webView.loadDataWithBaseURL(null,data, " ...

  6. Android WebView 加载超长 JS 数据

    在之前的文章里面,我总结过WebView如何与网页交互,也就是Java如何和JS交互 —— Android WebView 总结 —— Java和JavaScript交互. 基于这篇文章,我们基本上能 ...

  7. android webview 加载本地html 实现 与 java 之间的相互响应

    1.布局 <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:androi ...

  8. Android WebView 加载网页

    通过Android 中 WebView 控件加载HTML5 页面,这是实现Android 混合开发的基础. 选择加载的网页可以是本地,也可用使远程的.需要添加访问互联网的权限:<uses-per ...

  9. android webview加载网络连接

    webview = (WebView) findViewById(R.id.webview); WebSettings webSettings = webview.getSettings(); //设 ...

随机推荐

  1. LeetCode 622. Design Circular Queue

    原题链接在这里:https://leetcode.com/problems/design-circular-queue/ 题目: Design your implementation of the c ...

  2. 归并排序 MergeSort

    今天第一次看懂了严奶奶的代码(￣▽￣)~*,然后按照厌奶那的思路进行了一波coding,稍加调试后即可跑起来. 学习链接:排序七 归并排序.图解排序算法(四)之归并排序 merge函数:将两个有序序列 ...

  3. python基础_格式化输出（%用法和format用法）(转载)

    python基础_格式化输出(%用法和format用法) 目录 %用法 format用法 %用法 1.整数的输出 %o -- oct 八进制%d -- dec 十进制%x -- hex 十六进制 &g ...

  4. web服务本质

    目录 django 框架引入: web框架本质 HTTP协议 多功能web服务 封装,分发处理 django 框架引入: web框架本质 web框架本质: 软件开发架构: c / s ; b/ s - ...

  5. 在Proxmox VE上运行OpenWrt/LEDE虚拟机——导入OW/LEDE固件文件到虚拟机中

    PVE的OW/LEDE虚拟机初始化创建完成后,需要将编译好的固件文件上传到PVE主机上,然后转换为更适合KVM使用的磁盘映像格式并导入到OW/LEDE虚拟机中,这样就可以更好地使用基于KVM的OW/L ...

  6. Android Studio 之 ROM【3】，LiveData+ViewModel+AsyncTask+Repository+RecyclerView

    教程地址:https://www.bilibili.com/video/av65180549 源码地址:https://github.com/longway777/Android-2019-Tutor ...

  7. Oracle_其他人连接不上自己电脑

    1. 修改文件G:\app\eric\product\11.2.0\dbhome_1\NETWORK\ADMIN\listener.ora文件,listener中的address中加一个你的ip开头的 ...

  8. .net core 运行不需命令行

    1.问题情景: 需要保证已安装.net core SDK,并且命令提示符下运行“dotnet --version”,有反应. 如果之前运行良好,现在却不行了,查看安装程序中存在.net core SD ...

  9. OpenCV+TensorFlow图片手写数字识别(附源码)

    初次接触TensorFlow,而手写数字训练识别是其最基本的入门教程,网上关于训练的教程很多,但是模型的测试大多都是官方提供的一些素材,能不能自己随便写一串数字让机器识别出来呢?纸上得来终觉浅,带着这 ...

  10. Atlassian JIRA 插件开发之三 创建

    之前的都是准备,真正的插件是从这里开始的 参考:https://developer.atlassian.com/server/framework/atlassian-sdk/modify-the-pl ...