Overview

    #File Structure


    The Mini Program is divided into two layers: app and page. The app describes the whole program; the page describes the individual pages.


    The app consists of three files and must be placed in the root directory of the project.

    FileMandatoryFunction
    app.jsYesMini Program logic
    app.jsonYesMini Program global configuration
    app.acssNoMini Program global style sheet


    The page consists of four file types:

    File typeMandatoryFunction
    jsYesPage logic
    axmlYesPage structure
    acssNoPage style sheet
    jsonNoPage configuration


    Note: For the convenience of developers, we specify these four files must have the same path and filename. All the codes written by the developer will eventually be packaged into a JavaScript script which runs when Mini Program start and is destroyed when Mini Program finish running.


    #Logic Structure


    The core of Mini Program is a responsive data binding system, composed of the view layer and logic layer. The two layers keep always synchronous. Whenever the data is modified in logic layer, the view layer is updated accordingly.


    See the following simple example.


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


    copy
    // Logic layer 
    var initialData = {
      name: 'AppContainer'
    };
    // Register a Page.
    Page({
      data: initialData,
      changeName(e) {
        // sent data change to view
        this.setData({
          name: 'Mini Program'
        })
      }
    });


    In the above codes, the framework automatically binds the name in the logic layer to the name in the view layer, so whenever the page is opened, it displays Hello AppContainer!


    When the user presses the button, the view layer sends the changeName event to the logic layer. The logic layer finds the corresponding event handler. The logic layer executes the setData operation, changing the name from AppContainer to Mini Program. Since the logic layer and view layer are already bound, the displaying of the view layer automatically changes to Hello Mini Program!.


    Note: Since the framework does not work in the browser, some web capabilities of JavaScript cannot be used, such as the document and window objects.


    For the logic layer js, the codes can be organized through the es2015 modular syntax:


    copy
    import util from './util'; // Loading relative path
    import absolute from '/absolute'; // Loading project root directory path


    #Reserved Names for Module


    Mini Program regards some object names in browser such as window, document as reserved names for future use. The reserved names include globalThis, global, AlipayJSBridge, fetch, self, window, document, location, XMLHttpRequest. Please do not use these names for module name, or the module can not be used normally. For example:


    copy
    import { window } from './myWindow'
    console.log(window) // undefined


    The above codes show that if using the reserved name as the module name, the imported module will be undefined. So you should not use these reserved names or rename the module name by using as when importing the module. For example:


    copy
    import { window as myWindow } from './myWindow'
    console.log(myWindow)


    #Third-party NPM Module


    The Mini Program supports introduction of the third-party module. It is required to firstly run the following command to install the module in the Mini Program root directory:


    copy
    $ npm install lodash --save


    After the installation, it can be used directly in the logic layer:


    copy
    import lodash from 'lodash'; // Loading the third-party npm module


    Note: Since the third-party module in the node_modules does not go through the converter, for the compatibility in various terminals, the codes in the node_modules should be converted into the es5 format before using. For the module format, it is recommended to use the import/export of es2015. Meanwhile, the browser related capabilities of the browser cannot be used either.