Structure of a Mini Program Code

In the previous chapter, we used the developer tool to quickly create a Mini Program project. You may have noticed that the project contains various types of files:

1. JSON configuration files with a .json extension
2. DLT template files with a .dlt extension
3. CSS style files with a .css extension
4. JS script logic files with a .js extension

Let's take a closer look at the purposes of these four types of files.

JSON Configuration

JSON is a data format, not a programming language. In a Mini Program, JSON serves as a role for static configuration.

You may have noticed that there's an app.json in the root directory of the project, and there's also an index.json in the pages/index directory. Let's explain their purposes one by one.

Mini Program Configuration - app.json

app.json is the global configuration file for the current Mini Program. It includes all page paths, UI styles, network timeout settings, bottom tabs, etc. Here's an example of app.json configuration:

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

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

• pages field: This field describes all the page paths of the current Mini Program, allowing the host client to know where your Mini Program pages are defined.
• window field: This defines the top background color of all pages in the Mini Program, text color, and more.

You can find more details about other configuration items in the documentation: Mini Program Configuration - app.json.

Page Configuration - page.json

The page.json file represents the configuration related to pages, such as index.json in the pages/index directory.

If your entire Mini Program has a blue color scheme, you can declare the top color as blue in app.json. However, in practice, your Mini Program's pages might each have different color schemes to distinguish different functional modules. To accommodate this, the page.json file allows developers to define individual properties for each page, such as top color, whether pull-down refresh is allowed, etc.

You can find more details about page configuration in the documentation: Page Configuration.

JSON Syntax

Let's discuss some considerations for JSON configuration in Mini Programs.

JSON files are enclosed in curly braces {} and use a key-value approach to express data. JSON keys must be enclosed in double quotes. While writing JSON, remember to use double quotes for keys, as single quotes or missing quotes for keys are common mistakes.

JSON values can only be of the following types; any other format will trigger an error, similar to JavaScript's undefined:

1. Numbers, including floating-point and integers
2. Strings, enclosed in double quotes
3. Boolean values: true or false
4. Arrays, enclosed in square brackets []
5. Objects, enclosed in curly braces {}
6. Null

Also, it's important to note that you cannot use comments in JSON files. Attempting to add comments will result in an error.

DLT Templates

For those familiar with web programming, you know that web programming combines HTML, CSS, and JS. HTML defines the structure of a page, CSS styles it, and JS handles interactions between the page and users.

Similarly, in Mini Programs, these roles are fulfilled by DLT templates, CSS, and JS. When you open pages/index/index.dlt, you'll see the following content:

<view class="pd16 case">
  <view
    class="bg-white br4 case-item"
    :data-appid="item.appId"
    :data-path="item.path"
    s-for="item in caseList"
    bind:tap="openOtherMiniapp"
  >
    <image class="icon" :src="'/images/' + item.icon + '.png'" />
    <text class="title">{{item.title}}</text>
  </view>
</view>

DLT templates are similar to HTML with tags, attributes, and more. However, there are some differences:

1. Different tag names.

In HTML, commonly used tags include div, p, and span. You can use these basic tags to create various components, such as calendars or pop-ups. In Mini Programs, similar roles are played by tags like view, image, and text. These tags provide basic capabilities, and Mini Programs also offer components like sliders and videos.

2. Introducing attributes like s-if and expressions {{ }}.

In web development, you often use JavaScript to manipulate the DOM (the tree generated from HTML). This manipulation triggers changes in the UI based on user actions. Mini Programs employ a similar approach but extend it with features such as s-if for conditional rendering and {{ }} for expressions. These expressions bind variables to the UI, and we call this data binding. Additionally, Mini Programs support control

attributes like s-if, s-else, and s-for.

Mini Program CSS Styles

Mini Program CSS supports most features of native CSS, but with some extensions and modifications.

1. Introduction of new units. When writing traditional CSS, you need to consider the screen width and device pixel ratio of various mobile devices. Mini Program CSS introduces a new unit called rpx that simplifies unit conversion. You don't need to worry about conversions; just let the underlying system handle it. Keep in mind that due to floating-point calculations, there might be slight deviations from the expected results.

2. Global and local styles. Similar to the concepts of app.json and page.json, you can create a app.css file for global styles that affect all pages in the Mini Program, and page.css for styles specific to a particular page.

JS Logic Interaction

A service needs more than just UI display; it requires interaction with users. In Mini Programs, we use JavaScript to handle user actions.

<view>{{ msg }}</view> <button bind:tap="clickMe">Click Me</button>

When the button button is clicked, we want to change the displayed msg to "Hello World." We declare the bind:tap attribute on the button to bind it to the clickMe method in the JS file:

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

Responding to user actions is as simple as this. For more detailed event handling, refer to the documentation: DLT - Events.

You can also use a rich set of APIs provided by Mini Programs. These APIs allow you to leverage various capabilities offered by MiniApp, such as accessing system information, local storage, and network requests. For more APIs, refer to the documentation: Mini Program API.

In this chapter, you've gained an understanding of the file types involved in a Mini Program and their corresponding roles. In the next chapter, we'll connect the concepts covered in this chapter using the "Mini Program Framework" and make them work together.