WeChat mini-program development-"micro-weather" tutorial (I)

Abstract: In the amount of smart phone software installed, weather forecasting apps rank first. It indicates that users are very concerned about the weather. Because people need to arrange their work, vacation, and other activities according to the natural weather. Follow this article to develop a "micro-weather" applet to help users view the weather at any time. Abstract: In the amount of smart phone software installed, weather forecasting apps rank first. It indicates that users are very concerned about the weather. Because people need to arrange their work, vacation, and other activities according to the natural weather. Follow this article to develop a "micro-weather" applet to help users view the weather at any time.

Introduction: Weather forecast apps rank top in smartphone software installation volume. It indicates that users are very concerned about the weather. Because people need to arrange their work, vacation, and other activities according to the natural weather. Follow this article to develop a "micro-weather" applet to help users view the weather at any time.
In the next two days, I will develop a mini-weather program with you. This article will first introduce you to the "micro-weather" API and interface code writing. This article is based on learning small program development from scratch.

In a software system, a small program is usually used as a front-end, and usually requires support from a back-end system, which requires developers (or operators) purchase an ECS instance (or have its own independent host) and deploy the backend system on it. For many beginners, these conditions are not easily met. But we can choose to use the online free API interface. developers only need to write the front-end system (small program) and directly call these free APIs in the front-end system to obtain the corresponding data.

1. weather forecast API

To develop a weather forecast APP, you must first consider the source of the weather forecast data. The data source of the weather forecast can be displayed in the applet as needed. In fact, the applet is a front-end system that displays weather information, and the weather forecast API is a back-end system. Since the weather forecast API can be obtained online for free, in this case, developers do not need to develop backend systems, but only need to access them according to the API requirements.

Weather forecast interface of chinazawa

The weather forecast interface address of chinamaphin is as follows:
Wthrcdn.etouch.cn/weather_mini? City = Beijing
This interface is very simple. you only need to give the city name. The data returned by the interface is also in JSON format, as shown below:

{"Desc": "OK", "status": 1000, "data": {"wendu": "15", "ganmao": "large temperature difference between day and night, it is easy to catch a cold. Please increase or decrease your clothes as appropriate. If you are physically weak, pay attention to protection. "," Forecast ": [{" fengxiang ":" Beifeng "," fengli ":" Grade 3-4 "," high ":" high temperature 14 ℃ "," type ": "Clear", "low": "low temperature 3 ℃", "date": "Saturday 19" },{ "fengxiang": "no sustained wind direction", "fengli ": "Breeze level", "high": "high temperature 4 ℃", "type": "Sleep", "low": "low temperature-1 ℃", "date ": "Sunday 20" },{ "fengxiang": "Beifeng", "fengli": "Grade 3-4", "high": "high Temperature 0 ℃", "type ": "Xiao Xue", "low": "low temperature-7 ℃", "date": "Monday 21" },{ "fengxiang": "Bei Feng", "fengli ": "3-4", "high": "high temperature-3 ℃", "type": "Clear", "low": "low temperature-9 ℃", "date ": "Tuesday 22" },{ "fengxiang": "no sustained wind direction", "fengli": "breeze level", "high": "high temperature-3 ℃ ", "type": "multi-cloud", "low": "low temperature-10 ℃", "date": "Wednesday 23"}], "yesterday": {"fl ": "Breeze", "fx": "No continuous wind direction", "high": "high temperature 10 ℃", "type": "haze", "low ": "Low temperature 6 ℃", "date": "Friday 18"}, "aqi": "40", "city": "Beijing "}}

We can see that there are a lot of JSON data returned, including the temperature wendu of the day, ganmao of the cold description, and the weather data stored in the forecast array for the last five days, and yesterday's weather data stored in yesterday.

2. interface design

This case requires that the interface be simple. try to display the current weather and the weather in the last five days on a page, and also provide the function of querying by city name, the weather forecast information of the city to be queried is displayed. The uidesign is as follows.
(4) modify the display title, open the app. json file, and modify it to the following content:

{"Pages": ["pages/index", "pages/logs"], "window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor ": "# fff", "navigationBarTitleText": "Micro-weather", "navigationBarTextStyle": "black "}}

2. Compile the interface code

According to the uidesign, open the index. wxml file, delete the original content of the file, and enter the following wxml code.

   
    
      
       
   
    
{City }}( {today }})
       
       
   
    
{Weather. wendu} ℃
       
       
   
    
{Weather. ganmao }}
         
    
    
      
   
    
     
Yesterday
    {Weather. yesterday. date }}
       
   
    
{Weather. yesterday. type }}
    {Weather. yesterday. fx }}
    {Weather. yesterday. fl }}
    {Weather. yesterday. low }}
    {Weather. yesterday. high }}
        
     
  
 

     
        
         
   
    
{Item. date }}
         
         
   
    
{Item. type }}
         
         
   
    
{Item. high }}
         
         
   
    
{Item. low }}
         
         
   
    
{Item. fengxiang }}
         
         
   
    
{Item. fengli }}
       
    
 

 
      
      
  Query  
 

The preceding wxml code adds comments. each part is described in the comments.

3. Compile the interface style code

After the preceding wxml code is saved, the UI effect in the UI design drawing is not displayed in the preview area on the left side of the development tool. To achieve the design layout, you need to write style code to control the wxml component. In fact, in the preceding wxml code, the class attribute has been set for each component. Next, you only need to write the corresponding style code for each class in index. wxss. the specific code is as follows:

. Content {height: 100%; width: 100%; display: flex; flex-direction: column; font-family:, box; box-sizing: border-box; padding: 20rpx 10rpx; color: #252525; font-size: 16px; background-color: # F2F2F8;}/* weather information of the day */. info {margin-top: 50rpx; width: 100%; height: 160px;}/* City name */. city {margin: 20rpx; border-bottom: 1px solid #043567;}/* day temperature */. temp {font-size: 120rpx; line-height: 130rpx; text-align: center; padding-top: 20rpx; color: #043567;}/* cold description */. weather {line-height: 22px; margin: 10px 0; padding: 0 10px;}/* weather information of yesterday */. yesterday {width: 93%; padding: 20rpx; margin-top: 50rpx; border-radius: 10rpx; border: 1px solid #043567;}/* yesterday's */. yesterday-title {color: red;}/* weather information for the last five days */. forecast {width: 100%; display: flex; margin-top: 50rpx; align-self: flex-end;}/* weather information for each day */. next-day {width: 20%; height: interval RPX; text-align: center; line-height: 30px; font-size: 14px; margin: 0 3rpx; border: 1px solid #043567; border-radius: 10rpx;}/* Date */. date {margin-bottom: 20rpx; border-bottom: 1px solid #043567; color: # F29F39;}/* search region */. search-area {display: flex; background: # f4f4f4; padding: 1rem 0.5rem;}/* search the input box of the area */. search-area input {width: 70%; height: 38px; line-height: 38px; border: 1px solid # ccc; box-shadow: inset 0 0 10px # ccc; color: #000; background-color: # fff; border-radius: 5px;}/* search area button */. search-area button {width: 30%; height: 40px; line-height: 40px; margin-left: 5px ;}

In the preceding wxss code, each class has corresponding comments before it is set, which can correspond to the wxml code.
After saving the index. wxss file, you can see the following interface in the preview area on the left side of the development tool.

The above is the details of the "micro-weather" tutorial (1) for mini-program development. For more information, see other related articles in the first PHP community!