Introduction to WeChat Development (2) WeChat Mini Program Development Tool Usage and Design Specifications

In this article you can learn:

1. ##How to use mini program development tools to write a Hello World

2. WeChat mini program Design Specifications

3. WeChat Mini Program Project Structure

》》》

WeChat Mini Program Development Tool Usage

• Download and install the applet

  Download: WeChat web developer tool
  

  Download: Official DEMO source code
  This series of tutorials uses the mac version developer tools.

• After the installation is complete, open the WeChat web developer tool

1. Scan the QR code to log in and bind your personal WeChat

2. After scanning the QR code to log in, create a new or import an existing project (use the official DEMO source code quickstart here)

3. Create a new project and import the quickstart project you just downloaded

Since only companies or individuals that have received invitations to internal testing have AppIDs, be sure to select "No AppID"

4. The new creation is successful, let’s see the true face of the development tools

Is it very similar to the chrome developer mode? . .

5. Introduction to development tools [Debugging]

The "Debugging" module mainly includes selecting the debugging model, selecting the network type, console output, network resources, and view positioning , breakpoints, etc.

6. Introduction to development tools [Edit]

The red box on the left is the project structure directory, and the right is the code editing area. After each change is saved, Click "Compile" to view the modified page effect.

7. Create a new folder or file

Place the mouse on the folder, a "+" icon will appear on the right, click to add a folder or file

》》》

Mini Program Design Specifications (Excerpted from WeChat Mini Program Design Guide)

1. Friendly and polite

   In order to avoid users being When using mini program services on WeChat, your attention is distracted by the complex surrounding environment. When designing mini programs, you should pay attention to reducing the interference of irrelevant design elements on user goals, politely show users the services provided by the program, and guide users to operate in a friendly manner. .
   

2. Key points

   Each page should have a clear focus, so that users can quickly understand the content of the page every time they enter a new page. After determining the focus, Under the premise, you should try to avoid other distracting items on the page that affect the user's decision-making and operations.
   

3. Clear and clear

   Once a user enters our mini program page, we have the responsibility and obligation to clearly and clearly inform the user where they are and where they can go, ensuring Users can move freely through the page without getting lost, so as to provide users with a safe and pleasant experience.
   

》》》

WeChat Mini Program Project Structure

1. File structure

   
   
   

2. The framework program contains an app that describes the overall program and multiple pages that describe their respective pages. The main part of a framework program consists of three files, which must be placed in the root directory of the project.

##app.jsApplet ( Global) logicapp. Mini program (global) public settings, determine the path of the page file, window performance, and set network timeout Time, setting multiple tabs, etc.app.Mini program public (global) style sheet

File	Function
json
wxss

1. A frame page consists of four files:

File type FunctionjsPage logicwxmlPage structure, a set of tag languages ​​designed by the framework, combined with basic components and event systems, can build the structure of the page. wxss is a style language used to describe WXML component styles. Used to determine how WXML components should be displayed. jsonPage configurationAccording to the principle of "convention over configuration", a frame page must have at least Contains three file types: js, wxml, and wxss. The file names must be the same, such as homepage index.js, index.wxml, and index.wxss, and they must be placed in the same folder. When registering a page, there is no need to write a file suffix in the file name, because the framework will automatically look for the four files in the path .json, .js, .wxml, and .wxss for integration.

》》》

Summary

The above introduces the preparation work for the development of WeChat mini programs from three aspects: development tools, design specifications, and project directories. It will be updated later; at the same time, through Import the official DEMO and display the Hello World applet page. Generally speaking, the mini program development tools are streamlined, the project structure is clear, the documentation is complete, and the entry barrier is not high; the WeChat team has packaged different operating systems and models, and developers only need to call the corresponding

API is enough. Of course, if you want to understand the entire framework, you need to deeply study the working principles of Redux, state mode, one-way and two-way data binding, JS calling Android/IOS native UI components, etc.

If you have any questions, you can also follow my WeChat public account "ITNotes" to communicate and learn together.

【Related recommendations】

1.

WeChat public account platform source code download

2.

WeChat voting source code

3.

WeChat LaLa Takeaway 2.2.4 Decrypted Open Source Version of WeChat Rubik’s Cube Source Code

The above is the detailed content of Introduction to WeChat Development (2) WeChat Mini Program Development Tool Usage and Design Specifications. For more information, please follow other related articles on the PHP Chinese website!