Take you to understand the origin of mini programs

How the WeChat mini program is structured, after a thorough understanding, you may quietly realize it. All innovations are based on predecessors. React implements an efficient virtual DOM. On this basis, WeChat builds a WeChat browser, which is a small program running environment.

First you need the following tools

1, Mac computer

2, WeChat web developer tools.app

3, WebStorm / others A programmer or IDE should preferably support renaming

First, we need to right-click WeChat web developer tools.app, and then display the contents of the package,

in Contents/Resources/app.nw The following content is our code, copied out:

A brief explanation:

app/ The app code is placed in the directory

modified_modules/ That is, some modifications The last module

node_modules/ Everyone on earth knows

package.json Haha, you must know that NW related content is configured

There are two files in the modified_modules directory Submodule:

anyproxy, from the name it can be seen that this is a proxy module

weinre, remote debugging tool

IDE

We already know This is a Web application encapsulated by NodeWebkit.

The "main": "app/html/index.html" in package.json defines that the entrance of this APP is this index.html, not other files.

Successfully, we saw the file they called:

There is an init method in it, which seems to be the entry related to NodeWebkit. I used WebStorm's shift + f6RENAME variables more than a dozen times, and finally saw the following code:

This is a React application. Fortunately, I learned it well more than a year ago. After scanning the code, I finally saw this sentence:

Jump directly to ContainController.js, jump to the render method, and found this:

Sure enough, there is the big entrance inside Main

corresponds to the following interface:

edit is the editor and its related matters

detail is the configuration of the project

Just to add, among them The editing environment is based on Monaco

WeAPP running mechanism

I slowly explored the packaging and runtime process. Since I didn't qualify for the closed beta, I had to guess while watching.

In the previous article, we mentioned two very interesting things: wxml and wxss. These two files will be converted separately, namely wxml -> html, wxss -> css. There are several corresponding transforms:

transWxmlToJs

transWxssToCss

transConfigToPf

transWxmlToHtml

transManager

PF here refers to PageFrame, and pageFrame has a corresponding template file:

This style generates the string Replace at first glance, and then they wrote a file named wcc and a file named wcsc Tool of.

1. wcc is used to convert custom tags in wxml to virtual_dom

2. wcsc. The phenomenon I observed is that it converts wxss to css

like this If so, we can understand that the WeChat applet is somewhat similar to Virtual Dom + WebView. After all, there is a WAWebView file and a webviewSDK file on it.

Of course it doesn’t matter whether it’s React + WebView or Vue + WebView, now there is WA + WebView, haha.

WeApp adopts the submission method as shown in the figure below, so:

The WeApp you write locally will be submitted to the WeChat server, then packaged, uploaded to the server, and handed over to the CDN— —for distribution, after all.

The upload process is roughly as follows:

1. The APP will be packaged into a .wx file named after the date

2. The IDE will detect the size of the package and prompt: The code package size is xx kb, which exceeds the limit of xx kb. Please delete the file and try again. This xx seems to be 1024, so the size of the APP is 1M.

3. The APP will be uploaded to servicewechat.com/wxa-dev/commitsource/?appid=xx&user-version=&user-desc=xx

In addition, starting from today, the public account " The ability to "associate mini programs" is fully open

1. The subjects who can associate mini programs are no longer restricted

2. Each official account can be associated with up to 13 mini programs

3. The same mini program can be associated with up to 3 public accounts

See the link for details. In a word, it is more open. Multiple drainage is allowed.

--

The above is the detailed content of Take you to understand the origin of mini programs. For more information, please follow other related articles on the PHP Chinese website!