“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

primers

If you want to develop a wechat mini program in 2021, what kind of development environment do you need to prepare? To cut to the chase, the answer is — all you need is an official developer tool, which can be downloaded here

Is that all you need? That’s right, let’s take a look at how to use this one tool to complete the entire process of applets development.

Applets registration

Let’s open a good wechat developer tool, and then come to the interface to create a project, here you can create a new small program project. Of course, if you already have a small program project, you can directly import (for example, you can download a small program from Github)

Each applet needs to have a unique identifier, called AppID, which you can think of as the applet’s id number. The AppID is bound to a mailbox, and a mailbox can only be associated with one small program. If not, you can click on the register button above and go to the location shown below to register.

AppID is like our ID number, which can uniquely identify each of us. It is important privacy information, so do not disclose it easily.

Small program management background

When you have a small program, wechat will provide a web background to manage your small program related information, the address is here

This is a powerful background management system, basic cover all you for the small program management functions, the use of each function is also more understandable, so here will be your future management of their small program base camp.

In addition, the Settings TAB at the bottom has some important information, such as the AppID widget and the mailbox to bind to, as well as the original ID. The original ID is another important piece of information that can be used in special scenarios. If you don’t remember the information about your applet, you can log into the background to view it.

Wechat developer tools

So after the introduction of the management background, we go back to wechat developer tools, fill in the correct AppID, you can open our small program project

This is a powerful development tool that has almost all the functions you need to develop small programs, such as writing code, debugging, file editing, finding, publishing, and so on. We’ll cover each of these features later, but now you can build an overview.

Do not see it is complex to shrink back, the menu on the page is more because of rich functions, it is like PS software, is a professional software, provide you with all the functions to do something, use it you can develop a small program of their own wechat, this is not very interesting.

Applets file directory

Next, we’ll start with the most important part, the file directory, where all the files related to the applets are stored.

It is just like any folder on your computer, except that your folder may contain some Word documents, PPT or photos, while it contains small program files that wechat developer tools can recognize, such as codes, style files, data files, configuration files and so on.

Most of these files are ordinary files we see, but because of the existence of certain files, they can be considered as part of the applets by the applets development tools.

You can even go to a folder on your computer to see what the files look like, without using the wechat developer tool, in the directory we created the applet in the first place. If you don’t remember, you can click on the details menu in the upper right corner, and then expand the project details panel. Here is the specific location of the applet. Click on it to open the folder of the applet project on your computer.

This is the file structure that the so-called wechat applet developer tool can recognize. This is what the tool created for us when we created the applet project. If you create the files yourself, the tools can also understand them.

Applets file introduction

With the overall file directory structure behind us, let’s go back to the development tools and dive into some important files.

Project profile

The configuration information about the applets project is stored in the project.config.json file.

This file has a.json suffix, which we call JSON, pronounced Jason. It stores program data in the basic format of a double-quoted name on the left, followed by a colon, and the corresponding content on the right. Then the outermost layer of the entire file content is a pair of Curly braces or brackets in English (remember, when entering the world of the program, all symbols are in English and Chinese symbols are not parsed)

Let’s take a simple example. For example, here is a correct JSON format

{
    "name": "Applets"
}
Copy the code

Json, which contains the long “setting” content. This is where you store the configuration information of your current applets development tool. The mapping is shown below

You can optionally check the configuration items on the right to see if the corresponding changes are generated in project.config.json. This action is done by the wechat developer tool itself.

Applets configuration information

Note that applets and applets are two words. Applets refer to the content of the program functions behind the applets we usually use, while applets projects include applets functions and all other content related to applets development.

We introduced the configuration file of the applet project above, so it contains developer tools configuration, AppId and other content about the applet project.

And the next is to introduce the small program related files, in which the file panel can be seen app.js, app.json, app.wxSS and pages these are small program code.

Let’s take a look at app.json

This JSON file stores some basic information that the applet will eventually display to the user. For example, the pages contained in the applet are the contents stored in Pages, and the first item will be the home page of the applet.

In addition, the Window stores some information about the overall style of the applet. For example, the content of navigationBarTitleText is the name at the top of the applet

We can try to modify its contents, and then click compile at the top to see the effect of the modification

summary

Okay, so far, we’ve seen all the environmental preparations needed to develop applets. The rest is code writing, which I’ll cover in the next article.

Let’s review the environmental preparation required to develop applets

  1. Download the wechat developer tool
  2. Registered AppID
  3. Log in to the small program management background for small program management
  4. Open wechat developer tools for development

That’s all you need to get started. If you want to learn more about how to build your own mini program from scratch, stay tuned for the next chapter.