[wechat applet] understand the basic composition of the applet project

Author's brief introduction ： Su Liang （ Focus on web crawlers , Data analysis , On the way to learning the front end ）
Blog home page ： Su Liang .py The blog of
Series column ： Basic course of applet development
Aphorisms ： The sea is wide with fish , The sky is high and the birds are flying .
If you think the blogger's article is good , I hope you can support me for the third time in a row ！！！
Follow the likes collection

Daily recommendation

Recommend an artifact to everyone . Whether you are a student party or an office worker, you can use , The interview question bank is covered here , Brush questions online , Interviews with major manufacturers / Written test questions, etc . If you're still a student , The most important point is the simulated interview function , intelligence AI1v1 interview , Help you get to the big factory as soon as possible offer！ Click the link to go directly to ！=> Cattle from - Looking for work artifact

The project structure of the applet

1. Understand the basic composition and structure of the project

In the previous section, we talked about the registration of small programs and the downloading of development tools , After entering the applet development interface, it looks like this ：

The most important one here is the resource manager .

1. pages be used for The page where all applets are stored
2. utils be used for Modules that store the nature of tools （ for example : Custom module for formatting time )
3. app.js Applet project Entrance file
4. app.json Applet project Global profile
5. app.wxss Applet project Global style file
6. project.config.json The configuration file for the project
7. sitemap.json be used for Configure whether the applet and its page can be indexed by wechat

2. Part of the applet page

In small program development , We put all the applet pages in pages Directory , Exist as a separate folder , As shown in the figure ：

Each of these pages consists of four basic files ：
1 .js file （ Script file of the page , Store the data of the page , Event handling functions, etc ）
2 .json file （ The configuration file of the current page , Configure the appearance of the window , Performance, etc. ）
3 .wxml file （ Module structure file of the page ）
4 .wxss file （ The style sheet file of the current page ）
Finally, these four basic files form a page .

json The configuration file

json Role of profile

json It's a kind of data format , In actual development ,json Always in the form of a configuration file . Applet projects are no exception ： Through different .json The configuration file , Applet projects can be configured at different levels .

In applet project json The configuration file has 4 Kind of ：

1. In the project root directory app.json The configuration file
2. In the project root directory project.config.json The configuration file
3. In the project root directory sitemap.json The configuration file
4. In each page folder .json The configuration file

app.json The configuration file

app.json The current applet is Global configuration , Including the small program All page paths 、 Window appearance 、 Interface performance 、 Bottom tab etc. . In the project app.json The configuration is as follows :

pages: Used to record the path of all pages of the current applet
window: Globally define the background color of all pages of the applet 、 Text color, etc
style: Globally define the style version used by the applet component
sitemapLocation: Used to indicate sitemap.json The location of

project.config.json The configuration 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

among setting The settings of can be synchronized through local settings ：

sitemap.json The configuration file

Wechat is now open Search in applet , The effect is similar to PC Web page SEO.sitemap.json File is used to configure the applet page Whether wechat indexing is allowed . 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 .

On the page .json The configuration file

Every page in the applet , have access to .json The document is right 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 :

See... For more color code details ： A complete list of colors , Color code

New applet page

Create a new page , Only need app.json Of pages The storage path of the new page in , The applet developer tool can help us automatically create the corresponding page file , As shown in the figure :

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 :

WXML Templates

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.

WXML And HTML The difference between

• Different tag names
  HTML ( div, span, img, a)
  WXML ( view, text, image, navigator)

• Attribute nodes are different
  eg：a and navigator In the tag href and url node
  < a href=" " > Hyperlinks < /a >
  < navigator url=" " >< /navigator >

• Similar to Vue Module syntax in
  Data binding
  The list of rendering
  Conditions apply colours to a drawing

WXSS style

What is? WXSS？

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

WXSS and CSS The difference between

• Added rpx Unit of measure
  CSS Pixel unit conversion needs to be carried out manually in , for example rem
  WXSS Support new units of size at the bottom rpx, On screens of different sizes, the applet will automatically convert

• Provides global and local styles
  In the project root directory app.WXSS Will work on all applet pages
  Of partial pages .WXSS The style is only valid for the current page

• WXSS Only partial CSS Selectors
  .class and #id
  element Element selector
  Union selector 、 Descendant selector
  ::after and ::before Such as pseudo class selector

js Logical interaction

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 .

Small program .js Classification of documents

In the applet .js Documents fall into three broad categories ：

• app.js file
  It is the entry file of the whole applet project , By calling App() Function to start the entire applet
  

• On the page .js file
  Is the entry file of the page , By calling Page() Function to create and run the page
  

• ordinary .js file
  It is a common function module file , Used to encapsulate public functions or properties for use by pages
  

Here, I know the basic structure of the applet . Let's see you next time ！

More question banks and summary of knowledge points , Interview skills => Cattle from , Come and brush the questions with me ！