注：在做例子之前要先做好准备工作，在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. 浅谈JSON与与JS相关的JSON函数

    本文内容主要引用在微信公众号上看到的一片文章,因为自己对Json了解不是很深入,所以就整理出这篇博文与大家分享! 一. JSON是一种格式,基于文本,优于轻量,用于交换数据 1.一种数据格式 数据的传 ...

  2. 树莓派项目（1-2）人脸识别 C++

    级联分类器 在这里,我们学习如何使用objdetect在我们的图像或视频中查找对象 https://docs.opencv.org/3.3.0/db/d28/tutorial_cascade_clas ...

  3. TCP连接和连接释放（TCP的三次挥手和四次握手）

    TCP的运输连接管理 TCP是面向连接的协议.运输连接是用来传送TCP报文的.TCP运输连接的建立和释放是每一次面向连接的通信中必不可少的过程.因此,运输连接就有三个阶段,即:连接建立.数据传送和连接 ...

  4. 洛谷p1902刺杀大使题解

    题目传送门 方法:二分答案+dfs 二分一个mid,此次刺杀的最大伤害,作为判断条件来dfs,二分,更新. 我们二分一个答案mid来表示一个界限,如果当前这个格子的伤害代价比mid小则可以走否则就不走 ...

  5. C语言博客作业4——数组

    0.展示PTA总分 一维数组 二维数组 字符数组 1.本章学习总结 1.1学习内容总结 一维数组知识点: 无论是对一维数组还是二维数组进行应用时,我们对其下标的应用十分广泛. 1:一维数组的输入和遍历 ...

  6. SpringBoot与MyBatis整合案例

    1.导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  7. MySql查询数据令某字段显示固定值

    我们用SQL查询数据时后,基于某些原因不想看到某字段的值,比如密码,我们可以通过创建视图,忽略某一字段的值. 同时我们也可以直接通过SQL语句来让其显示某个固定值: (1)一般查询语句: SELECT ...

  8. [Gamma]Scrum Meeting#5

    github 本次会议项目由PM召开,时间为5月30日晚上10点30分 时长15分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客,组织例会 撰写博客,组织例会 swoip 前端显示屏幕,翻译 ...

  9. java8新特性七-Date Time API

    Java 8通过发布新的Date-Time API (JSR 310)来进一步加强对日期与时间的处理. 在旧版的 Java 中,日期时间 API 存在诸多问题,其中有: 非线程安全 − java.ut ...

  10. Sitecore 9 您应该了解的所有新功能和变化

    信不信由你,当我谈论Sitecore时,我感到非常兴奋.这是一个充满潜力和机遇的伟大平台 如果你能想象一个刚刚进行过一次双重训练的人,一个特大号的星巴克,并且刚刚在创纪录的时间内完成了中国忍者勇士的障 ...