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
|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.
|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
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.
In the above code, the development is done directly in the React way.
Note: Do not use React dom components such asdirectly, for components that can be used, please refer to Componennts.
More features are supported in style file including a new size unit named
#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.
Note: The browser-related web capabilities in the third-party module are also not available, such as dom operations or window.location.