Overview
#
FrameworkMini 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 StructureThe 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
#
Code StructureThe 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.
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 FileMore features are supported in style file including a new size unit named rpx
.
#
Style Size Unitrpx(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 ModulesThe 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.
Note: The browser-related web capabilities in the third-party module are also not available, such as dom operations or window.location.