WeChat Mini Program Basic Directory Structure Learning

Today we will take firstdemo as an example to introduce the basic directory structure of the applet.
When we open a WeChat applet project, click to enter the "Edit" menu, we can see that there are the following 5 files/folders): pages folder, utils folder, global file app.js file, global file app. json file, image editing file tool app.wxss file.
<ignore_js_op>
The overall structure of the applet directory structure is as follows:
<ignore_js_op>
<ignore_js_op>

We will introduce the function of each file and folder in the applet directory in detail, and the precautions.
1.pages directory introduction

pages: Mainly store the page files of the applet, each folder is a page, and each page contains four files:

index.js

.js is the logic file of the applet, also known as the event interaction file and the script file. It is used to handle the functions such as click events on the interface, such as setting initial data, defining events, data interaction, logical operations, variable declarations, arrays, Objects, functions, way of annotations, etc., the syntax is the same as javascript. We can open it up and take a closer look at the code in index.js.

First of all, we can display hello word in motto and change it to hello WeChat applet in data. As shown below:

Second, 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 in the following figure:
<ignore_js_op>

Finally, let's take a look at the onLoad function, which is to set the action when the page starts. We can modify the page displayed when the page starts, or add functions, as shown in the following figure:
<ignore_js_op>
The commonly used .js functions are as follows:

Page({
data:{
// text: "This is a page"
},
onLoad:function(options){
// The page initialization options are the parameters brought by the page jump
console.log('App onLoad')
},
onReady:function(){
// page rendering is complete
console.log('App onReady')
},
onShow:function(){
// page display
console.log('App onShow')
},
onHide:function(){
// page hide
console.log('App onHide')
},
onUnload:function(){
// page close
console.log('App onUnload')
}
})

copy code

The file with the suffix of index.json.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:
<ignore_js_op>
index.json This configuration file can only configure page configuration files in this level directory, and can only configure and modify related files in the navigation bar , such as to modify the display style of the navigation bar, such as the navigation text, background color, text color, etc. Its syntax is the same as json syntax. For example, let's modify the background color of the navigation bar to red, as shown in the following figure:

<ignore_js_op>

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

index.wxml

The .wxml file is an interface file, a page structure file, used to build a page and add controls on the page. The full name is the abbreviation of Weixin markup lanuage, WeChat markup language. Like other general markup languages, tags are paired, and tag names are lowercase. The appearance can be controlled by referencing the class, or logical processing can be performed by binding events, and the list we need can be completed by rendering. It is the bridge between user operations and back-end logic. All the elements we see on the page can be edited here. For example, let's put a button on the page as shown below:

<ignore_js_op>

How to annotate unnecessary program code in .wxml? as follows:

<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}000</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>

copy code

Notice:

1. These specific tags are called components in WeChat Mini Programs.

index.wxss

.wxss is a style sheet file, similar to css in the front end, it is a file for beautifying the .wxml file and page file, making the interface display more beautiful. For example, for the size, color, width and height of the text, set the position and spacing of each component in .wxml.

Notice:

1. Each page of the applet must have .wxml and .js files, and the other two types of files may not be required

2. The file name must be the same as the folder name of the page, 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 common event processing code files can be placed in this folder for global calls. For example, common methods: processing time, etc.

module.exports = {
formatTime: formatTime
}

copy code

For methods that allow external calls, use module.exports to declare them before they can be introduced in other js files with the following code

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

copy code

Then the method can be called.

Example: We define a utils function directly, as shown in the following figure:

function util () {
console.log("The module was called!!")
}
module.exports.util = util

copy code

Then call this util function in the index.js file like this:

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

copy code

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

<ignore_js_op>

1.3 app.js、app.json、app.wxss

app.js : The system method handles the global file, that is to say, the functions and data specified in the file, in the whole applet, each frame page and file can be obtained using this. Each applet will have one app.js file, one and only one, located in the root directory of the project! The function of app.js is to tell the applet to register an instance of the applet in the form of app (object) to realize the event functions that the applet needs to implement in different stages, such as onLoad, onshow, etc. The global on event has only the following three , which is less than the on event of the page. Some methods of the declaration cycle of the main handler; for example: event processing when the program just starts running. App.js contains an app() method, which provides the corresponding event definition, as follows

App({
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
}
})

copy code

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

<ignore_js_op>

app.json : 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, and whether there is a tabbar below. The configuration of the specific page is modified separately in the json file of the page, and any page needs to be in the app. If it is not added in json, the page cannot be opened.

"pages":[
"pages/index/index",
"pages/logs/logs"
],

copy code

(The json priority in the framework is higher than the global json priority.)

app.wxss : global interface beautification code, not necessary. Its priority is also not as high as that of wxss in the framework.

Example: There are margin settings for avatars in index.wxss

.usermotto {
margin-top: 200px;
}

copy code

Also define a global avatar margin setting of 400px in app.wxss, let's see which one is executed.

.usermotto {
margin-top: 400px;
}

copy code

During the restart process, we can see that the global parameters are overwritten by those in index.wxss.

<ignore_js_op>

Adding and processing pictures
in WeChat applet It is very troublesome to add pictures in WeChat applet. You can only open the project folder and put the pictures in the directory. You can refer to the relative path or absolute path of the image in the code. Currently , only png and jpg formats are supported in applet development , and pictures in other formats cannot be opened.

pages: Mainly store the page files of the applet, each folder is a page, and each page contains four files:

index.js

First of all, we can display hello word in motto and change it to hello WeChat applet in data. As shown below:

Page({
data:{
// text: "This is a page"
},
onLoad:function(options){
// The page initialization options are the parameters brought by the page jump
console.log('App onLoad')
},
onReady:function(){
// page rendering is complete
console.log('App onReady')
},
onShow:function(){
// page display
console.log('App onShow')
},
onHide:function(){
// page hide
console.log('App onHide')
},
onUnload:function(){
// page close
console.log('App onUnload')
}
})

copy code

<ignore_js_op>

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

index.wxml

<ignore_js_op>

How to annotate unnecessary program code in .wxml? as follows:

<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}000</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>

copy code

Notice:

1. These specific tags are called components in WeChat Mini Programs.

index.wxss

Notice:

1. Each page of the applet must have .wxml and .js files, and the other two types of files may not be required

2. The file name must be the same as the folder name of the page, 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 common event processing code files can be placed in this folder for global calls. For example, common methods: processing time, etc.

module.exports = {
formatTime: formatTime
}

copy code

For methods that allow external calls, use module.exports to declare them in order to import them in other js files with the following code

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

copy code

Then the method can be called.

Example: We define a utils function directly, as shown in the following figure:

function util () {
console.log("The module was called!!")
}
module.exports.util = util

copy code

Then call this util function in the index.js file like this:

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

copy code

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

<ignore_js_op>

1.3 app.js、app.json、app.wxss

App({
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
}
})

copy code

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

<ignore_js_op>

"pages":[
"pages/index/index",
"pages/logs/logs"
],

copy code

(The json priority in the framework is higher than the global json priority.)

app.wxss : global interface beautification code, not necessary. Its priority is also not as high as that of wxss in the framework.

Example: There are margin settings for avatars in index.wxss

.usermotto {
margin-top: 200px;
}

copy code

Also define a global avatar margin setting of 400px in app.wxss, let's see which one is executed.

.usermotto {
margin-top: 400px;
}

copy code

During the restart process, we can see that the global parameters are overwritten by those in index.wxss.

<ignore_js_op>

WeChat Mini Program Basic Directory Structure Learning

Guess you like