如何一天开发一个天气小程序？

当我早上醒来时，我不想回忆昨天的温度。我只想知道今天比昨天更热还是更冷。适当增减衣服就可以了。穿衣指数完全不适合我，污染指数也没用。我能不去上班吗？

然后我需要的是一个天气应用，只要告诉我今天和昨天的天气对比就可以了。

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

为一个很少有人用的小程序买一个界面太奢侈了。这一刻，我想到了一个绝妙(愚蠢)的方法：查询完今天的天气后，缓存起来，明天再回头看昨天的天气！

动手吧。

1. 注册小程序

小程序注册入口在https://mp.weixin.qq.com/wxopen/waregister?这里Action=step1填写基本信息后，验证邮箱和微信，即可登录管理后台。

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

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

2. 使用微信开发者工具

微信开发者工具下载https://MP . weixin . QQ . com/debug/wxadoc/dev/devtools/download . html下载后，使用微信扫码打开创建项目，需要填写刚才的AppID。

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

3. 获取位置信息

(注：温和天气支持经纬度天气检查，步骤3为可选步骤)

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

wx . get location({ type : ' WGS84 '，success 3360 function(RES){ var latitude=Res . latitude var经度=Res .经度var speed=Res. speed var精准度=RES .精准度}})但是很多天气查询界面不支持经纬度查询。我们需要按经纬度核对城市名称。这次我们用的是腾讯地图的API。

我们需要的界面是这个页面http://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html中的反转编码器。我们可以通过经纬度得到详细的城市信息，但只需要城市名称。

使用界面，先注册腾讯lbs服务的开发者，用页面右上角的QQ号登录，然后验证手机号，就可以调用界面了。

在小程序中使用之前，在小程序设置界面和开发设置中添加请求的合法域名：http://apis.map.qq.com。

//首先介绍一下微信小程序JavaScript SDK var QQ mapwx=require('././lib/QQMAP-WX-jssdk . min . js’)导入到项目中；//onLoad，实例化API核心类QQ MA PSDK=new QQ MAPWX({ key 3360 ' QLBS开发者密钥' })；//获取城市名称QQMA PSDK。onShow中的反向地理编码器({ Location : { Latitude 3360 Latitude，//使用wx.getLocation 3360经度}的返回值，Success 3360函数(RES){ console . log(RES)；If(res.status==0){ //获取城市名Letcity _ name=RES . result . ad _ info . city；} }，fail:函数(RES){ console . log(RES)；}，complete : function(RES){//console . log(RES)；}});

4. 查询天气

获取城市名称后，使用城市名称查询天气界面，即可获取未来三天的天气预报。

界面使用温和天气的https://www.heweather.com/douments/api/s6/weather-forecast。风和天气界面简单，返回值也用中文描述，可以直接显示。免费版的天气信息就够了。天气界面是要收费的，先用免费界面吧。

同上，使用界面需要注册开发者账号，验证手机。

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

wx . request({ URL : ' https://free-API.heweather.com/S6/weather/forecast',数据3360 {位置3360位置，键3360 '风和天气开发者的键'，rnd :新日期()。getTime() //随机数，请求缓存防止}，Succe:函数(RES){ console . log(RES)；}}})获取天气后，本地缓存，最多只保存两天记录。

5. 美化前端界面

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

用关键词“简易天气app”在谷歌搜索图片，看起来舒服的界面出来，借用配色。

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

完成的界面。

晚上优化代码，12点左右测试，修改了几个问题，提交审核。