wether.html5.qq.com,怎样用一天时间，开发上架一个天气小程序

早上醒来，我不愿意回想昨天温度多少度，只想要知道今天比昨天热还是冷，适当增减衣服就行了。穿衣指数什么的根本不适合我，污染指数也没啥用，难道我能不上班嘛？

那么我的需求就是有个天气应用，告诉我今天和昨天天气对比就行了。

历史天气接口不好找，我花了几个小时搜了国内外十几个天气API，很少有历史天气查询，有的也是付费服务。免费天气预报接口倒是很多。

为一个没有几个人用的小程序付费购买接口太奢侈了，这时想到一个绝妙的(笨)方法：查询到今天天气以后，缓存起来，明天再来看就有昨日天气了！

说干就干。

1. 注册小程序

在管理后台填写小程序名称、介绍和头像，会自动生成小程序码。

在开发设置页面可以看到AppID(小程序ID)，记住这个 AppID。

2. 使用微信开发者工具

假设你已经知道了微信开发的基础，代码应该有类似的结构。

3. 获取位置信息

(注：和风天气支持经纬度查天气，第3步是可选步骤)

要预报当地天气，需要知道位置，微信小程序有 wx.getLocation 可以获取经纬度。

wx.getLocation({

type: 'wgs84',

success: function(res){

var latitude = res.latitude

var longitude = res.longitude

var speed = res.speed

var accuracy = res.accuracy

}

})

4. 查询天气

使用经纬度查天气的接口，得到未来三天天气预报。

天气接口使用和风天气 https://www.heweather.com/douments/api/s6/weather-forecast 。和风天气的接口比较简洁，返回值也有中文描述可以直接显示。免费版的天气信息足够多。历史天气接口需要付费，我们先用免费的接口。

同上，要使用接口，需要先注册开发者账户，验证手机。

在小程序中使用前，要在小程序设置界面，开发设置中添加request合法域名： http://free-api.heweather.com 。

wx.request({

url:'https://free-api.heweather.com/s6/weather/forecast',

data:{

location:location,

key: '和风天气开发者密钥',

rnd:new Date().getTime() // 随机数，防止请求缓存

},

success:function(res){

console.log(res);

}

})

拿到天气以后在本地做缓存，最多只存两天的记录就可以了。

5. 美化前端界面

对前端程序员来说，设计酷炫的界面有点难，但是基本的审美还是有的。

用关键词 “simple weather app” 在搜索引擎搜图片，出来的看起来舒服的界面，借用一下配色。

搜索结果中还发现一个可爱的logo，还是免费的！只有一条要求，需要在使用时展示这个网站的链接，因为是小程序，不能外链，我放了文本格式的网站地址，就是这个 https://www.freepik.com/free-vector/simple-weather-app_874144.htm 。

做好的界面。

晚上又优化了一下代码，还在12点前后做了测试，修改了几个问题，就提交审核了。

6. 测试小程序

就算是这么小的项目，测试也必不可少。

经过测试发现和风天气的返回值，是未来三天的天气数组，12月7日晚上调用返回的结构与API一样，包含了[12-7,12-8,12-9]的天气。

和风天气接口测试

问题1：但是过了午夜12点以后，返回的仍然是[12-7,12-8,12-9]，就不能随便的使用 arr[0] 当作今日天气了。

问题2：早上起床不到8点，看审核还没通过，再调试一次看看，这次调用返回的数组只有一个天气[12-8]，倒是有今天了，明天后天是没有的，好在我现在还不需要。

7. 审核通过

八点又看了一下，上面的API问题不会影响程序。一个小时以后，审核通过了，

审核后，兴奋的发给朋友试用。现在才发现一个重要的问题，如果哪天没打开，第二天就没有昨日天气了，需要每天都打开一次！真希望有免费的历史天气接口啊，哪怕只有简化的昨日天气也行啊。

如果你想试用，可以在微信搜“昨日天气”小程序。如果这个需求很多，可能我会考虑买付费的历史天气接口。

后记

对比各家费用后，买了心知天气的付费接口，现在线上的版本已经去掉缓存这部分了，直接调用接口可以查询昨天的天气。

相关链接