最近在开发一款报表引擎,里面就需要我会写js做一些简单的混合开发,刚开始学习混合开发的前两天是最郁闷的,毕竟这是一门新的语言,但是还是硬着头皮往上搞了,到第二天的时候就把支持懒加载的Listview倒腾出来了,当然这只是一个最最简单的实现,老手们轻喷,但是对于我这种新手来说绝对是一个重大突破了;
上图,有图有真相;
思路整理
先说一下思路;
- 学习写第一个混合应用(互相调用和传参调用);
- 学习写一个最简单的ListView;
- 实现listView懒加载;
- 通过询问做前端的朋友,了解到了Echart这个工具;
- 在Echarts官网学习了简单的使用(我这里是折线图入手的),并修改一些参数观察变化;
- 学习写一个简单的图表列表实现;
这篇文章我只介绍到如何实现一个简单的ListView,所以只介绍如何实现前三步,其实知道了前三步之后又我就开始对做一个混合的报表应用有点信心了,我相信小伙伴们去做了之后也会有同样的感触;
实现步骤
分三步实现,尽可能的让新手能看懂(我觉得没问题,因为我就是菜鸟),往上有挺多的教程的,不过我感觉还是不够全面吧,淡然我讲的也不一定全面,但是按照这个做绝对能实现;
Step1 混合应用入门
首先明确的是,怎么样才算是一个混合应用,我的定义是既有原生代码又有Web前端代码,而且这两者还能交互(通讯);通讯是最重要的,没有通讯那跟单独写没两样,也就算不上做了混合开发;因此这个环节我觉得最重要的是学会通讯;
通讯就是互相调用嘛,调用的时候可能要带一些参数并拿一些返回值,所以思路就是这样,1. 互相调用,分为带参数和不带参数;2.互相调用,分为带参数有返回值;3.js从安卓取复杂数据
大家直接看代码吧,在座的各位都是精英,我就不多说了;
- 布局文件中就一个Webview:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/ll_btn"
android:layout_gravity="center" />
</RelativeLayout>