Explanation of the basic directory structure of the mini program for practical development of WeChat mini programs

Abstract: In the previous article Practical Development of WeChat Mini Programs (1): Introduction to WeChat Mini Programs, we have already understood the functions of mini programs, development tools and how to create mini program projects. Today we will take firstdemo as an example to introduce the basic directory structure of the mini program. When we open a WeChat Mini Program...

In the previous article Practical Development of WeChat Mini Program (1): Introduction to WeChat Mini Program, we have already learned about the mini program Functions, development tools and how to create mini program projects. Today we will take firstdemo as an example to introduce the basic directory structure of the mini program.
When we open a WeChat applet project and click to enter the "Edit" menu, we can see the following 5 files/folders): pages folder, utils folder, global file app.js file, global file File app.json file, image editing file tool app.wxss file.

The overall structure of the mini program directory structure is as follows:



We introduce each file and folder in the mini program directory in detail functions, and precautions.
1.pages directory introduction

pages:Mainly stores the page files of the mini program, each of which Each folder is a page, and each page contains four files:

##index. js

.js is the logic file of the mini program, also known as event interaction file and script file. It is used to handle functions such as click events on the interface, such as setting the initial Data, defining events, data interaction, logical operations, declaration of variables, arrays, objects, functions, annotation methods, etc., their syntax is the same as JavaScript. We can open and take a closer look at the code in index.js.

First of all, we can change the hello word in motto into the hello WeChat applet in the data. As shown below:

Secondly, let’s take a look at the function of

bindViewTap: function(), which is to click to jump to the log page. We can click on the avatar to see the demonstration effect, as shown below:
Finally, let’s take a look at the onLoad function, which sets the action when the page starts. We can modify the page to be displayed when the page starts, or we can add new functions, as shown in the figure below:


The commonly used .js functions are as follows:

##Page({

1. 
   data:{

2. 
   // text:"This is a page"

3. 
   },

4. ## onLoad:function(options){
   

5. ## // Page initialization options are the parameters brought by page jump

   
   

6. console.log('App onLoad')

   
   

7. },

   
   

## onReady:function(){

8. 
   

// Page rendering completed

10. console.log('App onReady')
    

11. # },

    
    

12. onShow:function(){

    
    

13. // Page display

    
    

14. console.log('App onShow')

    
    

## },

15. 
    

onHide:function(){

16. 
    

// Page hide

17. 
    

    ## console.log('App onHide')

18. 
    ## },

19. 
    onUnload:function(){

20. 
    // Page close

21. 
    console.log('App onUnload')

22. 
    }

23. ##})
    

24. Copy code
    index.json

The file with the suffix .json is a configuration file, which is mainly stored in json data format and is used to set the configuration effect of the program. We can create a .json configuration file in the index directory, as shown below: The index.json configuration file can only configure page configuration files in this directory, and can only configure and modify related files of the navigation bar, such as modifying the display style of the navigation bar, such as navigation text, background color, and text color. wait. Its syntax is the same as json syntax. For example, let's change the background color of the navigation bar to red, as shown in the figure below:

We can see that the background color changes to red. . (This color is really appalling!)

index.wxml

.wxml file is the interface file ,

is the page structure file, used to build the page and add controls to the page. The full name is the abbreviation of weixin markup lanuage, WeChat markup language. Like other general markup languages, tags are in pairs and tag names are in lowercase. You can control the appearance by referencing classes, you can also perform logical processing by binding events, and complete the list we need by rendering. It is the link between user operations and back-end logic. All the elements we see on the page can be edited here. For example, we put a button on the page, as shown below:

How to comment unnecessary program code in .wxml ? As follows:

##

1. 
   

#

2. 
   

   ##

3. 
   ## {{userInfo.nickName}}000

4. 
   

5. ##
   

6. {{motto}}
   

7. 
   

8. 
   

9. 
   

10. 
    

11. ##Copy code

    
    

    Note:
12. 1 . These specific tags in WeChat mini programs are called components.

    
    

index.wxss

.wxss is a style sheet file, similar to css in the front-end, which is for .wxml files and page files. Beautified files make the interface display more beautiful. For example, set the size and color of text, the width and height of pictures, and set the position and spacing of components in .wxml.

Notice:

1. Each page of the mini program must have .wxml and .js files. The other two types of files are not required.

2. The file name must match the page The folders have the same name, such as the index folder, the files can only be index.wxml, index.wxss, index.js and index.json.

1.2 utils

This file is mainly used to store some global .js files and some commonly used event processing codes. Files can be placed in this folder for global calls. For example, common methods: processing time, etc.

1. module.exports = {

   
   

2. formatTime: formatTime

   
   

3. }

Copy code
For methods that allow external calls, use module.exports to declare them, and then use the following code to introduce them in other js files

1. var util = require('../../utils/util.js')

Copy code Then you can call this method.

Example: We directly define a utils function, as shown below:

##function util(){

1. 
   

console.log("Module was called!!")

2. 
   

}

3. 
   

4. 
   

   #module.exports.util = util

5. Copy the code

Then call this util function in the index.js file, as shown below:

##var common = require('../../utils/util.js')

1. Copy code

After we save it, we can see in the background that the util content we defined has been called, as shown below:

1.3 app.js, app.json, app.wxss

app.js

: The system method handles global files, that is to say, the functions and data specified in the file can be obtained by using this for every frame page and file in the entire applet. Each mini program will have an app.js file, and there is only one, located in the root directory of the project! The function of app.js is to tell the mini program to register an instance of the mini program in the form of app (object) to implement the event functions that the mini program needs to implement at different stages, such as onLoad, onshow, etc. There are only three global on events: , less than the on event of the page. Some methods that mainly handle the declaration cycle of the program; for example: event processing when the program just starts running, etc. app.js contains An app() method, which provides the corresponding event definition, as follows

1. ##App({
   

2. onLaunch: function () {
   

3. console.log('App Launch')
   

4. ## },

   
   

5. onShow: function () {

   
   

6. console.log('App Show')

   
   

## },

7. 
   

onHide: function () {

8. 
   

console.log('App Hide')

9. 
   

}

10. 
    

})
Copy code

App( ) function is used to register a small program. Accepts an object parameter, which specifies the life cycle function of the applet, etc.

app.json : The system global configuration file must be included. It includes setting the page path, setting the bottom, network, debugging mode, setting the color of the navigation header, font size, whether there are tabbars below and other functions. The configuration of the specific page is modified separately in the json file of the page. Any page needs to be in the app. Register in json. If it is not added in json, the page cannot be opened.

"pages":[

1. 
   

   "pages/index/index",

2. 
   ## "pages/logs/logs"

3. 
   ],

4. Copy code

（

in the frame The json priority is higher than the global json priority) #app .wxss : Global interface beautification code is not necessary. Its priority is also not as high as that of wxss in the framework.

Example: There are margin settings for the avatar in index.wxss

.usermotto {

## margin-top: 200px;

1. }
   

##Copy code
2. Also define a global avatar margin setting of 400px in app.wxss. Let’s see which one is Executed.

   
   

.usermotto {

margin-top: 400px ;

1. }

   
   

Copy code
2. During the restart process, we can see that the global parameters are indexed The ones in .wxss are covered.

   
   

3. Picture adding and processing in WeChat mini program

It is very troublesome to add pictures in WeChat mini program. You can only open it by opening Project folder, just put the pictures in the directory. Just reference the relative path or absolute path of the image in the code. Currently, only png and jpg formats are supported in mini program development, and pictures in other formats cannot be opened.

The above is the detailed content of Explanation of the basic directory structure of the mini program for practical development of WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!