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 Project

Begin by creating a project using the CLI.

$ bmp init weather-app

The ensuing project is constructed within the current directory, observing the following directory layout:

.├── bmp.config│   └── index.js                        // Build configuration├── global.d.ts├── package.json├── src│   ├── app.config.ts                   // App configuration│   ├── app.scss                        // App-global styles│   ├── app.ts                          // App entry│   └── pages│       └── index│           ├── index.config.ts         // Page configuration│           ├── index.scss              // Page-specific styles│           └── index.tsx               // Page component├── tsconfig.json└── yarn.lock

For further details on CLI commands, kindly delve into the CLI documentation.

Configuring the List Page

Proceed by modifying the code of the src/pages/index/index.tsx file as illustrated below:

import React, { Component } from 'react'import { View, Text, Navigator } from '@binance/mp-components'import './index.scss'
export default class Index extends Component {  componentWillMount() {}
  componentDidMount() {}
  componentWillUnmount() {}
  // Triggered when the page is brought to the foreground.  componentDidShow() {}
  // Triggered when the page is hidden in the background.  componentDidHide() {}
  render() {    return (      <View className="page-container">        <Text className="h1">Cities List</Text>        <Navigator className="list-item" url="/pages/detail/index?city=Beijing">          Beijing        </Navigator>        <Navigator className="list-item" url="/pages/detail/index?city=Shanghai">          Shanghai        </Navigator>        <Navigator className="list-item" url="/pages/detail/index?city=Guangzhou">          Guangzhou        </Navigator>        <Navigator className="list-item" url="/pages/detail/index?city=Shenzhen">          Shenzhen        </Navigator>      </View>    )  }}

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 Page

Commence by creating a new folder titled 'detail' within src/pages and generating the file src/pages/detail/index.tsx:

$ mkdir -p src/pages/detail/$ touch src/pages/detail/index.tsx

Include this freshly minted page to src/app.config.ts:

export default {  entryPage: 'pages/index/index',  pages: [    'pages/index/index',    'pages/detail/index', // <- Incorporate this line  ],  window: {    backgroundTextStyle: 'light',    navigationBarBackgroundColor: '#fff',    navigationBarTitleText: 'Title',    navigationBarTextStyle: 'black',  },}

Progress by formulating the code for the detail page that can be achieved by modifying src/pages/detail/index.tsx:

/* Detailed code embedded in the original document. */

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 Code

Implement the subsequent command in your project directory:

$ bmp dev

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 App

Enforce the following command within your project directory:

$ bmp build

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 & Recap

This 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.