Overview

File structure

A miniapp is divided into two layers: app and page. The app layer describes the entire application, and the page layer describes individual pages. All code written by a developer is packaged into a single JavaScript script. This script runs when the miniapp starts and is destroyed when the miniapp closes.

• The app layer consists of three files. These files must be in the project's root directory.

  File	Required files	Function
  app.acss	No	Global style sheet for the miniapp.
  app.js	Yes	Logic for the miniapp.
  app.json	Yes	Global configuration for the miniapp.

• The page layer consists of four types of files:

  File type	Required Files	Function
  acss	No	Style sheet for the page.
  axml	Yes	Structure of the page.
  js	Yes	Logic for the page.
  json	No	Configuration for the page.

Logical structure

The core of a miniapp is a reactive data binding system. It consists of a view layer and a logic layer. These two layers are always in sync. When you change data in the logic layer, the view layer updates automatically.

Consider the following simple example.

<!-- View layer -->
<view> Hello {{name}}! </view>
<button onTap="changeName"> Click me! </button>

// Logic layer
var initialData = {
  name: 'taobao',
};

// Register a page
Page({
  data: initialData,
  changeName(e) {
    // Change the data
    this.setData({
      name: 'mPaaS',
    });
  },
});

In the code, the frame automatically binds the name property in the logic layer's data to the name property in the view layer. When the page opens, it displays Hello taobao!.

When a user clicks the button, the view layer sends a changeName event to the logic layer. The logic layer finds the corresponding event handler function. The logic layer runs the setData operation. This changes the value of name from taobao to mPaaS. Because this data is bound to the view layer, the view automatically updates to display Hello mPaaS!.

JavaScript in the logic layer uses the ES2015 module syntax to organize code:

import util from './util'; // Import from a relative path
import absolute from '/absolute'; // Import a file from the project root directory

Third-party NPM modules

Miniapps support third-party modules. To install a module, run the following command in the miniapp's root directory:

$ npm install lodash --save

After installation, you can use the module directly in the logic layer:

import lodash from 'lodash'; // Import a third-party NPM module