All Products
Search
Document Center

Overview

Last Updated: Feb 05, 2021

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.

structure

  • 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:

  1. <!-- View layer -->
  2. <view> Hello {{name}}! </view>
  3. <button onTap="changeName"> Click me! </button>
  1. // Logical layer
  2. var initialData = {
  3. name: 'taobao',
  4. };
  5. // Register a Page.
  6. Page({
  7. data: initialData,
  8. changeName(e) {
  9. // sent data change to view
  10. this.setData({
  11. name: 'mPaaS',
  12. });
  13. },
  14. });

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.
Note: Since the framework is not running in the browser, some of JavaScript’s capabilities applicable to the Web are not available here, such as document, window.

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

  1. import util from './util'; // Load relative path
  2. 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:

  1. $ npm install lodash --save

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

  1. import lodash from 'lodash'; // Load third-party npm module
Note: Since the third-party module code in node_modules does not pass through the converter, the code under node_modules should be converted to es5 format before referencing in order to ensure compatibility on each terminal. It is recommended to use the import/export of es2015 as the module format. In addition, browser-related Web capabilities are also unavailable.