1. Preliminary preparation

1.1picker component

Picker is a scrolling selector component that pops up from the bottom. Currently, 5 types of selectors are supported according to the value of the mode attribute. They are ordinary selectors, multi-column selectors, time selectors, date selectors, and provincial/city selectors. . If the mode value is omitted, the default effect is a normal selector.

Insert picture description here

In addition to the above-mentioned general attributes, picker has different attributes for different modes.
This small program mainly uses the province/city selector effect when mode='region' (the minimum version is 1.4.0)

Insert picture description here

1.2 Network API

Hefeng Weather: Provided API interface
Make url according to relevant code prompt and interface information of website,
return to WeChat public platform, add server domain name

Steps:
(1) Search for "Hefeng Weather Official Website" on Baidu
Insert picture description here
(2) Click to enter the official website --> Click Weather API to register --> After successful registration, log in to the console --> Click Application Management, and select New Application (write the name as you like)- ->Add key (type select Web API)

Click to enter the official website
Insert picture description here
Click on the weather API to register

Insert picture description here

Log in to the console after successful registration

Insert picture description here
Click Application Management, select New Application

Insert picture description here
Add key (type selection Web API)

and record the key

(3) Get the small weather icon: Click on the development document -> Reference material -> Weather code and icon -> Click on the picture to package and download to the desktop -> Unzip (extract only the picture below _MACOSX) to the project's images file

(4) Get weather information: select the API of the document --> select regular weather data
Request URL:
free version: https://free-api.heweather.net/s6/weather/{weather-type}? {parameters}

Commercial version https://api.heweather.net/s6/weather/now?location=beijing&key=xx

Insert picture description here

We use the free version, for example to query Beijing data:
https://free-api.heweather.net/s6/weather/now?location=beijing&key=
01db9ba239584d93878c71dbf77956f3

(5) Log in to the WeChat public platform: development -> development settings -> server domain name -> scan code login -> set request legal domain name
Insert picture description here

2. Code implementation

The code defined in app.json is as follows

Insert picture description here

The code in index.wxml is as follows

Insert picture description here

The code in index.wxss is as follows The code in

index.js is as follows

Insert picture description here

3. Function introduction

Bind the event bindchange in the picker component. When the event is triggered, the changeRegion function will be executed and an event object event will also be received.
Insert picture description here

When the changeRegion function in index.js is executed, the original value of the region variable defined in index.wxml will be changed, and the weather function getWeather() will be called to update the weather

Insert picture description here
The exclusive API interface wx.request provided by WeChat is called in the weather function to make network requests
. The attributes in wx.request are as follows

Insert picture description here
The URL is required, and the requested network interface address
data is the request parameter. According to the actual parameters of the requested interface, the
success function is passed as the callback function when the call is successful. At this time, an object value is generally passed in for us to use.

Therefore, at this time, you can fill in the url address of the gentle weather that we obtained before, the required parameters location and key, the key is the key we got when we created the application
Insert picture description here
res is the object passed to us when the callback function is called successfully, and it is output in the console first. Take a look, at this time, modify the variable value now in data in the function, and then modify the value of each variable defined in index.wxml according to the attribute of now

Insert picture description here

Calling the getWeather function in the onLoad function means that the getWeather function will be called every time the page is refreshed, which avoids the situation where the variable now brought by the page refresh is empty when the picker component is not used to trigger the event, so that the page data cannot be loaded.

Insert picture description here