Overview

File Structure

The mini program is divided into app and page layers. App is used to describe the entire application, page is used to describe the individual pages, and there is an optional configuration description of the entire project.

The main part of a Mini Program is composed of three files that must be placed in the project’s root directory:

File	Required	Role
app.js	yes	Mini Program logic
app.json	yes	Common configurations for Mini Program
app.bxss	no	Common style sheet for Mini Program

The page consists of 4 files, which must be the same file name and in the same directory.

File type	Required	Role
js	yes	Page logic
bxml	Yes	Page structure
json	No	Page configuration
bxss	No	Page style sheet

A typical project directory structure is as follows

.└── src/    ├─ app.js    ├── app.json    ├── app.bxss    └── pages/        └── detail/            ├── index.js            ├── index.bxml            ├── index.bxss            └── index.json

Code Structure

The Mini Program framework system includes Logic Layer (App Service) and View Layer (View). The Mini Program provides its own view layer description languages BXML and BXSS, and a logic layer framework based on JavaScript, as well as a data transfer and event system between the view layer and the logic layer, allowing developers to focus on data and logic.

Reactive Data Binding

The reactive data binding system is the core of the framework. It provides an extremely simple way to ensure the synchronization of data and views. To modify data, you simply need to modify the data on the logic layer and it will be updated in the view layer.

Here is a simple example:

Preview with Developer Tool

<!-- This is our View --><view> Hello {{name}}! </view><button bindtap="changeName"> Click me! </button>

// This is our data.var helloData = {  name: 'Binance'}
// Register a Page.Page({  data: helloData,  changeName: function(e) {    // sent data change to view    this.setData({      name: 'World'    })  }})

The developer uses the framework to bind name in the logic layer data to name in the view layer, so Hello Binance! appears once the page opens. When the button is clicked, the view layer sends changeName events to the logic layer, which finds and executes the corresponding event handler. After the callback function is triggered, the logic layer executes setData to change the name in data from Binance to World. Since the data is bound to the view layer, Hello World! is automatically applied to the view layer.

Note: Since the framework does not run in the browser, some of the JavaScript capabilities in the web are not available, such as document, window, etc.

Style File

More features are supported in style file including a new size unit named rpx.

Style Size Unit

rpx(responsive pixel): Self-adaptive size unit according to screen's width.

Screen's width is set to 750rpx by regulation.

For example, on iPhone6, screen's width is 375px with 750 physical pixels, therefore 750rpx = 375px = 750 physical pixels and 1rpx = 0.5px = 1 physical pixel.

Device	rpx to px (screen's width/750)	px to rpx (750/screen's width)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

Suggestion: Designers can use iPhone6 as standard draft when developing Binance Mini Program.

Attention: There are some unavoidable flaws on very small screens.Please avoid this case as possible as you can.

Style Import

You can use the @import statement to import external style sheet. The @import statement should be followed by the relative path of the external style sheet and ends with ;.

Sample code:

/** common.bxss **/.small-p {  padding:5px;}

/** app.bxss **/@import "common.bxss";.middle-p {  padding:15px;}

Third-party NPM Modules

The mini program supports the introduction of third-party modules. You need to install the module by running the following command in the root directory of the project.

$ npm install i18n --save

Note: The browser-related web capabilities in the third-party module are also not available, such as dom operations or window.location.