File structure
The MINI program can be divided into two layers, app
and page
layer. app
is used to describe the entire program, while page
is used to describe each page.
app
consists of the following three files, which must be placed in the root directory of the project.:FileRequiredPurposeapp.acssNoMINI program global style sheetapp.jsYesMINI program logicapp.jsonYesMINI program global settingspage
consists the following four types of files:File typeRequiredPurposeacssNoPage style sheetaxmlYesPage structurejsYesPage logicjsonNoPage configuration
All the codes written by the developer will eventually be packaged as a JavaScript script, which runs when the MINI program starts, and is destroyed when the MINI program ends.
Logical structure
The core of the MINI program is a responsive data binding system, which logically can be divided into view layer and logical layer. These two layers are always in sync, that is, if the data is modified at the logical layer, the view layer will display the updates accordingly.
For example:
<!-- View layer -->
<view> Hello {{name}}! </view>
<button onTap="changeName"> Click me! </button>
// Logical layer
var initialData = {
name: 'taobao',
};
// Register a Page.
Page({
data: initialData,
changeName(e) {
// sent data change to view
this.setData({
name: 'mPaaS',
});
},
});
In the above code, the framework automatically binds name
in the logical layer data to the name
of the view layer, so that Hello taobao!
will be displayed when the page opens, and its logic is as follows:
- When the user taps the button, the view layer sends a
changeName
event to the logical layer; - The logic layer finds the corresponding event handler function;
- The logical layer executes the
setData
operation, changingname
fromtaobao
toalipay
. Since the data is already bound to the view layer, the view layer will change toHello alipay!
automatically.
document
, window
.JavaScript can use the es2015 modular syntax to organize the code of logical layer:
import util from './util'; // Load relative path
import absolute from '/absolute'; // Load files in the project root directory
Third-party NPM module
The MINI program supports importing third-party NPM modules. Firstly, execute the following command in the root directory of the MINI program to install the module:
$ npm install lodash --save
Once the third-party NPM module is installed, it can be used directly in the logical layer:
import lodash from 'lodash'; // Load third-party npm module
node_modules
does not pass through the converter, the code under node_modules
should be converted to es5 format before referencing in order to ensure compatibility on each terminal. It is recommended to use the import/export of es2015 as the module format. In addition, browser-related Web capabilities are also unavailable.