微信小程序-天气预报查询

废话不说，直接上源码

采用的接口是https://api.asilu.com/这个网站的

wether.js部分

var defaultcity, getweather, gettemp, getwind, getpic, getdate,updata
Page({
  data: {},
  onLoad: function(e) {
    defaultcity = '集美'
    this.weather()
  },
  bindKeyInput: function(e) {
    defaultcity = e.detail.value
  },
  search: function(e) {
    this.weather()
  },
  weather: function() {
    wx.showLoading({
      title: '加载中',
    })
    wx.request({
      url: 'https://query.asilu.com/weather/baidu?city='+ defaultcity,
      success: res => {
        console.log(res.data)
        
        getweather = res.data.weather[0].weather
        gettemp = res.data.weather[0].temp
        getwind = res.data.weather[0].wind+res.data.weather[0].w
        getpic =  res.data.weather[0].icon2+'.jpg'
        getdate =  res.data.weather[0].date
        updata=res.data.update_time
        this.setData({
          city: defaultcity,
          weather: getweather,
          temp: gettemp,
          wind: getwind,
          pic: getpic,
          date: getdate,
          utime:updata
        })
     
        wx.hideLoading()
      }
    })
  }
})

weather.wxml内容

<view class="page">
  <view class="top">
    <input placeholder="输入城市名进行搜索" bindinput="bindKeyInput"></input>
    <view class="icon">
      <icon type="search" size="25" bindtap="search" />
    </view>
  </view>
  <view class="body">
    <view class="city">
      <text>{{city}}</text>
    </view>
    <view class="today">
      <text>{{date}}</text>
    </view>
    <view>
      <image src="{{pic}}" mode="aspectFit" style="width: 400rpx; height: 400rpx" />
    </view>
  </view>
  <view class="bottom">
    <view class="weather">
      <text>{{weather}}</text>
      <view class="temp">
        <text>{{temp}}</text>
      </view>
    </view>
    <view class="right">
      
      <view class="wind">
        <text>{{wind}}</text>
      </view>
    </view>
  </view>

  <view class="ud">
      <text>更新时间：{{utime}}</text>
    </view>
</view>

weather.wxss内容

page {
  background-color: #ee818a;
  color: #fff;
}

.page {
  margin: 50rpx;
}

.top {
  display: flex;
  padding: 20rpx;
  flex-direction: row;
  background-color: #efefef;
  position: relative;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
}

.input {
  width: 80%;
  font-size: 32rpx;
}

.icon {
  width: 10%;
  position: absolute;
  right: 0;
  bottom: 5rpx;
}

.body {
  text-align: center;
  display: flex;
  flex-direction: column;
}

.city {
  font-size: 80rpx;
}

.today {
  font-size: 34rpx;
}

.bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
}

.weather {
  font-size: 38rpx;
  width: 50%;
}

.right {
  display: flex;
  flex-direction: column;
}

.wind {
  font-size: 40rpx;
}

.temp {
  font-size: 40rpx;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

input {
  color: #333;
}
.ud{

 text-align: center;
  padding-top: 100px;
}