Mobile Platform as a Service:Overview

File structure

The mini program can be divided into two layers, app and page layer. app is used to describe the entire program, while page is used to describe each page.

• app consists of the following three files, which must be placed in the root directory of the project.

  File	Required	Purpose
  app.acss	No	Mini program global style sheet
  app.js	Yes	Mini program logic
  app.json	Yes	Mini program global settings

• page consists the following four types of files:

  File type	Required	Purpose
  acss	No	Page style sheet
  axml	Yes	Page structure
  js	Yes	Page logic
  json	No	Page configuration

  Note

  For the convenience of developers, these four files must have the same path and file name.

  All the codes written by the developer will eventually be packaged as a JavaScript script, which runs when the mini program starts, and is destroyed when the mini program ends.

Logical structure

The core of the mini program is a responsive data binding system, which logically can be divided into view layer and logical layer. These two layers are always in sync, that is, if the data is modified at the logical layer, the view layer will display the updates accordingly.

For example:

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

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

// Register a Page.
Page({
  data: initialData,
  changeName(e) {
    // sent data change to view
    this.setData({
      name: 'mPaaS',
    });
  },
});

In the above code, the framework automatically binds name in the logical layer data to the name of the view layer, so that Hello taobao! will be displayed when the page opens, and its logic is as follows:

1. When the user taps the button, the view layer sends a changeName event to the logical layer;

2. The logic layer finds the corresponding event handler function;

3. The logical layer executes the setData operation, changing name from taobao to alipay. Since the data is already bound to the view layer, the view layer will change to Hello alipay! automatically.

JavaScript can use the es2015 modular syntax to organize the code of logical layer:

import util from './util'; // Load relative path
import absolute from '/absolute'; // Load files in the project root directory

Third-party NPM module

The mini program supports importing third-party NPM modules. Firstly, execute the following command in the root directory of the mini program to install the module:

$ npm install lodash --save

Once the third-party NPM module is installed, it can be used directly in the logical layer:

import lodash from 'lodash'; // Load third-party npm module