Understand the Mini Program File Structure

Overview

This section uses Todo program demo as an example to introduce the file structure of Mini Program and the role of each file type in the Mini Program.

Directory Structure

Let’s know about the overall directory structure of Mini Program from the following notes

assets          // Store various static resources, such as images
components      // Custom component directory of Mini Program
  --add-button  // Here we defined a component called add-button
pages           // All pages included in the Mini Program are placed under “pages”, one folder per page
  --add-todo    // Mini Program page
  --Todos       // Mini Program page
app.js          // Here some global service logic is configured for the Mini Program, such as global method and global variables
app.acss        // Global style configuration, here the styles take effect on every page
app.json        // Some basic configuration info for the Mini Program pages, such as page path

json

The json file is used to setup Mini Program configuration. For example, the app.json includes the related configuration of the whole Mini Program.

// app.json

{
  "pages": [
    "pages/todos/todos",    
    "pages/add-todo/add-todo"
  ],
  "window": {
    "defaultTitle": "Todo App",
    "titleBarColor": "#323239"
  }
}

1. The pages attribute is an array. Each string in the array defines the page path of the Mini Program. In the demo of todo list, two directories are configured externally. It is required to add these page configuration after you adding some pages.

2. The defaultTitle configuration in the window defines the title in the navigation bar of the Mini Program: "Todo App". The titleBarColor specifies the navigation bar's background color as hexadecimal color value.

For other configurations of the app.json file, click here.

The above-mentioned json file includes the global json configurations. Each page or component has related json configuration to specify the component dependence and so on. Click here.

axml

Generally, the axml can be regarded as the html of the Mini Program, which differs from the html in terms of:

1. Different tags. For example, Mini Program uses  to replace .

2. The types of tags supported by axml are fewer than html.

3. The axml tag has its own parsing syntax to realize traverse, conditional judgment and other advanced operations. The html only includes static tags.

<view class="todo-item {{completed ? 'checked' : ''}}">
  {{number}}
</view>

In axml, the format like {{ }} is used to render variables or execute simple operation. For example, the “completed” above is a  ternary operation. When the “completed” is true, the class is rendered as “todo-item checked” or just ”todo-item”.

The {{number}} variable shows the results accordingly after rendering as per the assignment.

acss

The acss extends the css capability while supporting most of the css syntax. In contrast to css, the major differences are:

1. Supporting rpx unit calculation

2. Import acss in other path using @import

3. For more details, click here.

js

The js file is used to describe the code logic. Each page needs a js file to describe the logic of the current page. The following codes are used for the illustration simply.

// pages/todos/todo.js
const app = getApp();
Page({
  data: {},
  onLoad() {},
  onTodoChanged(e) {}
});

The Page class is the constructor of the page, and should be written during the lifecycle of each page.

1. data

• The data object is considered as the axml rendering context. Simply put, if the data has a name with attribute 'Mini Program', the corresponding axml file can use the form {{name}} to read 'Mini Program'. When the setData method is used to make change in “data”, the data in axml changes in real time.

2. onLoad

• When this page is initialized at the first time by the user, this function is called.

3. onTodoChanged (user customized function)

• This is a user-customized method. The user can defines more custom functions to implement more capabilities.

In the above contents we have known about the function of each file type in the Mini Program. Next, we will explain Todo App demo in details.