Composition of wechat applet code

Catalog

  One 、 Project structure

1. Understand the basic composition and structure of the project

2. Part of the applet page  

  Two 、JSON The configuration file

1.JSON Role of profile

​2. app.json file

​3. project.config.json file  

4. sitemap.json file  

​5. Page .json The configuration file

6. New applet page  

7. Modify the project home page

3、 ... and 、WXML Templates  

1. What is? WXML

2. WXML and HTML The difference between

Four 、WXSS style

1. What is? WXSS

2. WXSS and CSS The difference between

5、 ... and 、JS Logical interaction

1. In the applet .js file

2. Small program .js Classification of documents

  One 、 Project structure

1. Understand the basic composition and structure of the project

2. Part of the applet page  

  Applet official suggested that all applet pages , All stored in pages Directory , Exist as a separate folder , As shown in the figure ：

  Two 、JSON The configuration file

1.JSON Role of profile

2. app.json file

app.json Is the global configuration of the current applet , Including all the page paths of the applet 、 Window appearance 、 Interface performance 、 Bottom tab etc. .Demo In the project app.json The configuration is as follows ：

3. project.config.json file  

project.config.json It's a project configuration file , Used to record our personalized configuration of applet development tools , for example ：

•  setting The configuration related to compilation is saved in  
• projectname The project name is saved in  
• appid The account number of the applet is saved in the ID

4. sitemap.json file  

Wechat has now opened the search in the applet , The effect is similar to PC Web page SEO.sitemap.json This file is used to configure whether the applet page allows wechat indexing . When developers allow wechat indexing , Wechat will take the form of a crawler , Index the page content of the applet . When the user's search keyword matches the page successfully , The page of the applet will probably be displayed in the search results . 

5. Page .json The configuration file

Every page in the applet , have access to .json File to configure the window appearance of this page , The configuration items in the page will overwrite app.json Of window The same configuration item in . for example ：

6. New applet page  

Only need app.json -> pages The storage path of the new page in , The applet developer tool can help us automatically create the corresponding page file

7. Modify the project home page

Just adjust app.json -> pages The sequence of page paths in the array , You can modify the front page of the project . The applet will put the first page , Render as the first page of the project , As shown in the figure ：

3、 ... and 、WXML Templates  

1. What is? WXML

WXML（WeiXin Markup Language） Is a set of tag language designed for small program framework , The structure used to build applet pages , Its function is similar to that in web page development HTML.

2. WXML and HTML The difference between

Four 、WXSS style

1. What is? WXSS

WXSS (WeiXin Style Sheets) It's a style language , Used to describe WXML Component style , Similar to... In web development CSS.

2. WXSS and CSS The difference between

5、 ... and 、JS Logical interaction

1. In the applet .js file

It is not enough for a project to only provide interface display , In the applet , We go through .js File to handle user operations . for example ： Respond to user clicks 、 Get the user's location and so on .

2. Small program .js Classification of documents

Share the learning notes page I created ：George's Notes (gitee.io)