index.wxml:
<view class="container">
<image class='bgi' mode='aspectFill' src='../../images/bg1.png'></image>
<view class='body'>
<view class='header'>
<image src='{{nowWeatherImg}}'></image>
<view>
<text style='font-size:80rpx;'>{{cityname}}</text>
<text class='txtaph'>{{weekday}}</text>
<text class='txtaph'>{{weahterinfo}}</text>
</view>
</view>
<view class='section'>
<text>{{nowtemp}}</text>°C
</view>
<view class='ari-qulity'>
<text>空气质量:<text>{{pmvalue}}</text></text>
</view>
<view class='weather-detail'>
<view>
<text>风向:{{winddir}}</text>
<text>体感温度: {{feeltmp}}°C</text>
</view>
<view>
<text>风力:{{windsc}}级</text>
<text>相对湿度: {{hum}}</text>
</view>
</view>
<view class='forecast'>
<block wx:for="{{forecastData}}">
<view>
<image style='width:120rpx; height:120rpx;' mode='aspectFit' src='../../images/140.png'></image>
<view>
<text>{{item.date}}</text>
</view>
<view>
<text>{{item.cond_txt_d}}</text>
</view>
<view>
<text>{{item.tmp_min}}°C ~ {{item.tmp_max}}°C</text>
</view>
</view>
</block>
</view>
</view>
</view>
index.wxss:
page {
width: 100%; height: 100%;
font-family: 'Comic Sans MS', cursive;
position: relative;
}
.container{
width: 100%;
height: 100%;
padding: 0;
}
.bgi{
width: 100%; height: 100%;
display: block;
position: absolute;left: 0;top: 0;
}
.body{
width: 100%;height: 100%;
position: absolute;left: 0;top: 0;
}
.body .header{
margin-top: 50rpx;
display: flex;
justify-content: center;
align-items: flex-end;
}
.body .header view{
display: flex;
flex-direction: column;
}
.body .header image{
width: 160rpx; height: 160rpx;
}
.body .header text{
color: white;
}
.header view .txtaph{
color: rgb(255, 255, 255);
}
.section {
color: rgba(255,255,255, 0.7);
font-size: 220rpx;
text-align: center;
}
.ari-qulity {
text-align: center;
}
.ari-qulity>text {
background: #A5CE1B;
border-radius: 8rpx;
color: white;
padding: 5rpx 15rpx;
}
.weather-detail {
margin: 30rpx auto;
width: 590rpx;
padding: 10rpx 30rpx;
background: rgba(255,255,255,0.2);
border-radius: 25rpx;
color: rgba(255,255,255, 0.7);
}
.weather-detail>view>text{
display: inline-block;
width: 50%;
}
.forecast {
margin: 50rpx auto;
width: 650rpx;
background: rgba(255,255,255,0.2);
border-radius: 25rpx;
display: flex;
justify-content: space-around;
font-size: 30rpx;
text-align: center;
color: rgba(255,255,255, 0.7);
padding: 15rpx 0;
}
index.js:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
nowWeatherImg: "../../images/131.png",
cityname: "北京",
weekday: "星期二",
weahterinfo: "暴雨",
nowtemp: 17,
pmvalue: 50,
winddir: '随便', //风向
windsc: 'X', //风力
feeltmp: 10, //体感温度
hum: 30, //相对湿度
forecastData: [null, null, null]
},
onLoad: function () {
let that = this;
this.setData(wx.getStorageSync('data'));
//利用Promise这个类,将3个异步方法,按照顺序执行
this.getLocation().then(this.getCity).then(this.getWeatherInfo).then(this.getForecast);
},
getForecast: function () {
let that = this;
return new Promise(function (done) {
console.log("天气预查");
wx.request({
url: 'https://free-api.heweather.com/s6/weather/forecast?location=' + that.data.cityname + '&key=1790454674ca4af890312094cec23c95',
success: function (res) {
console.log("天气预查");
that.setData({
forecastData: res.data.HeWeather6[0].daily_forecast
})
}
})
});
},
getLocation: function () {
return new Promise(function (done) {
//第一步, 使用微信获取地理位置(经纬度)
wx.getLocation({
type: 'wgs84',
success: function (res) {
//取出经纬度
let latitude = res.latitude;
let longitude = res.longitude;
//发出消息,表示已完成,并把获取的结果发出去
done(latitude + "," + longitude);
}
});
});
},
getCity: function (data) {
return new Promise(function (done) {
//第二步, 向腾讯发起网络请求,提交经纬度,并获取所在城市信息
wx.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + data + '&key=WV7BZ-IPMK2-PSLU2-C63EH-7FBMF-TTBX3',
success: function (locinfo) {
//获取到城市名称
let cityname = locinfo.data.result.address_component.city;
//发出消息,表示已完成,并把获取的结果发出去
done(cityname);
}
});
});
},
getWeatherInfo: function (data) {
let that = this;
return new Promise(function (done) {
//第三步, 向和风发起网络请求,提交城市信息,获取天气预报
wx.request({
url: 'https://free-api.heweather.com/s6/weather/now?key=1790454674ca4af890312094cec23c95&location=' + data,
success: function (weatherinfo) {
console.log(weatherinfo);
//修改页面上的信息
that.setData({
cityname: weatherinfo.data.HeWeather6[0].basic.location,
weahterinfo: weatherinfo.data.HeWeather6[0].now.cond_txt,
weekday: weatherinfo.data.HeWeather6[0].update.loc,
nowWeatherImg: "../../images/" + weatherinfo.data.HeWeather6[0].now.cond_code + ".png",
nowtemp: weatherinfo.data.HeWeather6[0].now.tmp,
winddir: weatherinfo.data.HeWeather6[0].now.wind_dir,
windsc: weatherinfo.data.HeWeather6[0].now.wind_sc,
feeltmp: weatherinfo.data.HeWeather6[0].now.fl,
hum: weatherinfo.data.HeWeather6[0].now.hum
});
wx.setStorageSync('data', that.data);
done();
}
})
//请求空气质量
wx.request({
url: 'https://free-api.heweather.com/s6/air/now?location=' + data + '&key=1790454674ca4af890312094cec23c95',
success: function (airqulity) {
let pm25 = airqulity.data.HeWeather6[0].air_now_city.pm25;
console.log(pm25);
that.setData({
pmvalue: pm25
})
}
})
});
}
})