开发一个微信小程序(7)：查询天气-添加热门城市
前面查询天气时，都是在输入框输入城市名，然后点击查询触发请求
本篇添加一下热门城市，点击城市后能够显示该城市的天气状况
拆解一下接下来要做的事情：
（1）前端页面中需要列出热门城市；
（2）点击热门城市后，当前城市高亮，同时触发请求，显示所选城市天气；
1、前端添加热门城市
<view style="margin-top: 40rpx;margin-left: 20rpx;"><text>热门城市：</text></view>
<view class="cards">
<view class="{{id=='1'?'choose':'cards__item'}}" bindtap="hotcitywwather" data-city="广州" data-id="1">广州</view>
<view class="{{id=='2'?'choose':'cards__item'}}" bindtap="hotcitywwather" data-city="北京" data-id="2">北京</view>
<view class="{{id=='3'?'choose':'cards__item'}}" bindtap="hotcitywwather" data-city="深圳" data-id="3">深圳</view>
<view class="{{id=='4'?'choose':'cards__item'}}" bindtap="hotcitywwather" data-city="南京" data-id="4">南京</view>
<view class="{{id=='5'?'choose':'cards__item'}}" bindtap="hotcitywwather" data-city="武汉" data-id="5">武汉</view>
<view class="{{id=='6'?'choose':'cards__item'}}" bindtap="hotcitywwather" data-city="杭州" data-id="6">杭州</view>
<view class="{{id=='7'?'choose':'cards__item'}}" bindtap="hotcitywwather" data-city="成都" data-id="7">成都</view>
<view class="{{id=='8'?'choose':'cards__item'}}" bindtap="hotcitywwather" data-city="西安" data-id="8">西安</view>
<view class="{{id=='9'?'choose':'cards__item'}}" bindtap="hotcitywwather" data-city="三亚" data-id="9">三亚</view>
</view>每一个<view>标签中都绑定了一个hotcitywwather事件，同时传递2个参数：city和id，使用data-*方式传递参数
为了实现点击城市后，城市变高亮，每个<view>标签中的class属性根据id值选择，
例如广州，如果广州被选中，我会在后台把id置为1，而当id=1时，它的class=choose，否则class=cards_item
这样就实现了--选中元素样式和未选中元素样式不同的目的
2、后端添加hotcitywwather方法
//热门城市触发的查询请求
hotcitywwather(e) {
console.log(e);
this.setData({
id: e.target.dataset.id // 点击城市，激活这个事件，把id参数置为传递来的值
})
//获取locationid
wx.request({
url: 'https://geoapi.qweather.com/v2/city/lookup',
method: 'GET',
data: {
key: this.data.key,
location: e.target.dataset.city //取前端点击的热门城市，因为前端点击事件传递了这个参数
},
success: (res) => {
console.log(res);
// return res.data.location[0].id
this.setData({
location: res.data.location[0].id //提取返回结果中的id
})
// 获取locationid后，查询当前天气，在success中发起请求
var location_id = this.data.location;
// console.log(location_id);
wx.request({
url: 'https://devapi.qweather.com/v7/weather/now',
method: 'GET',
data: {
key: this.data.key,
location: location_id
},
success: (res) => {
console.log(res);
this.setData({
weather_now: res.data.now,
flag: true
})
},
});
// 获取locationid后，查询未来3天气，在success中发起请求
wx.request({
url: 'https://devapi.qweather.com/v7/weather/3d',
method: 'GET',
data: {
key: this.data.key,
location: location_id
},
success: (res) => {
console.log(res);
this.setData({
future: res.data.daily,
flag: true
})
},
});
// 获取locationid后，查询未来24小时天气，在success中发起请求
wx.request({
url: 'https://devapi.qweather.com/v7/weather/24h',
method: 'GET',
data: {
key: this.data.key,
location: location_id
},
success: (res) => {
console.log(res);
this.setData({
twenty_four: res.data.hourly,
flag: true
})
},
});
// 获取locationid后，查询天气指数
wx.request({
url: 'https://devapi.qweather.com/v7/indices/1d',
method: 'GET',
data: {
key: this.data.key,
location: location_id,
type: 3
},
success: (res) => {
console.log(res);
this.setData({
indices: res.data.daily,
flag: true
})
},
});
},
})
}, 完整样式文件 pages/weather/weather.wxss
查看代码
/* pages/weather/weather.wxss */
.title {
display: flex;
justify-content: center;
margin-top: 40rpx;
}
.title text {
font-family: sans-serif;
font-size: 36rpx;
font-weight: bold; /*加粗*/
letter-spacing: 4rpx; /*字符之间的间距*/
}
.search {
display: flex;
justify-content: center;
}
/* .search-container {
height: 88rpx;
background-color: #ada5a5;
display: flex;
align-items: center;
padding: 0 10rpx;
} */
.search-container {
font-size: 28rpx;
margin-top: 20rpx;
margin-left: 20rpx;
height: 60rpx;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
text-align: center; /*光标居中，在input标签下设置这个即可*/
border-radius: 8px;
background: #ffffff;
box-shadow: inset 5px 5px 10px #cccccc,
inset -5px -5px 10px #ffffff;
}
.placeho {
font-size: 22rpx;
color: rgb(152, 153, 155);
text-align: center;
}
.search-button {
margin-left: 60rpx;
margin-top: 20rpx;
height: 55rpx;
width: 120rpx;
border-radius: 8px;
background: linear-gradient(145deg, #e6e6e6, #ffffff);
box-shadow: 18px 18px 24px #e2e0e0,
-18px -18px 24px #ffffff;
display: flex;
/* flex-wrap: wrap; */
justify-content: center;
}
.search-button view {
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
}
.search-button image{
height: 34rpx;
width: 34rpx;
margin-left: 5rpx;
}
.search-button text{
font-size: 26rpx;
}
/* 热门城市 样式*/
.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.cards__item {
display: flex;
flex-basis: 25%;
/* padding-left: 8px;
padding-right: 8px; */
margin: 20rpx 0 0 20rpx;
justify-content: center;
align-items: center;
height: 60rpx;
/* width: 1000rpx; */
border: 1rpx solid rgb(211, 210, 210);
font-size: 24rpx;
border-radius: 8px;
background: linear-gradient(145deg, #d8d8d8, #ffffff);
box-shadow: 18px 18px 24px #e2e0e0,
-18px -18px 24px #ffffff;
}
.choose {
display: flex;
flex-basis: 25%;
/* padding-left: 8px;
padding-right: 8px; */
margin: 20rpx 0 0 20rpx;
justify-content: center;
align-items: center;
height: 60rpx;
/* width: 1000rpx; */
border: 1rpx solid rgb(211, 210, 210);
font-size: 24rpx;
color: white;
border-radius: 8px;
background: #0cb5df;
box-shadow: 14px 14px 59px #fcfdfd,
-14px -14px 59px #e6f0f5;
}
/* 实时天气样式 */
.top-box {
border-radius: 5px;
background: #ace3fb;
box-shadow: inset 6px 6px 12px #92c1d5,
inset -6px -6px 12px #c6ffff;
height: 100%;
margin-left: 20rpx;
margin-right: 20rpx;
}
.weather-image {
margin-top: 20rpx;
padding-top: 40rpx;
/* width: 100%; */
display: flex;
justify-content: center;
}
/* 调整天气图标大小 */
.weather-image image {
width: 150rpx;
height: 150rpx;
filter: drop-shadow(red);
}
/* 调整文本位置 */
.weather-text {
margin-left: 50rpx;
display: flex;
flex-direction: column;
}
.weather-text text {
margin: 4rpx;
}
.indices {
display: flex;
justify-content: center;
font-size: 26rpx;
margin: 50rpx 30rpx 0 30rpx;
}
.next {
margin-top: 60rpx;
white-space: nowrap;
/* display: flex;
justify-content: center; */
}
.next-son {
/* align-items: center;
justify-content: center; */
width: 20%;
display: inline-block;
margin-bottom: 20rpx;
}
.next-son text {
font-size: 26rpx;
}
.next-son image {
width: 40rpx;
height: 40rpx;
margin: 15rpx 0 15rpx 0;
}
.next-son view {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 未来3天天气的样式 */
.future-3d-father {
margin-top: 20rpx;
display: flex;
/* flex-wrap: wrap; */
justify-content: center;
height: 100%;
margin-left: 20rpx;
margin-right: 20rpx;
padding-bottom: 20rpx; /*里面填充*/
margin-bottom: 40rpx; /*外壳距底部*/
border-radius: 5px;
background: #ace3fb;
box-shadow: inset 6px 6px 12px #92c1d5,
inset -6px -6px 12px #c6ffff;
}
.future-3d-father view {
}
.future-3d-son1 {
margin-top: 40rpx;
width: 33.33%;
/* height: 100rpx; */
/* display: flex; */
align-items: center;
justify-content: center;
}
.future-3d-son2 {
margin-top: 40rpx;
width: 33.33%;
/* height: 220rpx; */
/* display: flex; */
align-items: center;
justify-content: center;
border-left: 1rpx dashed black;
border-right: 1rpx dashed black;
}
.future-3d-son3 {
margin-top: 40rpx;
width: 33.33%;
/* height: 100rpx; */
/* display: flex; */
align-items: center;
justify-content: center;
}
.future-3d-son1 view {
display: flex;
flex-direction: column; /*使元素纵向布局（默认为横向）*/
align-items: center;
justify-content: center;
}
.future-3d-son2 view {
display: flex;
flex-direction: column; /*使元素纵向布局（默认为横向）*/
align-items: center;
justify-content: center;
}
.future-3d-son3 view {
display: flex;
flex-direction: column; /*使元素纵向布局（默认为横向）*/
align-items: center;
justify-content: center;
}
.future-3d-father image {
width: 50rpx;
height: 50rpx;
margin: 15rpx 0 15rpx 0;
}
.banquan {
height: 20rpx;
}
