Overview

Framework#

Mini program currently support development using React. The framework automatically translates React components and logic into a format supported by the mini program. The development currently supports Typescript, which can be mixed with Javascript.

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 app consists of two files that must be placed in the same directory

File	Required	Role
app.jsx / app.tsx	yes	App logic
app.config.js / app.config.ts	yes	App global settings

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

File type	Required	Role
jsx / tsx	yes	Page logic
config.js / config.ts	No	Page configuration

The build configuration is bmp.config.js or bmp.config/index.js, which is placed in the root of the project and is used to control the build parameters or set the build flow with webpack-chain. For details, please refer to Configuration.

All code written by the developer will be compiled and packaged for uploading to the mini program backend, and then sent to the app runtime to run. All build results and libs needed will be placed in the .bmp directory in the root directory. This directory should be set in gitignore.

A typical project directory structure is as follows

.├── .bmp/├── bmp.config/│ └── index.js└── src/    ├─ app.tsx    ├── app.config.ts    └── pages/        ├─ detail/        │ ├── index.tsx        │ └── index.config.ts        └── list.tsx

Code Structure#

The core of the mini program is the React component, and developers can use the full React development approach. Note: The biggest difference with web development is that mini program does not support refs and dom operations with React, but all other React features can be used.

Example code.

import React, { useState } from "react";import { View, Text, Button } from "@binance/mp-components";import ". /index.scss";
export default function Index() {  const [count, setCount] = useState(0);
  return (    <View      <Text>count: {count}</Text>      <Button        onClick={() => {          setCount(count + 1);        }}      >        +1      </Button>    </View>.  );}

In the above code, the development is done directly in the React way.

Note: Do not use React dom components such as

directly, for components that can be used, please refer to Componennts.

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.

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.