本文实例为大家分享了微信小程序实现天气预报功能的具体代码，供大家参考，具体内容如下
这个案例是仿UC中天气界面做的中间也有点出入，预留了显示当前城市名字和刷新图标的位置，自己可以写下，也可以添加搜索城市。值得注意的是100%这个设置好像已经不好使了，可以通过获取设备的高度通过数据绑定设置高度。地址：nofollow" target="_blank" href="https://github.com/shuncaigao/Weather">weather
界面主要分为四部分：
第一部分
这里是预留的一块可以自行添加补充下
第二部分：
第三部分：
第四部分：
js
//100%好像不好使 可以获取设备高度
wx.getSystemInfo({
success: function (res) {
that.data.height = res.windowHeight;
}
})
wx.getLocation({
success: function (res) {
//通过经纬度请求数据
wx.request({
//这个网站有免费API赶紧收藏
url: 'http://route.showapi.com/9-5',data: {
showapi_appid: '11697',showapi_sign: '6c0c15c5ec61454dac5288cea2d32881',//
from: '5',lng: res.longitude,lat: res.latitude,//获取一周情况 0是不获取
needMoreDay: '1',needIndex: '1'
},success: function (res) {
console.log(res)
console.log(res.data.showapi_res_body.now.api)
that.setData({
//改变加载状态
loadingHidden: true,currentTemperature: res.data.showapi_res_body.now.temperature,nightAirTemperature: res.data.showapi_res_body.f1.night_air_temperature,dayAirTemperature: res.data.showapi_res_body.f1.day_air_temperature,weather: res.data.showapi_res_body.now.weather,aqi: res.data.showapi_res_body.now.aqi,quality: res.data.showapi_res_body.now.aqiDetail.quality,windPower: res.data.showapi_res_body.now.wind_power,windDirection: res.data.showapi_res_body.now.wind_direction,//拼接数组
list: [
{
'day_weather_pic': res.data.showapi_res_body.f1.day_weather_pic,'weekday': res.data.showapi_res_body.f1.weekday,'day_air_temperature': res.data.showapi_res_body.f1.day_air_temperature,'night_air_temperature': res.data.showapi_res_body.f1.night_air_temperature
},{
'day_weather_pic': res.data.showapi_res_body.f2.day_weather_pic,'weekday': res.data.showapi_res_body.f2.weekday,'day_air_temperature': res.data.showapi_res_body.f2.day_air_temperature,'night_air_temperature': res.data.showapi_res_body.f2.night_air_temperature
},{
'day_weather_pic': res.data.showapi_res_body.f3.day_weather_pic,'weekday': res.data.showapi_res_body.f3.weekday,'day_air_temperature': res.data.showapi_res_body.f3.day_air_temperature,'night_air_temperature': res.data.showapi_res_body.f3.night_air_temperature
},{
'day_weather_pic': res.data.showapi_res_body.f4.day_weather_pic,'weekday': res.data.showapi_res_body.f4.weekday,'day_air_temperature': res.data.showapi_res_body.f4.day_air_temperature,'night_air_temperature': res.data.showapi_res_body.f4.night_air_temperature
},{
'day_weather_pic': res.data.showapi_res_body.f5.day_weather_pic,'weekday': res.data.showapi_res_body.f5.weekday,'day_air_temperature': res.data.showapi_res_body.f5.day_air_temperature,'night_air_temperature': res.data.showapi_res_body.f5.night_air_temperature
},{
'day_weather_pic': res.data.showapi_res_body.f6.day_weather_pic,'weekday': res.data.showapi_res_body.f6.weekday,'day_air_temperature': res.data.showapi_res_body.f6.day_air_temperature,'night_air_temperature': res.data.showapi_res_body.f6.night_air_temperature
},{
'day_weather_pic': res.data.showapi_res_body.f7.day_weather_pic,'weekday': res.data.showapi_res_body.f7.weekday,'day_air_temperature': res.data.showapi_res_body.f7.day_air_temperature,'night_air_temperature': res.data.showapi_res_body.f7.night_air_temperature
}
]})
}
})
}
})
}
})
wxss
.newTopView {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/ 头部样式上半部分/
.topView {
flex-direction: column;
align-self: center;
margin-top: -450rpx;
}
/当前度数样式/
.degreeView {
flex-direction: row;
position: relative;
}
/当前温度度数图标/
.circle {
width: 35rpx;
height: 35rpx;
position: absolute;
left: 130rpx;
}
/当前度数数组/
.degree {
color: white;
font-size: 130rpx
}
/详细View样式/
.detailInfoView {
flex-direction: row;
}
/当前最高和最低温度度数图标/
.detailInfoCircle {
width: 20rpx;
height: 20rpx;
position: absolute;
left: 30rpx;
}
/当前度数数组/
.detailInfoDegree {
color: white;
font-size: 30rpx
}
/斜线/
.detailInfoLine {
color: white;
margin-left: 15rpx;
font-size: 30rpx;
}
/比如阴天 晴天，暴雨/
.detailInfoName {
font-size: 30rpx;
color: white;
margin-left: 20rpx;
align-self: center
}
/中间view样式/
.centerView {
display: flex;
flex-direction: row;
margin-top: -550rpx;
justify-content: center;
align-items: center;
}
/中间view分为两个view/
.centerItem {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
/Item中图片样式/
.centerItemImage {
width: 25rpx;
height: 25rpx;
}
/文字样式/
.centerItemText {
font-size: 28rpx;
color: white;
}
/底部view样式/
.bottomView {
margin-top: -200rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.bottomItemView {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 200rpx;
}
/最近七天样式/
.bottomImage {
width: 70rpx;
height: 70rpx;
}
.bottomText {
font-size: 28rpx;
color: white;
}
PS：
原文链接：/weapp/31450.html