推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：504
-
2020-05-12 浏览：500
怎样用一天时间，开发上架一个天气小程序
发布时间:2020-11-05早上醒来，我不愿意回想昨天温度多少度，只想要知道今天比昨天热还是冷，适当增减衣服就行了。穿衣指数什么的根本不适合我，污染指数也没啥用，难道我能不上班嘛？
那么我的需求就是有个天气应用，告诉我今天和昨天天气对比就行了。
历史天气接口不好找，我花了几个小时搜了国内外十几个天气API，很少有历史天气查询，有的也是付费服务。免费天气预报接口倒是很多。
为一个没有几个人用的小程序付费购买接口太奢侈了，这时想到一个绝妙的（笨）方法：查询到今天天气以后，缓存起来，明天再来看就有昨日天气了！
说干就干。
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.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy } })但是天气查询的接口很多都不支持经纬度查询。我们需要用经纬度查城市名，这次使用腾讯地图的API。
我们需要的接口就是这个页面 中的 reverseGeocoder，用经纬度可以获取详细的城市信息，但是我们只需要城市名就可以了。
要使用接口，先要注册腾讯lbs服务的开发者，页面右上角用QQ号登录，然后验证手机号，然后就可以调用接口了。
在小程序中使用前，要在小程序设置界面，开发设置中添加request合法域名： 。
// 先在项目中引入微信小程序JavaScript SDK var QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js'); // onLoad中，实例化API核心类 qqmapsdk = new QQMapWX({ key: 'QQ lbs 开发者密钥' }); // 在 onShow 中获取城市名 qqmapsdk.reverseGeocoder({ location: { latitude: latitude, // 使用 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); } }); 4. 查询天气得到城市名后，再用城市名查询天气的接口，得到未来三天天气预报。
天气接口使用和风天气 https://www.heweather.com/douments/api/s6/weather-forecast 。和风天气的接口比较简洁，返回值也有中文描述可以直接显示。免费版的天气信息足够多。历史天气接口需要付费，我们先用免费的接口。
同上，要使用接口，需要先注册开发者账户，验证手机。
在小程序中使用前，要在小程序设置界面，开发设置中添加request合法域名： 。
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” 在 Google 搜图片，出来的看起来舒服的界面，借用一下配色。
搜索结果中还发现一个可爱的logo，还是免费的！只有一条要求，需要在使用时展示这个网站的链接，因为是小程序，不能外链，我放了文本格式的网站地址，就是这个 https://www.freepik.com/free-vector/simple-weather-app_874144.htm 。
做好的界面。
晚上又优化了一下代码，还在12点前后做了测试，修改了几个问题，就提交审核了。
6. 测试小程序