怎样用一天时间，开发上架一个天气小程序，淘宝宝贝下架时间查询

来源：未知 浏览 256次 时间 2021-06-14 14:01

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

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

怎样用一天时间，开发上架一个天气小程序

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

说干就干。

怎样用一天时间，开发上架一个天气小程序

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

在开发设置页面可以看到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 。

做好的界面。

6. 测试小程序

标签： 接口程序res天气

上一篇: 微信小程序通过java后台传的ID值进入不同页面，微信小程序怎么后台
下一篇: 微信公众号seo排名技术:太原SEO公司解密 SEO技术，seo网站推广方案

热门文章

最新文章

QQ咨询