Framework

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.

The page consists of four file types:

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

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, 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'
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:

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