#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.

    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.

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

    // Logic layer 
    var initialData = {
      name: 'AppContainer'
    // Register a Page.
      data: initialData,
      changeName(e) {
        // sent data change to view
          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:

    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:

    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:

    import { window as myWindow } from './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:

    $ npm install lodash --save

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

    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.