Android中WebView的交互细节天气可视化Demo实战

最新推荐文章于 2023-05-08 21:07:37 发布
最新推荐文章于 2023-05-08 21:07:37 发布
阅读量2.2k 收藏 8
点赞数 1
分类专栏： 技术笔记 Android 文章标签： 可视化 webview android java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Android_Cob/article/details/108814328
版权

Android使用WebView交互

Android使用webView细节

文章目录

前言

android中使用WebView细节繁多，特此记录一个天气可视化折线图，android端使用WebView加载前端H5页面，可视化工具使用Echarts ，api使用聚合天气

一、android端与WebView交互

1.android调用前端方法

编写布局 ProgressBar为进度条，可省略

<?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">
    <ProgressBar
        android:layout_width="match_parent"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:id="@+id/chart_bar"
        android:layout_height="10dp"/>
<WebView
    android:layout_width="match_parent"
    android:id="@+id/fragment_webview"
    android:layout_height="match_parent"/>

</LinearLayout>

H5中编写一个测试方法供android端调用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>
<script>

      /* 无参调用 */
    function notParamFun() {
        alert("网页方法被调用");
    }
    
    /* 有参调用 */
    function haveParamtestFun(data) {
        alert("接收到android端的数据:" + data);
    }
</script>
</html>

注意：编写好的HTML网页需要放入android 项目中的assets中，assets需要手动新建。
在这里插入图片描述

android 中java代码，注意loadUrl中是asset，且发送数据必须等待网页加载完（newProgress =100）才能进行交互并且只能传输字符串形式。
且需要加入单引号

 	private ProgressBar chartBar;
    private WebView fragmentWebview;
    
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
         chartBar = (ProgressBar) view.findViewById(R.id.chart_bar);
        fragmentWebview = (WebView) view.findViewById(R.id.fragment_webview);


        /*前端接口*/
        fragmentWebview.addJavascriptInterface(this, "myWebView");
        fragmentWebview.loadUrl("file:///android_asset/myWebView.html");
        fragmentWebview.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
//                 当进度达到100时调用H5接口
                if (newProgress == 100) {
                       fragmentWebview.loadUrl("javascript:notParamFun()");
                    fragmentWebview.loadUrl("javascript:haveParamtestFun('"+ "发送String数据" +"')");
                    chartBar.setVisibility(View.GONE);

                } else {
                    chartBar.setVisibility(View.VISIBLE);
                    chartBar.setProgress(newProgress);
                }
            }

        });
    }
        /*前端调用的接口方法*/
    @JavascriptInterface
    public void getData(String title) {
        new AlertDialog.Builder(getContext())
                .setTitle(title)
                .setMessage("前端调用")
                .setPositiveButton("OK", null)
                .create()
                .show();

    }

在这里插入图片描述
在这里插入图片描述

2. 前端H5调用android方法

在android已经写好网页端调用接口对象myWebView，且有一个共前端调用的方法为getData

        /*前端接口对象*/
fragmentWebview.addJavascriptInterface(this, "myWebView");

    /*前端调用的接口方法*/
    @JavascriptInterface
    public void getData(String title) {
        new AlertDialog.Builder(getContext())
                .setTitle(title)
                .setMessage("前端调用")
                .setPositiveButton("OK", null)
                .create()
                .show();

    }

只需在前端加入一行调用代码

<script>
//调用android方法，无参也需要写上（）
javascript: myWebView.getData("我是前端的title");
  /* 无参调用 */
    function notParamFun() {
        alert("网页方法被调用");
    }

    /* 有参调用 */
    function haveParamtestFun(data) {
        alert("接收到android端的数据:" + data);
    }
    
</script>

保存重新启动模拟器
在这里插入图片描述

二、编写写天气可视化Demo

1、前端引入Echarts,编写前端布局

注意：stack加上会有堆叠显示问题，最后去掉stack解决堆叠问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>

</head>

<body>
    <div id="myChartPie" style="width: 100%; height: 400px; "></div>
    <div></div>
</body>
<script>
    var echartsPie = echarts.init(document.getElementById("myChartPie"));
    var option = {
        title: {
            text: '武汉天气预报'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['最低温度', '最高温度']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],

        },
        yAxis: {
            type: 'value'
        },
        series: [{
                name: '最低温度',
                type: 'line',
                data: [],
                itemStyle: {
                    normal: {
                        color: 'black',
                        borderColor: 'black', //拐点边框颜色
                    }
                },
            }, {
                name: '最高温度',
                type: 'line',
                data: [],
                itemStyle: {
                    normal: {
                        color: 'red',
                        borderColor: 'red', //拐点边框颜色
                    }
                },
            }

        ]
    };
    echartsPie.setOption(option);


    function javacalljs(data) {
        /* 将JSON数据转换为对象 */
        data = JSON.parse(data);
        var weather = data.result.future;
        //时间数组
        var dateArr = [];
        //最低气温数组
        var temLowerArr = [];
        //最高气温数组
        var temHightArr = [];
        //循环遍历添加数据
        weather.forEach(function(item) {
            var tem = item.temperature.toString().replace("℃", "").split("/");
            dateArr.push(item.date);
            temLowerArr.push(tem[0]);
            temHightArr.push(tem[1]);

        });
        option.xAxis.data = dateArr;
        option.series[0].data = temLowerArr;
        option.series[1].data = temHightArr;
		//最后要更新图表
        echartsPie.setOption(option);
    }

</script>

</html>

2.android 端编写布局及交互代码

布局仍然使用上次的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">
    <ProgressBar
        android:layout_width="match_parent"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:id="@+id/chart_bar"
        android:layout_height="10dp"/>
<WebView
    android:layout_width="match_parent"
    android:id="@+id/fragment_webview"
    android:layout_height="match_parent"/>

</LinearLayout>

java 交互代码，api选用聚合天气api，网络框架使用OKHttp



    private ProgressBar chartBar;
    private WebView fragmentWebview;
	private String apiData = "";
	//请求聚合天气API的url
   private final String url = "http://apis.juhe.cn/simpleWeather/query";
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        chartBar = (ProgressBar) view.findViewById(R.id.chart_bar);
        fragmentWebview = (WebView) view.findViewById(R.id.fragment_webview);
         RequestBody body =new FormBody.Builder()
                .add("key", "你申请的key")
                .add("city", "武汉")
                .build();
                    
 OkHttpClient client = new OkHttpClient();

        Request request = new Request.Builder()
                    .url(url)
                    .post(body)
                    .build();



        client.newCall(request).enqueue(new Callback() {
            /*请求失败时的回调*/
            @Override
            public void onFailure(Call call, IOException e) {
                Log.e("onFailure: ", e.getMessage());
            }
            /*请求成功时的回调*/
            @Override
            public void onResponse(Call call, Response response) throws IOException {
					apiData = response.body().string();
            }
        });
		
        fragmentWebview.loadUrl("file:///android_asset/myWebView.html");
        fragmentWebview.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
			// 当进度达到100时发送数据
                if (newProgress == 100) {
                    fragmentWebview.loadUrl("javascript:javacalljs('"+ apiData +"')");

                    chartBar.setVisibility(View.GONE);

                } else {
                    chartBar.setVisibility(View.VISIBLE);
                    chartBar.setProgress(newProgress);
                }
            }

        });
        
    }

在这里插入图片描述

这次最后一次熬夜
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
安卓实现天气预报(通过webView直接显示和OKhttp请求数据显示两种方式)
10-16
博客参考https://blog.csdn.net/hongfei568718926/article/details/109117723
安卓(Android)平台iCharts和eCharts图表WebView测试代码
04-18
总的来说，`FragmentDemo_v3456456646`应该是一个包含上述元素的代码示例，展示了如何在Android应用中使用`WebView`加载和测试iCharts与eCharts的性能。通过这样的测试，开发者可以选择最适合他们项目的图表库，并...
Android获取天气预报Demo
champion0324的博客
05-06 1万+
近期在学习Android的时候，做了一个有关天气预报的任务，本文利用Gson解析Json的方式写一个Demo给有需要的朋友作为参考 天气预报来源：和风天气 https://www.heweather.com/documents/api/v5/weather 可以在百度上找到很多提供天气的api，大家只要注册拿到key即可。 天气预报返回示例： { "HeWeather5": [
Android使用WebView来显示天气预报
kyrin(云中鹤)
07-30 1万+
利用webview实现的天气预报的简单获取，大家还可以对其稍加修改弄的更加华丽一点~~
Android使用WebView组件显示网页
m0_66309026的博客
03-25 5119
Android使用WebView组件显示网页 代码实现效果如下图所示： 1.xml布局文件代码 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://sche
Android的WebView简单使用实例(附Demo)
热门推荐
广源的博客
08-31 3万+
Demo地址：https://github.com/zGuangYuan/Androidstudio_example   WebView介绍： Android WebView在Android平台上是一个特殊的View， 基于webkit引擎、展现web页面的控件，这个类可以被用来在你的app中仅仅显示一张在线的网页，还可以用来开发浏览器。WebView内部实现是采用渲染引擎来展示view的...
Android通过iChartJs实现动态图表、报表的显示Demo
02-27
在Android开发中，数据可视化是不可或缺的一部分，尤其在数据分析、业务展示等方面，动态图表和报表的展示能够直观地帮助用户理解和解析数据。本教程将详细讲解如何利用iChartJs库在Android平台上实现这一功能。 ...
android手机HTML5demo
09-12
`canvas`提供了动态图形绘制的能力，可以用于创建游戏或者数据可视化。`geolocation`则允许获取用户的地理位置信息，对于地图应用或者基于位置的服务非常有用。 此外，`web workers`可以在后台线程中执行复杂的计算...
android 带进度条的Demo
07-18
在Android开发中，进度条（Progress Bar）是用户界面中不可或缺的一部分，它为用户提供操作进度的可视化反馈，增强用户体验。本Demo主要展示了如何在Android应用中实现一个带有进度条的WebView，让用户在加载网页时...
EchartDemo
02-18
ECharts 是一个由百度开发的，基于 JavaScript 的数据可视化库，它支持丰富的视觉效果和多种图表类型，包括柱状图、饼图等。在 Android 应用开发中，通过集成 ECharts，我们可以将这种强大的图表功能引入到移动端，...
Android天气预报Demo源码
12-12
本Demo是一个Android端天气预报系统，利用和风天气API获取指定城市天气包含okhttp请求，handler的使用和复杂JSON的解析。
安卓天气预报demoAPP
12-26
这个是二次开发用，将之前的不可用的API替换了，不过ListView 并没有写，可以用来应付交作业，当然看看也没问题~
Android实现天气预报功能
06-22
Android实现天气预报功能。超级简单。实现百度地图接口就OK.
Android报表，里面有三个demo，可以在eclipse环境下运行
03-24
在Android开发中，数据可视化是不可或缺的一部分，尤其是在数据分析和展示的时候。这个压缩包包含三个相关的Demo，可以帮助开发者理解和实现Android平台上的图表功能。下面将详细解释这些知识点。 首先，我们来看...
android 曲线图highchartdemo
05-21
在Android中，我们还可以通过WebView的`addJavascriptInterface()`方法将Java对象暴露给JavaScript，从而实现Java和JavaScript之间的交互。这样，你可以在Android代码中更新数据，然后通过JavaScript接口通知...
Android制作天气预报软件 —— 天气查询
最新发布
weixin_58963766的博客
05-08 2109
代码中实现的是AsyncTask中的onPreExecute（）、doInBackground（）两个函数，此外，还定义了openConnection（）函数。天气情况的显示除了文字方式，设计中还添加了图片方式。该项使用的是极速数据的天气预报接口，利用接口获取指定地区当天信息（设计中显示的是日期、当前温度、最高温、最低温、城市名、星期、风向、天气、更新时间）以及未来四天天气相关情况（设计中显示的是日期、最高温、最低温、天气），之后将获取信息传递给界面进行显示，不同的天气界面会通过变化图标进行表示。
Google Android sdk 开发范例大全 部分章节代码
04-06
2.4 可视化的界面开发工具 2.5 部署应用程序到Android手机 第3章 用户人机界面 3.1 更改与显示文字标签——TextView标签的使用 3.2 更改手机窗口画面底色——drawable定义颜色常数的方法 3.3 更改TextView文字颜色...
详解Android WebView：集成与JS交互方法
本文档详细介绍了Android WebView的使用方法以及其与JavaScript交互调用的重要技巧。Android WebView是Android平台上一种内置的组件，用于在应用程序中嵌入并显示Web页面，为开发者提供了丰富的功能和扩展性。 首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

这次最后一次熬夜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值