Tutorial: Create a weather app by mini program
This article describes how to build a weather mini program from scratch.
We will create a program with multiple pages that call amap's weather api to display the weather conditions for a given city.
#
Create the projectFirst create a project using cli
Our project will be created in the current directory, with the following directory structure
For more CLI commands, please refer to CLI
#
Create the list pageWe modify the code of src/pages/index/index.tsx as follows
As you can see, we're writing it in much the same way as the React page. The difference is that we can't use React-dom components and we need to use components under @binance/mp-components instead. For all available components, see Components.
Also, there are different lifecycle callbacks in page Components than in React, such as componentDidShow() and componentDidHide(). These two callbacks are called when the mini program switches between the front and back of the app. For more description of lifecycle, please refer to LifeCycle.
Finally, our page jump uses the component Navigator, which uses a parameter url as a page route that will point to our detail page. For more information about routing and passing parameters, please refer to Router.
#
Create the detail pageWe create a new folder detail under src/pages and create the file src/pages/detail/index.tsx
and add this page to src/app.config.ts
Then we create the code for the details page by modifying src/pages/detail/index.tsx
We can see that the params are taken from the router through the mpService.getCurrentInstance() method, which is the biggest difference from normal React routing. For more on Router, see Router.
On the other hand, we can't use browser functions like fetch to request remote api, we need to use mpService.request method to request API. For more details, see API.
#
Run the codeWe execute the command in the project directory
By default, devServer listens on the localhost:3000 port and enables liveReload, which automatically refreshes the page when the code changes. Now we can see our weather-app running in the browser at http://localhost:3000/app?name=dist
#
Publish the appWe execute the command in the project directory
The code is compiled and mini-program file is generated in the project directory. Developers can upload this file for online testing through the Management portal. Once the testing is complete, the app can be submitted for review. Once the app has been approved by the administrator, the applet will be searchable and available on the binance app. For more information about submitting for review, please refer to Management
#
SummaryThis tutorial describes how to build a Binance Mini Program project from scratch. In general, developers can basically reuse their own React development process, some page components and logic code to quickly build a small application. However, there are some differences: you can't use dom components and dom operations, you can't use browser APIs like fetch and window.location, and you can't use browser routing. For more extended reading, please refer to the rest of the documentation.