Android自动更新：这里的更新静悄悄~

Android自动更新：这里的更新静悄悄~

(第一篇文章没有把样式弄好，所以重新弄了一遍，欢迎小伙伴读这篇文章：Android自动更新：这里的更新静悄悄~ - )

产品：APP的底部按钮能够做到自动更新吗？

累人猿：有些麻烦（无辜脸）~

产品：那京东、美团是怎么做到的？

累人猿：……

心疼自己十分钟~

经常看到有什么活动的时候，京东、淘宝、美团这些应用都不需要更新应用就能够实现应用UI的更新，特别是底部菜单按钮的图标，及时的营造出活动的气氛。作为一个移动开发者都想弄明白他们是怎么做到的，我所了解的方式有以下三种：

1、使用前端框架，如果是这种情况的话，整个应用都没有多少原生的东西，比较火的框架：React Native、ionic等；

2、纯原生，这种方式是通过图片下载，本地图片读取，动态生成StateListDrawable，大致这样一个流程实现不更新应用就更新底部按钮的图标；

3、JS交互：将整个底部按钮做成H5，然后使用webview加载，这也是今天的重点。

其中第二和第三种方式，必须得做好容错处理，比如网络问题导致图片下载失败，本地图片丢失等问题，为了避免这些问题导致应用的不正常运行，我们需要有备选方案，一旦问题出现，就放弃整个流程，从本地读取资源。

我并不是前端开发者，h5相关的东西学得不多，所以在实现这个功能的过程中还是花了一些功夫的，JS和CSS用得也不熟，所以在处理有些细节的时候，用得方式有些暴力，希望大伙儿能够理解，有考虑使用这种方式的小伙伴可以让h5开发的小伙伴来做。

整个功能是基于JS交互这个基础上的，至于需要怎么交互，我就不做过多的讲解了，不清楚的小伙伴可以去网上找一些资料来学学。

这里的排版没有弄好，小伙伴们可以到这里去看这篇文章：blog.csdn.net/zhimingshangyan/article/details/52767939

一、CSS布局

整个底部按钮的界面，都是一些html标签，我使用了比较经典的四个按钮，如果有特别需求的小伙伴，可以自己增加或者删除几个标签，源码如下：

<div>

<label onclick="myFun('img_one')">

<input type="radio" id="one" name="tabBtn" checked>

<img id="img_one">

<label onclick="myFun('img_two')">

<input type="radio" id="two" name="tabBtn">

<img id="img_two">

<p>

<label onclick="myFun('img_three')">

<input type="radio"id="three"name="tabBtn">

<img id="img_three">

<p>

<label onclick="myFun('img_four')">

<input type="radio"id="four"name="tabBtn">

<img id="img_four">

<p>