WeChat Mini Program "Decompile" Practice (I): Unpacking

This practical tutorial will tell you step by step how to "decompile" to obtain the source code of other applets, including "unpacking" and "source code restoration". It mainly refers to posts, tutorials, and tools on websites such as Kanxue Forum, V2EX, and GitHub. I am very grateful for them. For reference links, please see the bottom of the article, as well as some of my own understanding and summary.

We know that after developing the mini program in the WeChat developer tool, we click the "Upload" button, and the WeChat developer tool will "compile", compress and confuse the JS code, and integrate and package the wxml, wxss and resource files into a .wxapkg file and upload it to the WeChat server.

So to "decompile" the applet, we first need to obtain the .wxapkg package corresponding to the applet.

Previously, there was an article on V2EX that introduced how to directly download the .wxapkg of each mini-program through a certain URL, but it was quickly blocked by WeChat.

Therefore, we can only start from the mobile phone and find the WeChat client on the mobile phone to download and save the small program package locally.

Get the .wxapkg file of the applet

Tools: A jailbroken iPhone or a rooted Android phone

This article takes iPhone 4S, iOS 8.4.1 as an example, WeChat version v6.6.6.

Open Cydia on the jailbroken iPhone, search and install file browsing apps such as iFile or Filza, open iFile or Filza, and jump to the local App installation directory: /var/mobile/Containers/Data/Application/. At this point, you can see a list of apps installed on the current iPhone, as shown below:

Find the directory of "WeChat" (the corresponding one on my phone is: 297286CE-9055-400A-99FA-D2D7C0735DCF folder), click to enter, that is the "Sandbox" of WeChat on this iPhone. I believe iOS developers are very familiar with this directory. There are mainly Documents, Library and tmp folders under this directory, which are usually used to store different data and files. I will not repeat them here. We search for the wxapkg keyword in the current WeChat "Sandbox" directory to find the small program package that WeChat has downloaded in the current iPhone, as shown below:

We found that the .wxapkg file names we searched for are all named with numbers, such as 2.wxapkg and 25.wxapkg in the figure. What are the rules for their naming? And where are they placed? Let's continue reading.

After a simple analysis, we found that the mini-program packages downloaded by WeChat are stored in the following directories:

 /path/ to /WeiChat SandBox/Library/WechatPrivate/{UserId}/WeApp/LocalCache/release/

Among them, {UserId} is the MD5 value (32-bit string) of the currently logged in WeChat account ID. For example, the complete directory where the mini-program package is stored on my mobile phone is:

 /var/mobile/Containers/Data/Application/297286CE-9055-400A-99FA-D2D7C0735DCF/Library/WechatPrivate/c15d9cced65acecd30d2d6522df2f973/WeApp/LocalCache/release/

The contents of this directory are shown in the following figure:

There are a series of folders starting with wx... in the directory. The 18-digit string of wx... is the AppId corresponding to each applet. In each wx... folder is the .wxapkg package corresponding to the current applet. It is named with a number, which represents the number of times the current package has been released by the developer (it is different from the version number specified by the developer when releasing the applet). For example, our "Knowledge Collection" applet has released two versions in total, so there are 2.wxapkg files stored in the wx48...85db file:

In addition, we found that on iOS, WeChat also allocates a Sandbox folder for each mini program to manage the data and files stored locally by the mini program, as shown in the figure:

The path is:

 /path/ to /WeiChat SandBox/Library/WechatPrivate/{UserId}/WeApp/Sandbox/wx...(Mini Program AppId)

By The Way, the storage directory of the small program package on the Android phone is (root permission is required to access):

 /data/data/com.tencent.mm/MicroMsg/{UserId}/appbrand/pkg/

Copy the .wxapkg file to your computer

Through the above analysis, we can know where the compressed package .wxapkg of the mini program is stored. Next, we need to copy the .wxapkg file on the mobile phone to the computer.

Open Cydia on your iPhone, search for and install OpenSSH, then check the WiFi your phone is currently connected to in iPhone > Settings > Wi-Fi, and record the IP address, for example, mine is: 192.168.1.17, then open Terminal on your Mac (connected to the same WiFi as your iPhone), and you can log in to your phone via SSH (for details, see the instructions on the OpenSSH download page on Cydia):

 ssh [email protected]

Next we can use the scp command to copy files from the iPhone to our computer, for example, in the command line on my Mac (no need to ssh to the iPhone, just execute it directly on the Mac terminal):

 scp [email protected]:/var/mobile/Containers/Data/Application/297286CE-9055-400A-99FA-D2D7C0735DCF/Li brary/WechatPrivate/c15d9cced65acecd30d2d6522df2f973/WeApp/LocalCache/release/wx48...85db/2.wxapkg /Users/Zubin/Desktop/WeApp/

I can then copy the package 2.wxapkg of the "Knowledge Collection" applet to the WeApp folder on my Mac desktop.

Of course, if your computer has tools such as iTool or PP Assistant installed, when connecting to a jailbroken iPhone, it seems that you can directly access the directories and files on the phone, so you may not have to go through so much trouble (unverified).

.wxapkg Unpack

After much trouble, we finally got the .wxapkg package of each applet. Next, we can analyze it. First of all, what is a .wxapkg file? You may think that it is similar to Android's .apk or iOS's .ipa installation package, which is essentially a .zip compressed package? In fact, it is not! It is a binary file, and the actual file structure is as follows:

The picture is taken from the article WeChat applet source code reading notes. At the same time, the author of this article also provides unpacking scripts (in various languages) on GitHub:

I downloaded the Python 2 unpacking script, put it in the same directory as the .wxapkg file, and then executed the following command in the command line to get the unpacked file:

 python unwxapkg.py 2.wxapkg

Taking the "Knowledge Collection" applet as an example, the file directory obtained after unpacking is as follows (it is basically consistent with the project directory of the "Knowledge Collection" applet I developed):

The files after unpacking each mini program are similar, mainly including the following files:

• app-service.js: A collection of all JS files in the mini-program project, which have been obfuscated;
• app-config.json: The app.json of the mini program project and the JSON configuration files of each page are summarized and can be viewed directly;
• page-frame.html: A collection of .wxml and app.wxss style files for all pages. It is not readable and needs to be restored.
• *.html: contains the .wxss information corresponding to each page, which is more readable;
• Resource files: various pictures, audio and other resource files

Summarize

This article mainly introduces how to obtain the .wxapkg package file of the mini program, and how to unpack it to obtain the obfuscated code and resource files of the mini program after "compilation". In the next article "WeChat mini program "decompilation" practice (II): source code restoration", we will introduce how to restore the contents of the .wxapkg package to the contents before "compilation".