Applet Code Structure

1.Json Configuration

JSON is a data format, not a programming language. In mini programs, JSON plays the role of static configuration.

We can see that there is an app.json and project.config.json in the root directory of the project. In addition, there is a logs.json in the pages/logs directory. Let's explain their uses one by one.

1.1Mini Program Configuration app.json

app.json is the global configuration of the current mini program, including all page paths, interface performance, network timeout, bottom tab, etc. of the mini program.

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

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

• pages field: used to describe all page paths of the current mini program, so that the host client knows which directory your mini program page is currently defined in.
• Window field: defines the top background color of all pages of the mini program, text color definition, etc.

For details of other configuration items, please refer to the document Mini Program Configuration app.json

1.2Tool Configuration project.config.json

Usually, when people use a tool, they will make some personalized configurations according to their preferences, such as compilation configuration. When you change to another computer and reinstall the tool, you have to reconfigure it.

Considering this, the Mini Program developer tool will generate a project.config.json in the root directory of each project. Any configuration you make on the developer tool will be written to this file. When you reinstall the tool or change the computer to work, you only need to load the code package of the same project, and the developer tool will automatically help you restore to the personalized configuration when you developed the project, including a series of options such as project name, automatic compression when uploading code, etc.

1.3Page configuration page.json

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

If the style of your entire Mini Program is blue, then you can declare the top color to be blue in app.json. In actual situations, each page may have different tones to distinguish different functional modules, so we provide page.json, so that developers can independently define some properties of each page, such as the top color just mentioned, whether to allow pull-down refresh, etc.

For details of other configuration items, please refer to the document Page configuration

1.4JSON syntax

Here are some notes on JSON configuration in Mini Programs.

JSON files are all wrapped in curly braces {}, and express data in a key-value format. The key of JSON must be wrapped in double quotes. In practice, when writing JSON, it is a common mistake to forget to add double quotes to the key value or write double quotes as single quotes.

TIP

1.JSON values

• Numbers, including floating point numbers and integers;
• Strings, which need to be wrapped in double quotes;
• Bool values, true or false;
• Arrays, which need to be wrapped in square brackets [];
• Objects need to be wrapped in curly braces {};
• Null

2.It is also important to note that comments cannot be used in JSON files. Trying to add comments will trigger an error.

2.WXML template

Those who have engaged in web programming know that web programming uses a combination of HTML + CSS + JS, where HTML is used to describe the structure of the current page, CSS is used to describe the appearance of the page, and JS is usually used to handle the interaction between the page and the user.

Similarly, there are the same roles in mini programs, and WXML plays a role similar to HTML. Open pages/index/index.wxml, and you will see the following content:

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

Very similar to HTML, WXML consists of tags, attributes, etc. But there are also many differences. Let's explain them one by one:

1.The tag names are different

When writing HTML, the tags that are often used are <div>, <p>, <span>. When developers write a page, they can combine different components based on these basic tags, such as calendars, pop-ups, etc. Change your thinking. Since everyone needs these components, why can't we package these commonly used components to greatly improve our development efficiency.

From the above example, you can see that the tags used in the mini program's WXML are view, button, text, etc. These tags are the basic capabilities that the mini program has packaged for developers. We also provide map, video, audio and other component capabilities.

2.There are more attributes like wx:if and expressions like {{ }}

In the process of opening a web page, we usually use JS to operate DOM (corresponding to the tree generated by the HTML description) 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 in the JS variable, and manipulate the properties or behaviors of DOM through the DOM API, thereby causing some changes in the interface. When the project is getting 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 a MVVM development model (such as React, Vue), which advocates the separation of rendering and logic. Simply put, don't let JS directly manipulate DOM. JS only needs to manage the state, and then use a template syntax to describe the relationship between the state and the interface structure.

The framework of the mini program also uses this idea. If you need to display a Hello World string on the interface.

WXML needs to be written like this:

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

JS only needs to manage the state:

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

Binding a variable to an interface through the {{ }} syntax is called data binding. Data binding alone is not enough to fully describe the relationship between the state and the interface. Control capabilities such as if/else and for are also required. In the mini program, these control capabilities are expressed using attributes starting with wx:.

For more detailed documents, please refer to WXML syntax reference

3.WXSS style

WXSS has most of the features of CSS, and the mini program has also made some expansions and modifications to WXSS.

1. Added size units When writing CSS styles, developers need to consider that the screens of mobile devices have different widths and device pixel ratios, and use some techniques to convert some pixel units. WXSS supports the new size unit rpx at the bottom layer, so developers can avoid the trouble of conversion and just let the mini program bottom layer do the conversion. Since the conversion uses floating point operations, the calculation results will be slightly different from the expected results.
2. The global and local styles provided are the same as the concepts of app.json and page.json above. You can write an app.wxss as a global style, which will apply to all pages of the current applet. The local page style page.wxss will only take effect on the current page.
3. In addition, WXSS only supports some CSS selectors.

For more detailed documents, please refer to Rendering layer-WXSS

4.JS logic interaction

It is not enough for a service to only display the interface, it also needs to interact with the user: respond to user clicks, obtain user locations, etc. In the applet, we handle user operations by writing JS script files.

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

When the button is clicked, we hope to display the msg on the interface as 'Hello World', so we declare an attribute on the button: bindtap, and declare the clickMe method in the JS file to respond to this click operation:

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

Responding to user operations is so simple, for more detailed events, please refer to the document Rendering layer-event