Tutorial: Create a weather app by mini program
This comprehensive tutorial guides you through constructing a dynamic weather mini-program from the ground up.
We aspire to create a program housing several pages that solicits Amap's weather API to exhibit weather conditions pertaining to a selected city.
#
Establishing the ProjectBegin by creating a project using the CLI.
The ensuing project is constructed within the current directory, observing the following directory layout:
For further details on CLI commands, kindly delve into the CLI documentation.
#
Configuring the List PageProceed by modifying the code of the src/pages/index/index.tsx
file as illustrated below:
As you can observe, we're crafting this in a manner similar to a React page. The principal difference is that we can't utilize React-dom components and must resort to components under "@binance/mp-components" instead. For a comprehensive list of available components, please visit Components.
Additionally, page Components house lifecycle callbacks that deviate from standard React norms, such as componentDidShow()
and componentDidHide()
. These duo callbacks are triggered as the mini program alternates between the app's foreground and background. For an in-depth understanding of lifecycle, please refer to LifeCycle.
Finally, our page transition utilizes a component known as Navigator that deploys a parameter 'url' as a page route, guiding us to the detail page. For additional insights on routing and parameter transmission, kindly refer to Router.
#
Crafting the Detail PageCommence by creating a new folder titled 'detail' within src/pages
and generating the file src/pages/detail/index.tsx
:
Include this freshly minted page to src/app.config.ts
:
Progress by formulating the code for the detail page that can be achieved by modifying src/pages/detail/index.tsx
:
As you must've noticed, parameters can be drawn from the router courtesy of the mpService.getCurrentInstance()
method. This notable diversion from ordinary React routing calls for a clearer understanding of Router, which you can achieve through Router.
Contrarily, you can't rely on browser functions such as 'fetch' to request remote APIs, instead, it's necessary to employ the mpService.request
method. For a comprehensive insights bag, please explore API.
#
Testing The CodeImplement the subsequent command in your project directory:
By default, devServer
tunes to the localhost:3000
port and triggers liveReload
, which is designed to automatically refresh the page following any code modifications. You can now behold your functional weather-app in your browser at http://localhost:3000/app?name=dist
.
#
Deploying the AppEnforce the following command within your project directory:
Subsequently, the code is compiled and the mini-program file is crafted within your project directory. Developers have the liberty to upload this file for online testing through the Management portal. Following the testing phase, the app can be proposed for review. Post-administrator approval, the applet becomes searchable and accessible on the Binance app. For more insights into submitting for review, please refer to Management.
#
Conclusion & RecapThis tutorial guided you through the structured process of building a Binance Mini Program project from the ground up. Generally, developers can majorly repurpose their existing React development process, page components, and logic code to swiftly create a compact application. Key points of deviation include the non-availability of DOM components and operations, browser APIs like fetch and window.location, and also browser routing. For an extended and comprehensive understanding, we invite you to explore the remaining parts of the documentation.