Android automatic updates: Updates are quiet here

Android automatic updates: Updates are quiet here

Product: Can the bottom button of the APP automatically update?

Tired ape: some trouble (innocent face) ~

Product: how do JINGdong and Meituan do it?

Tired ape:…

Love yourself for ten minutes ~

When we often see some activities, jingdong, Taobao, Meituan and other apps can update the APPLICATION UI without updating the application, especially the icon of the bottom menu button, which creates an atmosphere of activity in time. As a mobile developer trying to figure out how they did it, I’ve seen it in three different ways:

1. Use a front-end framework. If this is the case, there is not much Native stuff in the whole app.

2, pure native, this way is through the picture download, local picture read, dynamic generation StateListDrawable, roughly such a process to achieve the application does not update the bottom button icon;

JS interaction: make the whole bottom button into H5 and load it with webView, which is also the focus of today.

In the second and third ways, we must do a good job of fault tolerance, such as network problems caused by image download failure, local image loss and other problems, in order to avoid these problems caused by the abnormal operation of the application, we need to have an alternative plan, once the problem occurs, give up the whole process, read resources from the local.

I am not the front-end developer, h5 things related to learn very much, so in the process of implement this function still spent some time, JS and CSS use also not familiar, so in dealing with some details, some violent, in a way I hope everyone can understand, have to consider using this way friends can make up the h5 development of junior partner to do it.

The whole function is based on JS interaction. As for how to interact, I will not explain too much. If you are not clear, you can go to the Internet to find some information to learn.

1. CSS layout

The whole bottom button interface, are some HTML tags, I used the more classic four buttons, if there is a special need for a partner, you can add or delete a few tags, the source code is as follows:

Copy the code
      

       







p>

label>







p>

label>







p>

label>








       
p>

label>

div>
      

, of course, there is more than one way to achieve the whole interface, I adopt the way of the radio, and then we talk about CSS is the key place, the first label p tag set the text color to red, is to initialize, generally should be into the application of the first button is selected, of course, this job can be done in JS. Do it together with the image initialization. If the design is not red, you should be careful to change it to the desired color when using it.

CSS code for label:

label{

margin-top:0px;

margin-bottom: -3px;

padding-top:5px;

display:inline-block;

width:25%;

font-weight:normal;

vertical-align:middle;

cursor:pointer;

float:left;

text-align:center;Copy the code

You have to be careful about 25%, because it’s four buttons, and we have to split 100%, so the range of each button is 25%, and if you change the number of buttons you have to be careful about changing the percentage.

Because of the way the webView loads h5, careful friends will notice that I can copy text when I long press a button, so in order to disable the copy function, we need to make some restrictions in CSS

/* Disable the long-press replication function

-webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;Copy the code

I’m doing one thing, and I need all this code because I don’t understand the browser kernel. The CSS code of div, P, body and input is not explained in detail here. The CSS code of these several tags can be used directly without any modification. If you want to change it, you can ask h5 partners to help change it to be more standardized.

Second, JS interaction

Both ios and Android provide a way for Webview to interact with H5.

Let’s take a look at the interface methods provided locally to JS:

Js calls the local method to change the selected state of the bottom button principle: JS calls the local method, the method passes the number of the selected button through broadcasting

*/@JavascriptInterface public voidchangeTab(String index) { Intent intent =newIntent(); intent.setAction("ChangeTab"); intent.putExtra("index", index); context.sendBroadcast(intent); */ @javascriptInterface publicString getImages(List lists) {try{JSONArray array =newJSONArray(); for(Item item : lists) { JSONObject object =newJSONObject(); object.put("icon_nor", item.getIcon_nor()); object.put("icon_sel", item.getIcon_sel()); object.put("title", item.getTitle()); array.put(object); String json = array.toString(); returnjson; }catch(Exception e) { e.printStackTrace(); return"";Copy the code

The function of the first method is to click a button on the H5 interface, and THEN JS invokes the local method to realize the switch of the native fragment. I used the broadcast method to inform the switch operation of the native interface.

The second method is to initialize the H5 interface, call this method through JS, pass the data to the H5 page, to achieve the effect of initialization interface.

Item is that I encapsulate each button into an object, so as to facilitate data reading and transmission. The source code is as follows:

public classItem { privateStringicon_nor; // Icon status privateStringicon_sel; // Select status privateStringtitle; // button copy publicString getIcon_nor() {returnicon_nor; public voidsetIcon_nor(String icon_nor) { this.icon_nor= icon_nor; publicString getIcon_sel() { returnicon_sel; public voidsetIcon_sel(String icon_sel) { this.icon_sel= icon_sel; publicString getTitle() { returntitle; public voidsetTitle(String title) { this.title= title;Copy the code

In fact, this object should also add a color variable, so that we do not need to modify the color of H5, directly through the value to change the color, interested partners can try, be sure to remember to get color in Js and apply color.

Why don’t we take a look at the app screenshot first?

Running record the screen

This is the most normal case, that is, the server is up and the image address is delivered correctly.

Server Shutdown Screenshot

In this case, the server is down, and it doesn’t make any difference because I did fault tolerance. In fact, in this case, the image failed to read, and without fault tolerance, the image will show an icon of the wrong image.

Picture address missing screenshot

The situation is, I intentionally preach a picture of operation interface, less attentive friend will find this picture TAB in the back of the serial number is not the same as the front of the photo, it is also a guaranteed, once the wrong, give up method, the scheme of local not ensure application of operation there is no problem.

Going back to the source code analysis, when you click on a TAB, the UI should also change, remember the first method we provided in native, now is the time to use it,

VaroneRB = document.getelementById ("one"); oneRB.addEventListener('click',function() { if(oneRB.checked) { appNative.changeTab('one'); },false); vartwoRB=document.getElementById("two"); twoRB.addEventListener('click',function() { if(twoRB.checked) { appNative.changeTab('two'); },false); varthreeRB=document.getElementById("three"); threeRB.addEventListener('click',function() { if(threeRB.checked) { appNative.changeTab('three'); },false); varfourRB=document.getElementById("four"); fourRB.addEventListener('click',function() { if(fourRB.checked) { appNative.changeTab('four'); },false); /* Initialize data. To eliminate network uncertainty, place a default icon */vardatas under the images folder. varisOk=true; varicons=newArray(); varicon1=newObject(); icon1.icon_sel="images/icon_tab_one_sel.png"; icon1.icon_nor="images/icon_tab_one_nor.png"; icon1.title="tab0"; icons.push(icon1); varicon2=newObject(); icon2.icon_sel="images/icon_tab_two_sel.png"; icon2.icon_nor="images/icon_tab_two_nor.png"; icon2.title="tab1"; icons.push(icon2); varicon3=newObject(); icon3.icon_sel="images/icon_tab_three_sel.png"; icon3.icon_nor="images/icon_tab_three_nor.png"; icon3.title="tab2"; icons.push(icon3); varicon4=newObject(); icon4.icon_sel="images/icon_tab_four_sel.png"; icon4.icon_nor="images/icon_tab_four_nor.png"; icon4.title="tab3"; icons.push(icon4); varoImg=document.getElementsByTagName('img'); functiontranData(jsondata) { datas=eval(jsondata); if(isEmpty(jsondata)){ isOk=false; }else{ for(i=0; iCopy the code

This period of dealing with complicated, because of the need to consider fault-tolerant method, so I recommend friends, put the whole HTML app assets folder below, do not put in the service side, at the same time we have to assets folder under a default icon, I personally think that icon update fails, have much better than application will not be able to normal use, It is recommended to adopt the following method. The main idea of using this scheme is to use the default local image directly no matter what causes the remote image reading failure. It should also be noted that the whole set of images are used locally

The directory structure

Do not change your image to the name in the screenshot, so there is no need to modify the HTML source code.

Then it's time to handle style changes after a TAB is selected.

/ *Changes the style and state of the selected button

*/functionmyFun(sId) {for(vari=0; iCopy the code

In addition, sometimes we encounter clicking a button in a specific fragment to jump to another TAB page. For example, I click a button in the fragment and need to jump to the second TAB page, so I provide a method to switch TAB through JS.

/ *

*/functionsetChecked(id) {varbTN = document.getelementById (id); btn.checked=true; if(typeofappNative ! =="undefined"&& appNative.changeTab) { appNative.changeTab(id); myFun("img_"+ id); LoadUrl ("javascript:setChecked('four')"); webView.loadurl ("javascript:setChecked('four')"); Among them, "four" corresponds to a TAB number that needs to be jumped to, and it can only be "one", "two", "three" and "four", before which is the JS code of the whole function. I know that some functions can be fully realized by CSS, but I am not familiar with CSS, so I use JS to deal with details. And I don't use simple syntax structures like JQuery. For no other reason, I still don't. LoadUrl ("file:///android_asset/radioGroup.html"); /* Pass image address and button text to h5 */private voidinitData() {lists=newArrayList<>(); Item item =newItem(); Item. SetIcon_nor (" http://192.168.111.20/drawable-hdpi/icon_tab_one_nor.png "); Item. SetIcon_sel (" http://192.168.111.20/drawable-hdpi/icon_tab_one_sel.png "); / / item. SetIcon_sel (" http://192.168.111.20/drawable-hdpi/push.png "); item.setTitle("tab1"); Item item1 =newItem(); Item1. SetIcon_nor (" http://192.168.111.20/drawable-hdpi/icon_tab_two_nor.png "); Item1. SetIcon_sel (" http://192.168.111.20/drawable-hdpi/icon_tab_two_sel.png "); item1.setTitle("tab2"); Item item2 =newItem(); Item2. SetIcon_nor (" http://192.168.111.20/drawable-hdpi/icon_tab_three_nor.png "); Item2. SetIcon_sel (" http://192.168.111.20/drawable-hdpi/icon_tab_three_sel.png "); item2.setTitle("tab3"); Item item3 =newItem(); Item3. SetIcon_nor (" http://192.168.111.20/drawable-hdpi/icon_tab_four_nor.png "); Item3. SetIcon_sel (" http://192.168.111.20/drawable-hdpi/icon_tab_four_sel.png "); item3.setTitle("tab4"); lists.add(item); lists.add(item1); lists.add(item2); lists.add(item3); You then need to pass the data to the HTML page webView.setWebViewClient(newWebViewClient() {@Override public booleanshouldOverrideUrlLoading(WebView view, String url) { return super.shouldOverrideUrlLoading(view, url); @Override public voidonLoadResource(WebView view, String url) { super.onLoadResource(view, url); @Override public voidonPageFinished(WebView view, String url) { super.onPageFinished(view, url); webView.loadUrl("javascript:tranData("+javaScriptInterface.getImages(lists) +")"); //webView.loadUrl("javascript:setChecked('four')"); }});Copy the code

It is recommended to call the js method in onPageFinished to avoid errors.

As for how to deal with the native TAB page switch, I will not speak, interested partners can download the source code down to have a look, of course, their own change is the best way.

Open portal: http://download.csdn.net/detail/zhimingshangyan/9648669

At the beginning of the article, I provided three ways of implementation, the second and the third two ways I have implemented, of course, I have not sorted out the second way, you are welcome to provide your ideas to me, at the same time, you can leave a message to me if there is any problem or worthy of improvement.