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.
File | Mandatory | Function |
app.js | Yes | Mini Program logic. |
app.json | Yes | Mini Program global configuration. |
app.acss | No | Mini Program global style sheet. |
The page consists of four file types:
File type | Mandatory | Function |
js | Yes | Page logic. |
axml | Yes | Page structure. |
acss | No | Page style sheet. |
json | No | Page 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.
// 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.