File Structure

The mini program includes two layers: “app” and “page”. “App” is used to describe the entire application, and “page” is used to describe each page.

The app consists of three files, which must be placed in the root directory of the project.

page consists of four types of files, namely:

Note: For the convenience of developers, we stipulate that these four files must have the same path and file name.

All the code written by the developer will eventually be packaged into a “JavaScript” script, which will run when the mini program starts, and be uninstalled when the mini program closes.

Logical Structure

The core of mini program is a responsive data binding system, which includes presentation layer and a logical layer. The two layers are always in sync. As long as the data is modified in the logical layer, the presentation layer will be updated accordingly.

Take a look at this simple example below.

<!-- 视图层 -->
<view> Hello {{name}}! </view>
<button onTap="changeName"> Click me! </button>
// 逻辑层
var initialData = {
    name: 'taobao',
};
// 注册一个页面
Page({
    data: initialData,
    changeName(e) {
        // 改变数据
        this.setData({
            name: 'mPaaS',
        });
    },
});

In the above code, the framework automatically binds the “name” in the logical layer with that in the presentation layer. Therefore, when the page is opened, it will display “Hello taobao!”.

When users click the button,the presentation layer will send an event of “changeName” to the logical layer, which will find the corresponding event processing function. The logical layer performed the “setDat”operation and changed the name from taobao to mPaaS. Because the data and the presentation layer have been bound, the presentation layer will automatically change from the presentation layer to “Hello mPaaS!”.

Note: Because the framework does not run in the browser, some functions of “JavaScript” in the web cannot be used including“document”, “window” and other objects.

The es2015 modular syntax can be used in the logical layer “js” to organize the code :

import util from './util'; // 载入相对路径
import absolute from '/absolute'; // 载入项目根路径文件

The third-party NPM module

Mini program supports the importing of the third module, and you need to execute the following command in the root directory of the mini program to install the module:

npm install lodash --save

You can directly use it in the logical layer after importing:

Note: Since the code of the third-party module of “node_modules” will not be converted, in order to ensure its compatibility with various terminals, the code under “node_modules” needs to be converted into “es5” format before its reference. Theimport/export of es2015 is recommended for module format. At the same time, browser-related function of web cannot be used either.