WeChat applet development study notes (2)-project directory and file analysis

Project directory structure:

.
│  app.js					# 小程序逻辑文件
│  app.json					# 全局配置文件
│  app.wxss					# 全局样式文件
│  project.config.json		# 工具/项目配置文件
│  sitemap.json				# 索引配置文件
│  
├─pages		# 小程序的各个页面文件夹
│  ├─index		# index页面		
│  │      index.js		# 页面逻辑
│  │      index.json	# 页面配置
│  │      index.wxml	# 页面结构
│  │      index.wxss	# 页面样式
│  │      
│  └─logs		# logs页面
│          logs.js		# 页面逻辑
│          logs.json	# 页面配置
│          logs.wxml	# 页面结构
│          logs.wxss	# 页面样式
│          
└─utils
        util.js			# 提供公共方法/函数，作为一个模块（模块只有通过 module.exports 或者 exports 才能对外暴露接口）

File type and introduction:

file type	description	Features
.json	JSON configuration file	Static configuration, reference: JSON configuration
.wxml	WXML template file	Similar to HTML, describing the structure of the current page, reference: WXML template , WXML introduction , WXML syntax reference
.wxss	WXSS style file	Has most of the features of CSS, extended features: size unit, style import. Reference: WXSS style , WXSS introduction
.js	JS script logic file	Handle the user's operation, respond to the user's click, obtain the user's location, etc., refer to: JS logic interaction

Analogy with web front-end development technology:

• wxmlSimilar to HTML files, it is used to write the tags and skeleton of the page, but it can only use the components encapsulated by the applet;
• wxss Similar to a CSS file, used to write page styles, except that the css file is replaced with a wxss file;
• js 文件Similar to the JavaScript file in front-end programming, it is used to write the page logic of the applet;
• json 文件Used to configure the style and behavior of the page.

Introduction to global configuration files:

Global configuration reference document

file	description	Features	Reference documents
app.js	Global configuration js file	Entry file of the project, used to create application objects	Registration Mini Program Reference Document
app.wxss	Global style configuration file	Entry file of the project, used to create application objects	WXSS use reference document
app.json	Mini Program Global Configuration File	Including all page paths, interface performance, network timeouts, bottom tabs, etc. of the applet	Mini Program Global Configuration Reference Document
project.config.json	Tool configuration file	Personalized configuration, such as interface color, compilation configuration, etc.	Tool/Project Global Configuration File Reference Document
sitemap.json	Index profile	Used to configure whether the applet and its pages are allowed to be indexed by WeChat. When the user’s search term triggers the index, the page of the applet may be displayed in the search results	Index configuration file reference document

Local variables in the pages directory:

Page configuration reference document

• Each page can use a small program of the same name .jsonfile to configure the window performance this page, the page configuration items will be covered by app.jsonthe windowsame configuration items.
• Page configuration can only be set app.jsonin windowthe corresponding configuration items to determine the window performance of this page, there is no need to write windowthis property.