The Mini Program is divided into two layers:
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.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:
|acss||No||Page style sheet|
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.
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
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
Mini Program. Since the logic layer and view layer are already bound, the displaying of the view layer automatically changes to
Hello Mini Program!.
For the logic layer js, the codes can be organized through the es2015 modular syntax:
#Reserved Names for Module
Mini Program regards some object names in browser such as
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:
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:
#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:
After the installation, it can be used directly in the logic layer:
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.