1. JSON configuration
JSON is a data format, rather than a programming language. In the Mini Program, JSON is used for static configuration.
The following sections describes how to use app.json and project.config.json in the root directory of the project as well as logs.json in the pages/logs directory.
1.1 app.json for Mini Program Configuration
app.json is used for the global configuration of the Mini Program, setting all the page paths, interface behaviors, network timeouts and bottom tabs. The app.json is configured in the QuickStart project as below:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "TCSAS",
"navigationBarTextStyle":"black"
}
}
Meaning of each configuration item:
The pages field - describes all the page paths of the Mini Program, so that the Weixin app knows the directory where your Mini Program page is defined.
The window field - defines the background color and text color at the top of all pages in the Mini Program.
1.2 project.config.json for Tool Configuration
Usually when you use a tool, you do some personalised configurations for your own preferences, such as compilation configurations, and you have to reconfigure them when you change to another computer and reinstall the tool.
With this in mind, the mini program developer tool generates a project.config.json in the root directory of each project, and any configurations you make on the developer tool are written to this file. When you reinstall the tool or change computers to work on it, you can just load the code package of the same project, and the developer tool will automatically help you restore the personalised configurations to the ones that were used at the time when you were developing the project, which will include the name of the project, the name of the project, and the name of the developer. This will include the name of the project, the option to automatically compress the code when uploading it, and a number of other options.
1.3 page.json for Page Configuration
page.json is used for page-related configuration of the Mini Program, for example, the logs.json under the pages/logs directory.
If you want the entire Mini Program to be blue, you can specify the top color as blue in app.json. However, this may not be the case in reality. You may want to use different colors for different pages to indicate different function modules. Therefore, page.json is provided to allow developers to define the properties of each page separately, such as the top color, the option to enable "Pull Down to Refresh", etc.
1.4 JSON Syntax
Note the following regarding JSON configuration in the Mini Program.
JSON files are wrapped in curly brackets ({}), containing data in the form of key-value pairs. JSON keys must be enclosed in double quotes.
Note：
1. Values in JSON files must be in one of the following data formats. Any other format will trigger an error, such as "undefined" in JavaScript:
Numbers, including floating-point numbers and integers;
Strings enclosed in double quotes;
Booleans with a value of true or false;
Arrays enclosed in square brackets ([]);
Objects enclosed in curly brackets ({});
Null.
2. Also note that JSON files do not support comments. Adding comments will trigger an error.
2. WXML Template
All web page programmers know that web pages are built using HTML, CSS and JavaScript, where HTML describes the structure of the page, CSS determines the appearance of the page, and JS defines the interaction between the page and the user.
Similar roles exist in the Mini Program, where WXML is the equivalent of HTML. By opening pages/index/index.wxml, you will see the following:
<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>
Similar to HTML, WXML consists of tags and properties. However, there are also some differences, shown as below:
1. Tag names are different
div, p and span are three most commonly used tags when writing HTML, which can be combined in different ways to create different components, such as calendars and pop-ups. Since these common components are required in almost all scenarios, we can put them into packages to improve development efficiency.
In the above example, the WXML of the Mini Program uses view, button and text tags. In addition to these native basic capabilities, we also provide packaged component capabilities like map, video and audio.
2. Properties like wx:if and expressions like are added
When developing web pages, we generally manipulate DOM (the tree generated from the description of HTML) with JS to allow the interface to respond to users' behaviors. For example, when a user clicks a button, JS records the states in JS variables and manipulates DOM properties or behaviors via the DOM API to trigger changes in the interface. However, as the project gets more and more complex, your code will be full of interface interaction logic and program state variables, which is not conducive to development. Therefore, the MVVM developer mode (e.g., React, Vue) is created to separate rendering from logic. To put it simply, instead of manipulating DOM directly, JS only needs to manage the states, and describes the relationship between states and interface structure via another template syntax.
This also applies to the framework of the Mini Program. If you want to display the Hello World string in the interface:
Write the WXML as follows:
Use JS to manage the state only:
this.setData({ msg: "Hello World" })
The process that binds a variable to the interface via the syntax is called data binding. Data binding is not enough to describe the relationship between states and interface. Control capabilities such as if/else and for are required, which are expressed with properties that start with wx: in the Mini Program.
3. WXSS Style
WXSS has most of the features of CSS, but incorporates some new features and modifications for the Mini Program.
1. New size unit is added. When writing the CSS style, developers need to convert the pixel units to adapt to different mobile device screens with different widths and pixel ratios. WXSS supports the new rpx unit at its underlying layer, allowing the Mini Program to take over the job from developers and convert the units at the underlying layer. Since the units are converted using floating-point operations, the result may deviate slightly from the expected one.
2. Global and local styles are provided. Similar to the above app.json and page.json, app.wxss can be written as the global style, which applies to all the pages of the Mini Program. The local page style page.wxss only applies to the current page.
3. WXSS only supports certain CSS selectors
Refer to WXSS for more details. 4. JS Logic Interaction
It's not enough for a service to just display the interface. Interaction with users is required, such as responding to user's clicks and obtaining user's location. In the Mini Program, we process user's operations by writing JS scripts.
<view>{{ msg }}</view>
<button bindtap="clickMe">Click me</button>
When a button is clicked, we want to display msg as "Hello World" on the interface. To do this, we declare the bindtap property on the button and the clickMe method in the JS file to respond to this click:
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})