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 project

First create a project using cli

$ bmp init weather-app

Our project will be created in the current directory, with the following directory structure

.├── 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 styles│           └── index.tsx               // page component├── tsconfig.json└── yarn.lock

For more CLI commands, please refer to CLI

Create the list page

We modify the code of src/pages/index/index.tsx as follows

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 displayed to the foreground.  componentDidShow() {}
  // Triggered when the page is hidden to 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 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 page

We create a new folder detail under src/pages and create the file src/pages/detail/index.tsx

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

and add this page to src/app.config.ts

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

Then we create the code for the details page by modifying src/pages/detail/index.tsx

import React, { Component } from "react";import mpService from "@binance/mp-service";import { View, Text, Button } from "@binance/mp-components";
interface IState {  city: string;  temperature: string;  windpower: string;  humidity: string;}
export default class Detail extends Component<any, Partial<IState>> {  constructor(props) {    super(props);    this.state = {      city: "",      temperature: "",      windpower: "",      humidity: "",    };  }
  componentWillMount() {}
  componentDidMount() {    const { getCurrentInstance } = mpService;    const router = getCurrentInstance().router;    if (router) {      const { city } = router.params;      if (city) {        this.requestForData(city);      }    }  }
  componentWillUnmount() {}
  componentDidShow() {}
  componentDidHide() {}
  requestForData(city: string) {    if (!city) return;
    mpService.setNavigationBarTitle({ title: `Weather App - ${city}` });
    const map = {      Beijing: "北京",      Shanghai: "上海",      Guangzhou: "广州",      Shenzhen: "深圳",    };    const cityCode = map[city!];
    mpService.request({    url: `https://restapi.amap.com/v3/weather/weatherInfo?city=${cityCode}&key=f4fd5b287b6d7d51a3c60fee24e42002`    }).then((res) => {      const dataJson = res.data;      const { temperature, windpower, humidity } = dataJson.lives[0];      this.setState({        city,        temperature: `${temperature}°`,        windpower: windpower,        humidity: `${humidity}%`,      });    });  }
  render() {    const { city, temperature, windpower, humidity } = this.state;    return (      <View>        <Text style={{ fontSize: 32 }}>          {city}        </Text>        <Text>{temperature}</Text>        <Text>Wind Power: {windpower}</Text>        <Text>Humidity: {humidity}</Text>        <Button onClick={() => mpService.navigateBack()}>          GoBack        </Button>      </View>    );  }}

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 code

We execute the command in the project directory

$ bmp dev

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 app

We execute the command in the project directory

$ bmp build

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

Summary

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