The composition of the program code

In the last chapter, we quickly created a QuickStart project with developer tools. You can notice that different types of files have been generated in this project:

1. The JSON profile for the .json suffix
2. The WXML template file for the .wxml suffix
3. WXSS style file with .wxss suffix
4. .js the JS script logic file with the suffix

Let's look at the role of these four files separately.

JSON configuration

JSON is a data format, not a programming language, and in small programs, JSON plays the role of static configuration.

We can see that there is an app.json and project.config.json at the root of the project, and a logs.json in the pages/logs directory, so let's explain their purpose in turn.

The small program is configured by app.json

app.json is the global configuration of the current gadget, including all page paths, interface performance, network timeouts, bottom tab, and so on. The app.json configuration in the QuickStart project is as follows:

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

Let's briefly say what this configuration means for each item:

1. pages field - Used to describe all page paths for the current mini-program to let WeChat clients know which directory your current little program page is defined in.
2. Window field - Defines the top background color of all pages of the program, text color definition, and so on.

Additional configuration item details can be found in the documentation for the configuration app.json of the program.

Tool Configuration Project.config.json

Usually everyone will do some personalized configurations for their respective preferences, such as interface color, compilation, and more, when you change another computer reinstall tool, you have to reconfigure.

Taking into account this, the applet developer tool generates a project.config.json at the root of each project, and any configuration you do on the tool will write to this file, when you reinstall the tool or change your computer.When you load the code package of the same project, the developer tool will automatically resume to restore the personalized configuration when you develop projects, which will include the color of the editor, automatic compression, etc., etc.Options.

Other configuration item details can refer to the documentation Developer tool configuration 。

Page Configuration Page.json

The page.json here is actually used to represent the Logs.json under the Pages / Logs directory.

If your entire applet is blue, you can declare the top color in app.json.The actual situation may not be the case, maybe you have different hue to distinguish between different functional modules in your small program, so we offer Page.json to let developers can independently define some properties of each page, such as just justSay the top color, whether the drop-down refresh is allowed.

Other configuration item details can refer to the documentation Page configuration 。

JSON syntax

Here you say some of the precautions for JSON configuration in the small program.

The JSON file is wrapped in a braklet {}, express data by key-value.JSON's key must be wrapped in a double quotation. In practice, when writing JSON, I forgot to add double quotes to the key value or write double quotes to a single quotation mark is a common error.

JSON's value can only be the following data formats, and any other format trigger a message, such as undefined in JavaScript.

1. Numbers, including floating point and integers
2. String, need to package in double quotes
3. Bool value, true or false
4. Array, which needs to be wrapped in square brackets.
5. Object that needs to be wrapped in braces.
6. Null

It is also important to note that comments cannot be used in JSON files, and attempting to add comments will result in an error.

WXML template

Web programming people know that web programming uses a combination of HTML and CSS and JS, where HTML is used to describe the current structure of the page, CSS is used to describe what the page looks like, and JS is usually used to handle the interaction between the page and the user.

By the same toe, there are similar roles in small programs, where WXML acts as an HTML-like role. Open pages/index/index.wxml and you'll see the following:

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <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>

Much like HTML, WXML consists of tags, properties, and so on. But there are many different things, let's explain one by one:

1. Label names are a little different when writing HTML, often used labels are div, p, span, developers can write a page based on these basic tags to combine different components, such as calendars, windows, and so on. O n the other mind, since everyone needs these components, why can't we wrap these commonly used components and greatly improve our development efficiency? A s you can see from the example above, the WXML tags for small programs are view, button, text, and so on, which are the basic capabilities that small programs package for developers, and we also provide component capabilities such as maps, video, audio, and so on. More detailed components describe the ability to refer to the next chapter of the program
2. With a few more properties like wx:if and expressions like . . . in the general development process of a Web page, we typically manipulate the DOM (the tree generated by the description of html) through JS to cause some changes in the interface in response to user behavior. F or example, when a user clicks a button, JS records some states into the JS variable and manipulates the properties or behavior of the DOM through the DOM API, causing some changes in the interface. A s the project gets bigger and bigger, your code is filled with a lot of interface interaction logic and various state variables of the program, which is obviously not a good development model, so there are MVVM development patterns (e.g. React, Vue) that advocates the separation of rendering and logic. S imply put, stop letting JS directly manipulate the DOM, JS just needs to manage the state, and then use a template syntax to describe the relationship between the state and the interface structure. T he framework of the small program also uses this idea if you need to display a Hello World string on the interface. W XML is written as this: .lt;text>/text> JS only needs to manage the status: this.setData (sg: "Hello World") binds a variable to the interface through the syntax of the syntax of the . Data binding alone is not enough to describe the relationship between state and interface, but also need if/else, for and other control capabilities, in small programs, these controls are expressed in wx: the beginning of the properties.

More detailed documentation can refer to WXML

WXSS style

WXSS has most of the features of CSS, and small programs have been expanded and modified in WXSS.

1. Dimension units have been added. W hen writing CSS styles, developers need to take into account that the screen of a phone device will have different widths and device pixel ratios, and use some techniques to change some pixel units. WXSS supports the new dimension unit rpx at the bottom, and developers can avoid the hasse of conversion, as long as it is left to the bottom layer of the small program to conversion, because the conversion uses floating-point operations, so the results of the operation and the expected results will be a little deviation.
2. Provides global styles and local styles. With the same concept as the front app.json, page.json, you can write an app.wxss as a global style that will work on all pages of the current widget, and the local page style page.wxss will only work for the current page.
3. In addition, WXSS only supports some CSS selectors

More detailed documentation can be referred to WXSS.

JS logical interaction

It is not enough for a service to display only the interface, but also to interact with the user: respond to the user's clicks, get the user's location, and so on. In the small program, we process the user's actions by writing a JS script file.

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

When we clicked the button button, we wanted to display msg on the interface as "Hello World", so we declared a property on the button: bindtap, which stated the clickMe method in the JS file in response to this click:

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

Responding to a user's actions is as simple as a more detailed event that can be referenced in document WXML - Events.

You can also call the rich APIs provided by small programs in JS, which make it easy to tune the capabilities provided by WeChat, such as getting user information, local storage, WeChat payments, and more. I n the QuickStart example above, wx.getUserInfo is called in pages/index/index.js to get the profile picture and nickname of the WeChat user, and finally displays the information obtained on the interface via setData. More APIs can refer to the API of the documentation gadget.

Through this section, you learn about the types of files involved in small programs and the corresponding roles, and in the next chapter, we'll give "strings" of the files involved in this chapter through the "framework of small programs" to get them all to work.