The secret hidden by WeChat mini-app devtool

Secret hidden by the applet devtool

Applet devtool

The development of the mini-program project that I participated in is also coming to an end, and the pitfalls are also coming to an end. I will not be able to work out any functions that are not covered or used in depth.

The previous articles mentioned so many details, strategies, and applications. Since the announcement of the mini-program, the pioneers have continuously explored the operating mechanism behind the mini-program. The development syntax and API of applets are very similar to the html, js, and css familiar to front-end engineers. Therefore, many people may wonder what the difference between applets and common HTML5 applications is. This article analyzes the basic operating mechanism of small programs:

• Most of the content will be converted to regular html/css/js and rendered using webview;
• Some components call the native implementation function.

Now that a Pioneer has come to the conclusion, why should I write this article? Of course it's just to get together seven articles, hahaha...

Joke! The purpose of this article is not to repeat others' conclusions, but to record some of my experiences and conclusions on the source code of the mini-program development tool, so as to facilitate further exploration.

Let's take a look at the source code of devtool.

The first step is to find the source code of the small program devtool. Taking the mac system as an example, the source code can be opened as follows:

Ignore other files. The main code we want to study isContent/Resources/app.nw/distDirectory, which includes the devtool functional code and code for executing, compiling, packaging, and uploading small programs. Of course, these codes are obfuscated and difficult to read ~

Note thatContent/Resources/app.nw/dist/weappDirectory, and the two subdirectories commit and trans:

You can roughly guess the functions of each file from the file name:

• Files under the trans directory are responsible for converting the source code of the applet into html, css, and js that can be recognized by the browser;
• Files in the commit directory are responsible for building, packaging, and uploading small programs.

Now that we know that a small program will build a packaging process, the best way to learn about the small program running mechanism is to study the code after the build. With this goal, the next step is to view the log of devtool to obtain the location where the code is stored after the build of the applet.

Find the log file

Content/Resources/app.nw/dist/common/log/log.jsIt is a file responsible for managing the devtool log function, including the following code:

const a = require('fs'),  b = require('log'),  c = require('path'),  d = require('../../config/dirConfig.js'),  e = d.WeappLog;

WhereeIs the directory where the log files are stored.config/dirConfig.jsDirectory path isnw.App.getDataPath()Generated. This function is an API provided by node-webkit. The rules for generating results are different in different operating systems. Unfortunately, I did not find the relevant description (frustrated ).

However, this exploration of the Code is not fruitless. At least we know that the directory of the log file is "WeappLog". We can use powerful command lines to search for this directory from the hard disk:

mdfind WeappLog

You can refer to this article for more information.mdfindCommand usage

The output shows that the log file is stored in the Mac system directory/Users/<User Name>/Library/Application Support/web Developer tool/WeappLog. After entering the directory, you will find many.logLog files with the Suffix:

Where is the package of the upload Applet Process?

After finding the log file, you can get the location of the Code after the mini-program is built from the execution log of devtool. Of course, the first step is to build a Applet By clicking "preview" in the "project" menu of the applet development tool:

After the operation is successful, such a record will appear in the log file:

[Wed Jan 18 2017 15:20:24 GMT + 0800 (CST)] INFO pack. js create/Users/<User Name>/Library/Application Support/web Developer tool/Weappdest/1484724024071.wx success!

/Users/<User Name>/Library/Application Support/web Developer tool/Weappdest/1484724024071.wxIs the small program code built! Hurry and have a look!

Searching with great enthusiasm/Users/<User Name>/Library/Application Support/web Developer tool/Weappdest/Directory, and then found: Empty!

It seems that the team is very cautious. After uploading the applet source code, the files created and generated will be deleted. But this little trick is hard for programmers! Any action is executed by a program. You can directly modify the relevant program code!

Do some tricks and look at the packaged code

InContent/Resources/app.nw/dist/weapp/commit/upload.jsThere is a piece of code like this:

Const a = require ('fs'), j = require ('rmdir'); // omitting irrelevant code _ exports. uploadForTest = (l, m, n) => {// omitting irrelevant code c (l, {noCompile :! 0}, (s, t) =>{ if (s) return void n (s. toString (); let u = d. join (k, '$ {+ new Date }. wx '); B (t, u, (v, w) =>{ j (t, (A, B, C) => {}); // omit irrelevant code if (y> q) return. unlink (u, () =>{}), void n ('Code package size: $ {y} kb, exceeding the limit: $ {y-q} kb, please delete the file and try again '); // omitting irrelevant code })

The above Code omitted some code irrelevant to the content we are currently discussing. Interested readers can study it on their own.

The preceding Code deletes files:

rmdir: Delete the code directory that has been built but not packaged;

fs.unlink: Delete the packaged file.

After you annotate the deleted code and use the mini-program developer tool to preview and upload the code, the created and packaged files will be left in the directory we obtained above. As follows:

The.wxA file with a suffix is a packaged file, that is, the file uploaded to the server. The directory folder with the same name is the source file after the build is complete and the package is completed.

Toconfig.jsFor example, the constructed code is as follows:

'use strict';Object.defineProperty(exports, '__esModule', { value: true});exports.default = { basePath: 'https://djtest.cn', fileBasePath: 'https://djtest.cn'};

In fact, only ES6 syntax is translated into ES5 syntax. The other wxml, wxss, and js files are basically in this state, so we can infer that the source code will be executed after being uploaded to the server, and the development tool only executes some simple build actions.

Although I did not get all the truth from this code, I hope this article will provide some meager help to the future explorer.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!