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

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.

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

##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

index.wxml

.wxml file is the interface file ,

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.

    
    

.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. }

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

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

##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

: 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.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.

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

## 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.

   
   

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