I. Preface:

Our products in the group said taobao APP has snow, so I took out the phone from the bed to see, wow snow!

As shown in figure:

So let me analyze how they do it.

Ii. Analysis of Taobao APP

2.1 Use Reveal to analyze Taobao APP

We found this layer of View of snowflake very smoothly.

As shown in figure:

Let’s write down TBLMCanvas this keyword, here my mind first reaction when deviation from the direction, I think they use the Canvas this framework https://github.com/CanvasPod/Canvas but I didn’t find the related references, well this wrong, All right, let’s move on.

Then we looked inside

As shown in figure:

We found a keyword called TBPLWebLayer and WVWebView. So I guess taobao here is a Webview, click events through this layer of webview. Let’s continue our analysis.

2.2 Using class-dump to analyze Taobao APP

Here we need to obtain a main program of Taobao APP that has been stripped. For how to remove it, please refer to my other article – “iOS Reverse IPA Stripping”.

We use the following command

class-dump -H /yourAPP -o /path/yourOutputPath

Copy the code

Here we can see these files:

Let’s look at the file tbplWeblayer.h

We observed huDong in the initialization method of this class, so I thought it might be related to this keyword. TBPLBaseLayer = TBPLBaseLayer = TBPLBaseLayer = TBPLBaseLayer

It seemed that the snowflake request was related to huDong, so we started the next step of analysis.

2.3 Use Charles to analyze Taobao APP

We came to capture the requested address of Taobao APP. Suddenly, an address caught my eyes. Hudong.alicdn.com contains many JS file addresses, as shown in the picture:

Here’s what we saw:

I saw the musicVolume field and I guess this is the variable that controls the background music on the home page. Let’s look at the names of these devices. They are in the blackList field. BlackList? IPhone7, iphone2 is the seventh generation oF iPhone, also known as iPhone6 Plus. If I look at the field arUrl, AR? I’m sure this is the floating Christmas tree on the right of the home page. Because of the Christmas tree, when I click on it, I will be redirected to an AR technology page activity. I used iPhone7 and iPhone5s to open taobao client, and sure enough, the device in the blacklist could not see the Christmas tree. The devices in the blacklist do not support AR technology. Specific can see apple about ARKit introduction, must be A9 processor above yo! Portal -> Point me

Taobao’s AR demo is as follows:

Then I suddenly found the source of this JS file, which made my eyes light up

Let’s open this address and take a look:

https://huodong.m.taobao.com/act/christmas2017ios.html?spm=a1z8m.7980655&ttid=700407@taobao_iphone_7.2.1
Copy the code

We can see the page is snowing, the same as we saw on the Taobao client.

This is the static file of the snowflake.

Here I probably know the implementation principle of Taobao, we continue to go back to class-dump analysis of Taobao’s main file.

2.4 Analyze the main file of Taobao again

I already have a rough idea of how Taobao works, and I need to find the line of code that confirms my guess. I started with TBLMCanvas to find its parent TBLMTransparentView, and from TBLMTransparentView I found the code I wanted

This view is rewritten -(UIView*)hitTest:withEvent: method. Each view has this method to handle user action events. It returns self, which means the view will accept the user’s action events, and nil, which means the view will not accept the user’s action events. So here Taobao returned it nil.

Iii. Summary:

From the above analysis, it can be seen that Taobao has a class specially used to display dynamic effects. This dynamic effect is based on HTML, and it achieves the purpose of penetrating the view by rewriting the view’s -(UIView*)hitTest:withEvent: method. The above is out of the Taobao APP Christmas snow for an analysis, more happy is, catch taobao snow is still in the time to issue the article. What I experience is the process of analysis, exploration and research, but the conclusion may be very simple. At the end, I also welcome you to share your implementation plan for special dynamic effect.