In the last chapter, we have quickly created a project named QuickStart through the developer's tool. You will notice that different types of documents have been created in this project:

1. JSON configuration file with a .json suffix
2. WXML template file with a .wxml suffix
3. WXSS style file with a .wxss suffix
4. JS script logic file with a .js suffix

Next, let's take a look at the application of the following 4 files.

# JSON configuration

We can see the root directory of the project has an app.json and project.config.json. In addition, there is a logs.json under the pages/logs directory. Let me show you their applications respectively.

# Mini Program configuration app.json

The app.json a global configuration for current Mini Program, which includes all of its page paths, interface performance, network timeouts, and bottom tab. The app.json configuration in the QuickStart project appears as follow:

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

Let's briefly explain the meaning of each item in this configuration:

1. pages field - used to describe all page paths of the current Mini Program, the purpose of which is to tell Weixin client at which directory your current Mini Program page is defined.
2. window field - defines the color of the background, text, etc. on the top of all pages of Mini Program.

Please refer to document Configuration app.json of Mini Program for other details.

# Tool configuration project.config.json

Usually, when using a tool, Users will make personalized configuration according to their own preference, e.g., interface color, compile configuration, etc. When switching to another computer and re-installing the tools, users have to re-configure.

Considering this, Mini Program developer toolkit will generate a project.config.json in the root directory of each project. Any configuration made on the tool will be written to this file. When you re-install tools or switch to another computer for work, all you need to do is to load a code package of the same project. The developer toolkit will automatically restore to the personalized configuration when the project was being developed, including color of the editor and a set of options such as automatic code compression when uploading.

Please refer to the Configuration of Developer Toolkit documentation for more configuration details.

# Page configuration page.json

The page.json mentioned here is used to indicate such Mini Program page related configuration as logs.json in the pages/logs directory.

If you want to use blue hue for your entire Mini Program, you can specify in app.json that you want the color of the top to be blue. But you can find it does not match reality - you may want different hue to separate different functional modules on each page of the Mini Program. Therefore, page.json is provided, enabling developers to independently define the attributes of each page, e.g., the above-stated color of the top, permission to scroll down or refresh, etc.

Please refer to the Page Configuration documentation for more configuration details.

# WXML template

Those who have done web page programming know that it adopts such combination as HTML + CSS + JS, where the HTML is used to describe the structure of the current page; the CSS is to describe the appearance of the page; while the JS is to process interaction between the page and its users.

Likewise, similar roles exist in Mini Program, where WXML acts as the role of HTML. Opening the pages/index/index.wxml, you will see the following content:

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> Acquire profile photo and nickname </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>

Similar to HTML, WXML is comprised of labels and attributes, etc. However, there are also many differences. Let's specify them one by one:

1. The name of the label is somewhat different

   The frequently used label is usually div, p, span when writing HTML. When writing a page, these basic labels can be combined in different ways to create different components, such as calendar, pop-up windows, etc. Alternatively, since people need these components, why can't we package these frequently used components to greatly improve the efficiency of our development.

   In the example described above, view, button, and text are used for WXML of Mini Program. These tags are provided as basic capabilities for developers. We also offer component capabilities such as map, video and audio.

   For detailed information about components, refer to Next Chapter Mini Program capabilities

2. There are more attributes such as wx:if and expressions such as

   In general web page development process, we usually use JS to operate DOM (the tree generated through descriptions of corresponding HTML), so that we can create some variations of the interface to respond to users' behaviors. For example, when a user taps a button, the JS will record some status into the JS variables; in the meantime, the DOM API will operate the DOM attributes or behaviors to create further variations of the interface. When the project gets more complex, codes will be full of interface interactive logic and various state variables of the program, which obviously is not a good developer mode. Therefore, the MVVM developer mode (e.g., React, Vue) is created to separate rendering from logic. To simply put it, the purpose is to not let JS manipulate DOM directly; it is good enough to have JS manage the state only and then use a template syntax to describe the relationship between state and the interface structure.

   It also applies to the framework of Mini Program. If you want to display Hello World string in the interface,

   WXML writes like:

   <text>{{msg}}</text>
   

   Use JS to manage the state only:

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

   Use syntax to bind a variable in the interface, which is called Data Binding. Using Data Binding is not enough to describe the relationship between state and interface. You also have to use if/else, for control capabilities, which can be expressed with an attribute that starts with wx:

   Please refer to the WXML documentation for details.

# WXSS Style

The WXSS possesses the majority of features of the CSS, and Mini Program has done some expansion and revision on the WXSS.

1. New unit of size is added. When writing the CSS style, the developer needs to consider the differences in the width and pixel ratio of the mobile device's screen and use certain techniques to convert some units of the pixel. WXSS supports the new unit of size rpx at its bottom layer, therefore, the developer can be exempted from the trouble of conversion, which can be done by the bottom layer of Mini Program. Given float operation is adopted in the conversion, the result will be slightly away from the expected one.

2. The global and local styles are provided. Like the above app.json and page.json concept, you can write an app.wxss as the global style, which will function in all of the pages of the current Mini Program. The local page style page.wxss only has effect on the current page.

3. In addition, the WXSS only supports some of the CSS selector

Please refer to the WXSS documentation for details.

# JS interactive logic

A mere display of the interface is not enough for a service, which also needs interactions with the user: response to users' tapping, obtaining the user location, etc. In the Mini Program, we process users' operation by compiling JS scripts.

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

When a button is tapped, we want the msg to be appeared as "Hello World" on the interface. Therefore, we declare an attribute on the button: bindtap, and also declare in the JS document that the clickMe method can respond to this tap:

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

Responding to the users' operation is as simple as such. Please refer to document WXML - Event for details.

In addition, you can also call a wide range of APIs provided by Mini Program in the JS; Using these API allows you to have Weixin features, such as obtaining user information, local storage, WeChat Pay, etc. In the previous QuickStart example, wx.getUserInfo is called in pages/index/index.js to obtain the profile photo and nickname of Weixin user. Ultimately, the obtained information is displayed onto the interface through setData. Please refer to the Mini Program APIs documentation for more information about APIs.

Through this section, you have gained knowledge of the document types and the corresponding roles they play concerning Mini Program. In the next section, we will integrate all documents in this section through the framework of Mini Program to make them work.