開發一個微信小程序(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;
}