Share file structure directory analysis of WeChat applet

Add a project in the WeChat developer tools and check Create default applet. The small instance automatically created by the system is the first page that displays our avatar, nickname and hello world text. Click on the avatar to jump to Another page displays the startup log, the effect is as follows:

Enter the [Edit] option, you will see the following directory structure:

The directory in the picture You can see several file formats: .wxml, .js, .json, .wxss,
Among them:
.wxml—page structure file;
.js—Script file, including the declaration cycle function of the page/program. The implementation of some wxml page listening functions is also written in this file;
.json—Configuration file;
.wxss—Style sheet;


From a general perspective, the root directory contains pages, utils directory and app.js app.json, app.wxss, etc. content.
1.pages directory

1.1 Add new pages and configure them

pages—contains page files, if you want to add them to the project For pages, you must first create a new subdirectory in the pages directory, as shown in the index directory above. The directory must contain .wxml and .js. These two are required, and .json and .wxss are optional.
And the file names of these files are the same, but the suffix names are different. After creating a new page file, you also need to configure the page path in the app.json file, otherwise the program will not be able to find the relevant files for this page. For example, if I want to create a new page called myNewPage, which contains an image, I want Do this:
After creating the new one, I want to configure the page under the pages array in the app.json file:

{ 
"pages":[ 
"pages/newPage/myNewPage", 
"pages/index/index", 
"pages/logs/logs" 
], 
"window":{ 
"backgroundTextStyle":"light", 
"navigationBarBackgroundColor": "#fff", 
"navigationBarTitleText": "WeChat", 
"navigationBarTextStyle":"black" 
} 
}

Page address configuration in pages The order determines the display order of the entire applet. For example, if I want to display my myNewPage first, I need to put it on the first line. Other pages can be displayed by jumping. All program pages need to be configured in app.json.
1.2 Configure individual pages


Each applet page can also use a .json file to configure the window performance of this page. Just set the content of the window configuration item in app.json, and the configuration items on the page will overwrite the same configuration items in the window of app.json.
The .json of the page can only set window-related configuration items to determine the window performance of this page, so there is no need to write the window key, such as:
[tr]Attribute type default value description[/tr]

{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}

2.utils目录

utils目录放的是我们工具脚本文件，我们在操作页面或者解析数据的时候常常需要写一些方法，通常是写在我们各自页面.js文件中或者是全局的app.js页面中，我们通常将一些复杂的逻辑代码抽取出来放在一个文件中封装成一个个函数，这样可以实现代码的模块化，也可以大量减少编写重复功能代码这类的工作。
把公共的方法封装起来，然后使用时需要先引入这个工具js文件，例如在系统给我们创建的小实例中，logs页面中的脚本文件logs.js需要引用utils目录下util.js中的formatTime（）方法，使用前他需要使用var util = require('../../utils/util.js')引入util.js文件：

{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}

引入之后直接使用

util.formatTime(new Date(log))

复制代码
来使用这个方法并传入参数即可。

3.app.js
app.js 是微信小程序全局逻辑脚本，小程序启动会执行该文件内的部分方法如onLaunch方法。所以一些全局初始化的工作可以在这个文件中相应的方法中执行。

4.app.wxss
app.wxss 是小程序全局样式文件，在此文件中定义的样式，整个程序都可以直接使用，所以可以把一些公共的样式放在这个文件中，以免编写重复的样式。

默认的，该文件就包含.container样式，

/**app.wxss**/ 
.container { 
height: 100%; 
display: flex; 
flex-direction: column; 
align-items: center; 
justify-content: space-between; 
padding: 200rpx 0; 
box-sizing: border-box; 
}

该样式一边用于外部容器组件中，在所有页面中都可以直接使用。
如果在pages目录下的指定页面，重写了.container的样式，那么这个页面的样式将会覆盖全局的样式。

5.app.json

app.json是全局的配置文件，

{ 
"pages":[ 
"pages/newPage/myNewPage", 
"pages/index/index", 
"pages/logs/logs" 
], 
"window":{ 
"backgroundTextStyle":"light", 
"navigationBarBackgroundColor": "#fff", 
"navigationBarTitleText": "WeChat", 
"navigationBarTextStyle":"black" 
} 
}

配置项如下边所示：
[tr]属性类型必填描述[/tr]

其中：

window设置列表如下：

[tr]属性类型默认值描述[/tr]

tabBar设置列表如下：
[tr]属性类型必填默认值描述[/tr]

List accepts an array, each item in the array is an object, and its attribute values ​​​​are as follows:
[tr]Attribute type required description[/tr]

network Timeout: Set the timeout for various network requests.
Attribute description:
[tr]Attribute type required description[/tr]

Each mini program page can also use .json files to configure the window performance of this page. The configuration of the page is much simpler than the global configuration of app.json. It just sets the content of the window configuration item in app.json. The configuration items in the page will overwrite the same configuration items in the window of app.json.
The .json of the page can only set window-related configuration items to determine the window performance of this page, so there is no need to write the window key, such as:
[tr]Attribute type default value description[/tr]

The above is the detailed content of Share file structure directory analysis of WeChat applet. For more information, please follow other related articles on the PHP Chinese website!