天气小程序原来这么简单

今天呢,给大家说一下小程序中如何获取天气,顺手自己做一个天气小程序

本次用到的技术栈主要是: uni-app, uCharts, 和风天气API

我们先看一下效果

我本来打算要用wx的定位,结果我的小程序类目不支持,就只能写死一个经纬度,我现在在西安,就拿西安的经纬度来表示吧。

我们先获取一下当前西安的温度

随后打开和风天气的api,获取城市的温度信息

和风天气要求我们传给他一个经纬度和一个key,看过我之前文章的同学们肯定知道key在哪里获取,我顺便在下面说一下吧

key在和风天气的控制台项目管理里面就可以看到

这样我们两个参数都具备了,我们来请求一下数据并渲染吧

最后在onShow周期里面调用一个getlonglat方法即可

    getlonglat() {        let that = this        // 108.94,34.34        that.getdity('108.94', '34.34', that);        // that.gethour('108.94', '34.34', that);        // that.getliving('108.94', '34.34', that);        // wx.getLocation({        //  type: 'wgs84',        //  success (res) {        //    that.latitude = res.latitude        //    that.longitude = res.longitude        //    that.getdity(res.longitude,res.latitude,that);        //  }        // })      },      getdity(x, y, that) {            let location = `${x},${y}`;        let key = 'a36427c673cd4af4b03954e036e0b46e';        // 调用        wx.request({          url: `https://devapi.qweather.com/v7/weather/now?key=${key}&location=${location}`,          success(res) {            that.temp = res.data.now.temp            that.windDir = res.data.now.windDir            that.windScale = res.data.now.windScale            that.windSpeed = res.data.now.windSpeed            that.text = res.data.now.text          }        })        }

我们来定义一下数据

data() {  return {     wrap_con: '',     temp: null, // 多少摄氏度     windDir: null, // 风向     windScale: null, // 风力等级     text: null // 天气描述 多云  }}

写一下html

这样我们的样子就出来了

随后我打算做一个24小时天气预报的折线图

这个需要使用ucharts了

项目在插件市场中将ucharts插件引入,我们就可以直接使用ucharts的组件了

我们随后在data中将opts和chartData参数

定义好之后,会一直loading,现在就是获取一下24小时的天气预报了

我们这时候写一个方法,需要将该返回的数据进行重组

这里需要将时间信息进行格式化,我也写成一个方法,直接调用

赋值完之后我们的折线图也就出来了

现在,我们再获取一下生活指数,比如今天是否可以运动等信息提示

打开和风天气发现需要多传一个参数type

我们就显示一下运动指数吧

我们先写一个html

随后在data中定义一个living字段

data(){  return {     living: null,  }}

我们看一下接口返回

这样我们的天气小程序就做完了。

以上所有代码,我就放在语雀了,需要参考的可以打开语雀进行详看

https://www.yuque.com/tademanong/ag7q4n/necyg87kg98kxypa?singleDoc# 《制作一个简单的天气小程序》

希望可以帮助到各位同学,感觉对自己有帮助,不要忘了3连(转发,点赞,在看)