When I wake up in the morning, I don’t want to think about the temperature yesterday. I just want to know whether today is hotter or colder than yesterday. The dress index doesn’t work for me, the pollution index doesn’t work, so can I just skip work?

So what I need is a weather app that tells me how today’s weather compares to yesterday’s.

It is difficult to find the historical weather interface. I spent several hours searching more than a dozen weather apis at home and abroad. There are few historical weather queries, and some are paid services. There are plenty of free weather forecasts.

It was too expensive to pay for an interface for a small program that few people were using, so I came up with a brilliant (stupid) solution: query today’s weather, cache it, and come back tomorrow to see yesterday’s weather!

No sooner said than done.

1. Register applets

Small program registration entry mp.weixin.qq.com/wxopen/ware here… After filling in the basic information, verify the email and wechat, you can log in to the management background.


After you fill in the name, introduction, and profile picture of the applet on the management background, the applet code is automatically generated.

Remember the AppID(applet ID) you see on the development Settings page.

2. Use wechat developer tools

WeChat developer tools download mp.weixin.qq.com/debug/wxado here… After downloading, open it with wechat scan code and create a project, which needs to fill in the AppID just now.


Assuming you already know the basics of wechat development, the code should have a similar structure.

3. Get location information

(Note: Zephyr weather supports latitude and longitude checking. Step 3 is optional.)

To forecast the local weather, you need to know the location. Wechat mini program wx.getLocation can get latitude and longitude.

wx.getLocation({
  type: 'wgs84',
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy
  }
})
Copy the code

But many weather query interface does not support latitude and longitude query. We need to use latitude and longitude to check the city name, this time using Tencent map API.

The interface we need is this page lbs.qq.com/qqmap_wx_js… ReverseGeocoder, which uses latitude and longitude to get detailed city information, but we only need the city name.

To use the interface, you need to register the developer of Tencent LBS service, log in with QQ number in the upper right corner of the page, verify the phone number, and then you can call the interface.

Before using it in the mini program, add the request domain name apis.map.qq.com to the development Settings page of the mini program.

Var QQMapWX = require('.. /.. /lib/qqmap-wx-jssdk.min.js'); // in onLoad, instantiate the API core class qqmapSDK = new QQMapWX({key: 'QQ LBS developer key '}); // In onShow get the city name qqmapsdK. reverseGeocoder({location: {latitude: latitude, // use the return value wx.getLocation longitude: longitude }, success: function (res) { console.log(res); If (res.status == 0){let city_name = res.result.ad_info.city; } }, fail: function (res) { console.log(res); }, complete: function (res) { // console.log(res); }});Copy the code

4. Check the weather

Get the city name, then use the city name to query the weather interface, get the next three days weather forecast.

The weather interface USES and wind www.heweather.com/douments/ap… . The interface of wind weather is relatively simple, and the return value can be displayed directly with Chinese description. There’s plenty of weather information in the free version. The historical weather interface costs a fee, so we’ll use the free interface first.

As above, to use the interface, you need to register a developer account and verify the phone.

Before you use it in the applet, add request’s legitimate domain name to the Applet Settings screen, development Settings: free-api.heweather.com

wx.request({ url:'https://free-api.heweather.com/s6/weather/forecast', data:{ location:location, key: RND :new Date().getTime() // random number}, success:function(res){console.log(res); }})Copy the code

When you get the weather, you cache it locally. It’s only two days old at most.

5. Spruce up the front end

Designing cool interfaces is a bit difficult for front-end programmers, but the basic aesthetic is still there.

Use the keyword “Simple Weather app” to search for images on Google and get a comfy look. Borrow color matching.

A cute logo was also found in the search results, and it’s free! There is only one requirement, need to show the link of this website when using, because it is a small program, can not be outside the chain, I put the website address in text format, is this www.freepik.com/free-vector… .


Good interface.

In the evening, we optimized the code, tested it around 12 o ‘clock, revised a few problems, and submitted it for review.

6. Test the applet

Even on such a small project, testing is essential. After testing, it is found that the return value of mild weather is the weather array for the next three days. The structure returned by the call on the evening of December 7th is the same as the API, including the weather of [12-7,12-8,12-9].

Wind weather interface test

• Problem 1: However, arR [0] cannot be arbitrarily used as the weather of the day after midnight when the return is still [12-7,12-8,12-9].

• Problem 2: I got up before 8 o ‘clock in the morning, but I didn’t pass the audit, so I tried debugging again. The array returned by this call only has one weather [12-8], but there is today, but not tomorrow or the day after tomorrow. Fortunately, I don’t need it now.

7. Approved

At eight o ‘clock I looked again, the above API problem will not affect the program. An hour later, the audit was approved,

After review, excited to send to friends for trial. Now I find an important problem, if you don’t open one day, the next day there will be no weather yesterday, you need to open it every day! I wish there was a free historical weather interface, even if it was just yesterday’s weather.

If you want to try it, you can search the “weather yesterday” mini program on wechat. If that’s a lot of demand, I might consider buying a paid historical weather interface.

Afterword.

Well, one day remember this small program, can not use…… What’s the difference between you and other weather apps.

Compared with other applications, wechat can directly search the weather, mobile phone also have weather APP, including yesterday’s weather is also a lot of, where is the advantage of small programs? It seems that the path to open the APP is not more complicated than the small program ah!

Author: YUKUN


Original address:
How to use a day to develop a small program – tutorial – small program community – micro channel small program development community – small program development forum – micro channel small program alliance