# Small code composition

In the previous chapter, we quickly created a QuickStart Project. You can notice that different types of files are generated in this project:

.json Suffix JSON Profile
.wxml Suffix WXML Template file
.wxss Suffix WXSS Style file
.js Suffix JS Script Logic Files

Let's look at the role of these four documents.

# JSON To configure

JSON Is a data format, not a programming language, in the Mini Program, JSON plays the role of static configuration.

We can see that in the root directory of the project there is a app.json and project.config.json, in addition to the pages/logs There's another one under the catalog logs.jsonLet us explain in turn their uses.

# Mini Program configuration app.json

app.json Is the global configuration of the current Mini Program, including all the page paths of the Mini Program, interface performance, network timeout time, bottom tab Etc. QuickStart Inside the project. app.json The configuration is as follows:

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

Let's briefly explain the meaning of the various items in this configuration:

pagesfield Used to describe all the page paths of the current Mini Program. This is to let the WeChat client know which directory your Mini Program page is currently in.
windowfield Define the top background color of all pages of the Mini Program, text color definition, etc.

Additional configuration details can be found in the documentation Configuration of Mini Program app.json 。

# Tool configuration project.config.json

Usually when you use a tool, you will do some personalized configuration for their own preferences, such as interface color, compile configuration, etc., when you change another computer to reinstall the tool, you have to reconfigure.

With this in mind, the Mini Program developer tool generates a project.config.json, any configuration you do on the tool will be written to this file. When you reinstall the tool or change your computer to work, As long as you load the same project's code package, the developer tools will automatically restore you to the personalized configuration you were developing the project at that time, including a series of options such as editor colors, automatic compression of code when uploading, and so on.

Additional configuration details can be found in the documentation [Configuration of Developer Tools](../../Devtools /projectconfig.html) 。

# Page configuration page.json

Here's the page.json Is actually used to indicate pages/logs Under the directory logs.json This type and Mini Programs page related configuration.

If the style of your entire Mini Program is a blue hue, then you can app.json The top color is blue. The actual situation may not be the case, you may have a Mini Program inside each page has a different tone to distinguish between different functional modules, so we provide page.json, allowing developers to independently define some of the properties of each page, such as the top color just mentioned, whether to allow drop-down refresh, and so on.

Additional configuration details can be found in the documentation [Page configuration](../config.md#Page configuration) 。

# JSON grammar

Here are some notes about the JSON configuration in the Mini Program.

JSON files are wrapped in braces. The data is expressed by means of key-value. The JSON Key must be wrapped in a double quotation mark. In practice, writing JSON When I forgot to give Key It is a common mistake to put double quotes on values or to write double quotes as single quotes.

JSON can only be in one of the following data formats; any other format will trigger an error, such as JavaScript to hit the target undefined。

Numbers, including floating-point numbers and integers
Character string, enclosed in double quotes.
Bool值，true or false
Array, which needs to be wrapped in square brackets []
Object that needs to be wrapped in curly braces {}
Null

It is also important to note that JSON Comments cannot be used in the file. Attempting to add comments will cause an error.

# WXML template

Those who have been engaged in web programming know that web programming uses the HTML + CSS + JS Such a combination, in which HTML Is used to describe the current structure of this page,CSS Used to describe what the page looks like,JS It is usually used to handle the interaction between the page and the user.

For the same reason, there is the same role in Mini Programs, in which WXML Acting as something like HTML The role. open pages/index/index.wxml, you will see the following:

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> Get Avatar Nickname </button>
    <block wx:other >
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

and HTML Very similar,WXML Consists of labels, attributes, and so on. But there are many different places, let us explain one by one:

The label name is a little different

Often written. HTML The labels that are often used are div, p, span, developers can write a page based on these basic tags to combine different components, such as calendars, pop-ups, and so on. In other words, since everyone needs these components, why can't we wrap these commonly used components to greatly improve our development efficiency?

As you can see from the above example, the Mini Program WXML With the label view, button, text Wait, these tags are the basic capabilities that Mini Programs package for developers, and we also provide component capabilities for maps, video, audio, and so on.

Refer to the next chapter for more detailed component descriptions The ability of Mini programs
A little more wx:if Such attributes as well as {{ }} Such an expression

In the general development process of web pages, we usually go through JS operation DOM (Corresponding HTML The description of the resulting tree)To cause some changes in the interface in response to user behavior. For example, when a user clicks a button,JS Will record some states to the JS Variables at the same time. DOM API to control DOM The property or behavior of the interface, which causes some changes. As the project gets bigger and bigger, your code will be filled with a lot of interface interaction logic and various state variables of the program. Obviously this is not a good development model, so there is MVVM Development model (e.g. React, Vue), advocates the separation of rendering and logic. The simple answer is to stop letting JS Direct control DOM，JS Just manage the state, and then describe the relationship between the state and the interface structure through a template syntax.

Mini Program framework is also used in this idea, if you need to put a Hello World The character string of the.

WXML That's what it says. :
```
<text>{{msg}} </text>
```
JS You only need to manage the state:
```
this.setData({ msg: "Hello World" })
```
adopt {{ }} The syntax for binding a variable to an interface is called data binding. Data binding alone is not enough to fully describe the relationship between state and interface. if/else, forAnd other control capabilities, in the Mini Program inside, these control capabilities are used wx: The property at the beginning.

More detailed documentation can be referred to WXML

# WXSS style

WXSS Have CSS Most of the features, the Mini Program in the WXSS Some extensions and modifications have also been made.

Added size units. In writing CSS When styling, developers need to take into account that the screen of mobile devices will have different widths and device pixel ratios, and use some tricks to convert some pixel units.WXSS Support new size units on the ground floor rpx The developer can avoid the trouble of conversion, just leave it to the Mini Program to convert, because the conversion uses floating-point numbers, so the result will be a little bit different from the expected result.
Provides global and local styles. And the front app.json, page.json Of the same concept, you can write a app.wxss As a global style, will be applied to all pages of the current Mini Program, local page style page.wxss Only applies to the current page.
In addition WXSS Support only part CSS Selector

More detailed documentation can be referred to WXSS 。

# JS Logical interaction

A service needs to interact with the user: respond to the user's click, get the user's location, and so on. In the Mini Program, we write JS Script file to handle the user's actions.

<view>{{ msg }}</view>
<button bindtap="clickMe" >Click on me</button>

to hit button Button, we want to put the interface on the msg Displayed as "Hello World"♪ so we're in button Declare a property on: Bindtap , In JS It states in the file clickMe Method to respond to this click action:

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

Responding to the user's action is that simple. More detailed events can be referred to the documentation WXML - event 。

In addition, you can also JS The call Mini Program provides the rich API, take advantage of these API You can easily adjust the capabilities provided by WeChat, such as access to user information, local storage, Weixin Pay, etc. In front of the QuickStart In the example, in pages/index/index.js It calls [wx.getUserInfo ]((wx.getUserInfo )) Get the WeChat user's avatar and nickname, and finally through the setData Display the information obtained to the interface. More API Can refer to the documentation Mini Programs API 。

Through this chapter, you understand the file types involved in the Mini Program and the corresponding roles.Next ChapterWe put the documents covered in this chapter through "The Framework of Small Programs" to "String" Get up and get them all working.