Small program introduction to proficient (2): understand the four important files of small program development

1. The applet doesn't have DOM object , Everything is based on componentization

2. Four important files of the applet

• *.js —> view Logic —> javascript
• *.wxml —> view structure ----> html
• *.wxss —> view style -----> css
• *. json ----> view data -----> json file

Be careful ： To facilitate developers to reduce configuration items , The four files that describe the page must have the same path and file name .

2.1 WXML

WXML（WeiXin Markup Language） Is the framework design of a set of tag language , combination Basic components 、 The event system , You can build the structure of the page .WXML It's like HTML Role
To fully understand WXML grammar , Please refer to WXML Syntax reference .

2.2 WXSS

WXSS (WeiXin Style Sheets) It's a style language , Used to describe WXML Component style .
WXSS Used to decide WXML How should components of .
In order to adapt to the vast number of front-end developers ,WXSS have CSS Most features . At the same time in order to more suitable for the development of WeChat applet ,WXSS Yes CSS It has been expanded and modified .
And CSS comparison ,WXSS The extended features are ：

• Unit of measure
• Style import
  

2.3 json

JSON Is a data format , It's not a programming language , In the applet ,JSON Play the role of static configuration .

1. Global configuration

In the applet root directory app.json The file is used for global configuration of wechat applets , Determine the path of the page file 、 Window representation 、 Set network timeout 、 More settings tab etc. .

1. Configuration page

Each applet page can also use the same name .json File to configure the window representation of this page , Configuration items in the page will overwrite app.json Of window The same configuration item in .

1. Tool configuration project.config.json

Usually when you use a tool , They will make some personalized configurations according to their preferences , For example, interface color 、 Compile configuration, etc , When you change to another computer and re install the tools , You have to reconfigure .
With that in mind , The applet developer tool generates a project.config.json, Any configuration you make on the tool will be written to this file , When you re install tools or change your computer to work , You just load the code package of the same project , Developer tools automatically
Be careful ：
JSON The documents are all wrapped in braces {}, adopt key-value How to express data .JSON Of Key Must be wrapped in a double quotation mark , In practice , To write JSON When , Forget to give Key It's a common mistake to use double quotes for values or single quotes for double quotes .
JSON The value of can only be in the following data formats , Any other format will trigger an error , for example JavaScript Medium undefined.

1. Numbers , Contains floating-point numbers and integers
2. character string , Need to wrap in double quotes
3. Bool value ,true perhaps false
4. Array , Need to be wrapped in square brackets []
5. object , Need to wrap in braces {}
6. Null

The other thing to note is that JSON Cannot use comment in file , An attempt to add a comment will result in an error .

2.4 js

It's not enough for a service to only display the interface , You also need to interact with users ： Respond to user clicks 、 Get the user's location and so on . In the applet , We just wrote JS Script files to handle user actions .

1. Registration page

For each page in the applet , All need to be mapped on the page js Register in the file , Specify the initial data for the page 、 Lifecycle Callback 、 Event handling functions, etc

1. Use Page Constructor registration page

Simple pages can be used Page() Construct .

1. Use Component The constructor constructs the page

Page The constructor works for simple pages . But for complex pages , Page Constructors may not work well .
here , have access to Component Constructors to construct pages . Component The main difference between constructors is ： Methods need to be placed in methods: { } Inside .