Getting Started with WeChat Mini Programs: Hefeng Weather Mini Program

"Mobile Software Development" Experiment 2

1. Experimental objectives

1. Master server domain name configuration and temporary server deployment;

2. Master the usage of wx.request interface.

2. Experimental steps

1. Preparations for using Zefeng Weather API

1.1 API key application

Register on Hefeng Weather Development Platform

Hefeng Weather Development Platform ~ Efficient and powerful weather API, weather SDK and weather plug-in (qweather.com)

After registration, in the application management of the console, create an application

and get the KEY

1.2 API call method

Development version: https://devapi.qweather.com/v7/weather/now?[request parameters]

The parameters are as follows. When using multiple parameters, they are connected with &&

To obtain the weather conditions in Beijing:

https://devapi.qweather.com/v7/weather/now?location=101010100&key=your KEY

For request URL and format, please refer to Hefeng Official Development Documentation for details

Real-time weather- API | Hefeng Weather Development Platform (qweather.com)

The return type is a key-value pair in json format. Also refer to the development documentation and select the one you need;

1.3 Server domain name configuration

Before the applet communicates with the specified domain name address, the domain name address needs to be added to the white list of the administrator background;

Therefore, https://devapi.qweather.com needs to be configured as a server.

Log in to mp.weixin.qq.com to enter the administrator background for configuration

2. Project creation

2.1 Get an empty item

Delete the logs path in app.json in the created project, delete the logs folder and its content wxml content, etc., refer to the previous step for details;

2.2 Import material

This time we will use Japanese style icon material, so it needs to be imported into the applet directory first

Weather Icons - RESOURCE | Zephy Weather Development Platform (qweather.com)

Go to the Hefeng platform to download the icons resource package first, and you can download the icons compressed package under GitHub, which is more convenient;

3. View design

3.1 Navigation bar design

The navigation bar needs to be designed in app.json:

3.2 Interface design

The design requirements are as follows:

The design of the page is as follows

The picker component is used here to select the city;
then design the weather text, icons, detailed information, etc.:

Then design the details

Three custom styles are used, which must also be defined in wxss;

wxss design and display effect:

3.3 Logic Design

3.3.1 Update the information of provinces and cities

Declare the region variable in data in index.js and assign the initial value;

Write a function regionChange to modify the region variable;

Bind it to the picker;

Realize the effect:

3.3.2 Update weather information in real time

Write a function for obtaining weather information, use the Zephyr weather API, and call it in the lifecycle function Onload and the custom function regionChange, respectively, to initialize and refresh data when switching cities;

Implementation of getWeather:

In the call of Onload and regionChange:

To obtain the weather information of a city, you need to obtain the locationID. The regionChange obtains the city name, so you need to call the API to obtain the locationID. For details on how to use the API, refer to the official documentation.

City Information Query- API | Hefeng Weather Development Platform (qweather.com)

The domain name needs to be added to the development platform

https://geoapi.qweather.com

To prevent duplicate names, introduce a parameter adm

The function written to get locationID:

First obtain the locationID and then call getWeather through the locationID to obtain the local weather. There will be a problem of asynchronous wx.request here , which is explained in detail in item 3 of the problem summary and experience;

The modified getlocationID is as follows:

Modified function call:

3.3.3 Update page weather information

Declare the now array in the data of the page

Replace all temporary data on WXML pages with { {now.XXX}}

The function works fine:

3. Program running results

Initial state:

Switch city:

After switching:

Effect display: (GIF)

4. Problem summary and experience

1. Display "The logged-in user is not the developer of the Mini Program", resulting in problems such as inability to debug on the real machine

At the same time, this caused me to fail when calling the API, after all, the appid I used was wrong. . . The server domain name set before is useless.

Solution: Modify the appid in the file

It was solved after modification, and I don’t know why this appid was used when creating it;

2. When using this method to call the API, the error data code is returned: "400"

The location in the official document should be locationID, while the one given in the tutorial may be Chinese characters;

This is indeed the case after testing, and the locationID can be returned normally

So you need to get the locationID from the picker

Solution: Use the city query interface of Zefeng Weather

So you need to get the locationID from the picker

Solution: Use the city query interface of Zefeng Weather

3. The two functions are executed out of order

I hope to obtain the locationID first and then use the obtained locationID to obtain the weather information of the region, but the actual implementation is just the opposite, which may cause errors in the update;

**Solution: **Because wx.request is asynchronous, use Promise packaging to achieve sequential execution;

Successfully resolved: