[WeChat Mini Program Development Xiaobai Zero Basic Introduction] The first entry-level applet [recommended collection]

---

1. The first entry-level applet

1. New project

step 1

Double-click the WeChat web developer tool icon, and the administrator or developer scans the QR code using WeChat to enter the menu screen. Click the "Applet Project" option in the menu to enter the applet project management page.

In Step 2

, the AppID of the Mini Program can be viewed by logging in to the WeChat public platform (https://mp.weixin.qq.com). The specific viewing steps are: "Development" - "Developer Management" - "Development Settings" - AppID (Mini Program ID) under the title of "Developer ID" on the left.

In step 3

, the AppID must be filled with the actual applet ID, otherwise some functions will not be available. If the developer is temporarily restricted and cannot register and apply for the applet ID, he can select the experience applet under the AppID input box. At this time, it can also be developed in the developer tool, but it cannot be previewed on the real device.

After filling in step 4

, click the "OK" button to complete the operation, and you will be redirected to the development page.

2. Real machine preview

Step 1

In addition to using the mouse directly on the PC to simulate the click effect of the mobile phone's touch screen, you can also directly preview the program on the real machine. Click the "Preview" button to automatically generate a dedicated QR code for preview.
Use the mobile phone WeChat to scan the QR code in the picture above to conduct the real machine test.

Step 2

The real machine preview can only see the effect of the applet page. If you need to obtain the applet status data (such as console statement output, local cache data changes, network packet capture, etc.) debugging.
Click the "Remote Debug" button to automatically generate a dedicated QR code for debugging. Also scan the QR code in the above picture with your mobile phone WeChat to perform remote debugging on the real machine.

Step 3

There will be one more floating window on the debugging screen of the mobile phone than the real device preview, which will display the communication status with the PC.
During the debugging process, any operation on the mobile phone can be synchronously viewed in real-time in the PC-side debugger.

3. Code upload

1. Code upload

The preview can only be used by the developer to test the performance and performance of the applet. If you want more people to use the applet, you need to upload the code. Only the uploaded code can be further selected by the administrator to be released as a trial version or an official version.
First, you need to transfer the code to the backend management of the applet. Click the "Upload" button at the top of the developer tools to prepare to upload the code.

2. Submit for review
After the upload is successful, you can log in to the applet management background - "development management" menu option, and see the version just submitted in the development management panel.

4. Mini Program Version

1. Development version
   Use the developer tools to upload code into the development version. The development version only retains the latest copy of each developer's uploaded code. Only users with developer permissions can preview this version for testing. The development version can be deleted without affecting the code of the online version and the version under review. The development version can continue to be submitted as a trial version or a review version by the administrator.

2. The trial version
   The development version can be submitted by the administrator as the trial version. This version does not need to be reviewed and can only be used by users with experience rights, and cannot be opened by other users. This version is mainly used for testing experience before the official launch.

3. Version under review After the
   development version is all completed, it can be officially submitted by the administrator to go online. The pending review status before the official launch of the Mini Program is called the version under review, and only one of all development versions of the same Mini Program can be in this status. This version can be re-submitted for review after updating the code, and will not affect the use of the existing official version during the process of waiting for review.

4. Online version
   This version is the approved version, which can be viewed and used by all WeChat users. If the newly uploaded code is reviewed and approved again, the version will be overwritten and updated.

2. Mini Program Directory Structure

1. Project configuration file

Each applet will automatically generate a project configuration file project.config.json when it is newly created, which is directly located in the project root directory.
Its internal code can be used to define the project name, appid, etc. of the applet.

2. Main document

The name of the main file is app, and there are 3 types according to the suffix:
1.app.json: required file, used to describe the public configuration of the applet;
2.app.js: required file, used to describe the applet The overall logic of;
3.app.wxss: optional file, the applet public style sheet.

3. Page file

In the applet, a pages folder is generally created in the root directory to save all page files, and each page also has its own independent secondary directory.
Each individual page basically consists of 4 kinds of files:
wxml file: used to build the structure of the current page, including components, events and other content.
wxss file: optional page, used to set the style effect of the current page, this file will not affect other pages.
js file: optional page, used to set the logic code of the current page.
json file: an optional page, used to reset the content specified by the window attribute in app.json, without affecting other pages.

4. Other documents

In addition to the above-mentioned common files, the applet also allows custom paths and file names to create some auxiliary files. For example, the utils folder in the first applet project created in this chapter is used to store public JS files.
The utils.js in the folder holds some common JavaScript code that can be referenced by other page JS files. For specific citations, see Chapter 3.
In addition, developers can also customize the resource folder to store other files. For example, create an images folder in the root directory to store pictures, etc., which can be created according to actual needs.

3. Introduction to developer tools

Developer tools are mainly composed of five parts: menu bar, toolbar, simulator, editor and debugger.

1. Menu bar

The menu bar mainly includes projects, files, editing, tools, interface, settings and WeChat developer tools.

2. Toolbar

The left area of ​​the toolbar mainly includes: Personal Center, Simulator, Editor and Debugger.
Personal Center: Account switch and message reminder;
Simulator: Click to toggle to show/hide the emulator panel;
Editor: Click to toggle to show/hide the editor panel;
Debugger: Click to toggle to show/hide the debugger panel.

The middle area of ​​the toolbar mainly includes: applet mode, compilation mode, compilation, preview, remote debugging, background cut and cache clearing.
Mini Program Mode: Mini Program Mode and Search Dynamic Page Mode;
Compilation Mode: Normal Mode, Custom Compilation Mode and QR Code Compilation Mode;
Compile: Recompile the Mini Program Project;
Preview: Generate QR Code for Real Machine Preview;
Remote Debugging: Generate QR code for real machine remote debugging;
switch to background: switch scene values;
clear cache: clear data cache, file cache, authorized data, network cache, and login status individually or at the same time.

The area on the right side of the toolbar mainly includes: Upload, Test, Tencent Cloud and Details.
Upload: Upload the code as a development version;
Test: You can apply for a test report every 24 hours;
Tencent Cloud: Tencent Cloud service authorized by the applet;
Details: Display project settings, domain name information and Tencent Cloud status.

3. Simulator

The simulator panel can switch the virtual phone model, display scale and simulate the network connection status.

4. Editor

Editing code on the page also enables automatic hints. Taking writing a label as an example, you only need to enter the first few letters, and the code prompt of the relevant component will appear. At this time, you can use the keyboard arrow keys to select the correct content and then press the Enter key to generate all of them.

5. Debugger

The debugger can be used when previewing the applet on the PC or debugging the applet on the mobile phone, and is used to view the changes in the background output, network status, data storage, etc. of the applet running in real time. At present, it mainly contains 9 panels, which can be switched with the tab bar at the top.

4. Recommended applet (welcome the guidance of the big guys)