WeChat Mini Program Development Guide: Application Registration and Development Process Examples

Step One: AppID Application

Each AppID has the identity of administrator and developer. There is only one administrator and cannot be changed; developers can have a maximum of 10 uncertified mini programs and a maximum of 20 certified mini programs. Only if you have one of them can you preview it on WeChat.

Step 2: Environment setup

1. Login

Different from other IDEs, you need to log in using WeChat ID. This is also the credentials required for the administrator and developer identities mentioned earlier.

Select local applet project

Add project

Fill in the appID. If there is no appID, click No appID. You will be prompted that some functions are limited, so don’t worry. Just fill in the project name and select the project directory. Checked Create a quick start project in the current directory

2. IDE introduction

As a public beta product, this version of the IDE is still relatively simple. . I believe that when the WeChat applet is officially launched, the use of IDE will be greatly improved to meet the development requirements of developers. The interface when opening the IDE for the first time is as follows:

You can see in the navigation area on the left side of the page that there are five options: Edit, Debug, Project, Edit, and Close. We can view and edit our code in "Edit", test the code and simulate the effect of the mini program on the WeChat client in "Debug", and send it to the mobile phone to preview the actual effect in "Project". As for compilation and shutdown, they are just two function buttons. (By the way, this IDE will automatically compile when Ctrl + S is pressed)

When editing, the ribbon is as follows:

Step 3: Development Process

Create a project for the first time. The project directory is as follows: (Two pages will be generated and can be run)

.js: Logic control, used for Write JavaScript code.
.wxml: Page structure, used to write html. Of course, WeChat has a certain package for it, and you need to understand its label before using it.
.wxss: Style sheet file, used to write css.
.json: Style configuration, consistent with json syntax format. Used to make settings within its scope.

The front desk guy must be very excited when he sees this. Isn’t this the front-end code?

A small program contains an app that describes the overall program and multiple pages that describe their respective pages.

1.1 Each file named after app is the global configuration file of the entire app, which must be placed in the root directory of the project. As follows:

The official introduction is very detailed, so I won’t go into details: app.js , app.json , app.wxss.

1.2 pages directory, It is a page in the project, and each page corresponds to a folder under pages. The folder name is the same as the file name, and different files are distinguished by suffixes (note that not every file is required).

The official introduction is very detailed, so I won’t go into details: .js , .wxml , .wxss , .json.

Note: The four files describing the page must have the same path and file name.

2. Component

WeChat encapsulates a series of controls based on HTML, aiming to reduce everyone’s development difficulty and workload. Please check the official documentationhttps://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=20161107

Note: All components and properties are lowercase and connected with hyphens -

3.API

Please check the official documentationhttps://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=20161107

For more WeChat mini program development guide: application registration and development process examples, please pay attention to the PHP Chinese website for related articles!