微信小程序基于和风天气的天气预报（自动和手动定位）

    效果图

          和风天气API获取

                  微信小程序后台配置域名

            选择城市弹窗

      页面代码

注意事项（谨记）

前言

最近在开发小程序，将自己写的分享给大家,希望能帮助到你们！

效果图

和风天气API获取

网址链接：dev.qweather.com

我用的是和风天气的API，打开该网址注册或登陆你的账号

点击进入开发服务平台，进入我们的控制台管理界面

点击项目管理，并且创建属于我们自己的KEY（我们选择免费订阅，并选择 Web API）

创建成功之后我们就可以看到 等会要用到的Key了（这个是关键）

微信小程序后台配置域名

登录小程序后台，点击开发设置

点击服务器域名 点击修改 将我们要用到的API的域名添加到request合法域名中 ， https://devapi.qweather.com和 https://geoapi.qweather.com

选择城市弹窗

网址链接： Vant Weapp (gitee.io)

我用的是Vant Weapp打开该网址后点击Popup弹出层

我们可以看到在引入中写着在app.json或index.json中引入组件

我们将代码复制到你的json文件中

将基本用法复制到你的WXML的文件中，并将红圈部分复制到你的JS文件中，然后根据你需要从哪边弹出进行top（顶部）、bottom（底部）、left（左侧）、right（右侧）的选择

页面代码

页面核心

.WXML

<image class="bg-wave" src="/pages/images/bg_wave.gif"></image>
  <view class="top">
    <view class="city" bindtap="showPopup">
      <image class="icon" src="/pages/images/定位.png" bindtap="showPopup"></image>
      <text class="city" bindtap="showPopup">{{shi}}-{{xian}}</text>
    </view>
<view class="hourly_title">24小时预报</view>
  <scroll-view scroll-x="true" class="hourly">
    <view class="hourly_item" wx:for="{{hourly}}" wx:key="index">
      <text class="hourly_time">{{item.time}}</text>
      <text class="h_time">{{item.text}}</text>
      <view class="hourly_img">
        <image mode="widthFix" src="/pages/images/128/{{item.pice}}.png"></image>
      </view>
      <text class="hourly_tmp">{{item.tmp}}°</text>
      <text class="hourly_wind_dir">{{item.wind_dir}}</text>
      <text class="hourly_wind_sc">{{item.wind_sc}}级</text>
    </view>
  </scroll-view>
​
  <view class="hourly_title">7天预报</view>
  <scroll-view scroll-x="true" class="daily">
    <view class="daily_item" wx:for="{{daily}}" wx:key="index">
      <text class="daily_txt">{{item.d_txt}}</text>
      <text class="daily_date">{{item.d_date}}</text>
      <text class="d_date">{{item.d_text}}</text>
      <view class="hourly_img">
        <image mode="widthFix" src="/pages/images/128/{{item.piced}}.png"></image>
      </view>
      <text class="hourly_tmp">{{item.tmp_min}}°~{{item.tmp_max}}°</text>
      <view class="hourly_img">
        <image mode="widthFix" src="/pages/images/128/{{item.picen}}.png"></image>
      </view>
      <text class="d_wind_dir">{{item.n_text}}</text>
      <text class="daily_wind_dir">{{item.wind_dir}}</text>
      <text class="daily_wind_sc">{{item.wind_sc}}级</text>
    </view>
  </scroll-view>
//查询功能

<van-popup show="{{show}}" round position="bottom" custom-style="height: 70%" bind:close="onClose">
  <view class="search-box">
    <icon type="search" size="18" color="#0081ff" bindtap="search"></icon>
    <input bindinput="bindKeyInput" placeholder="请输入城市名"></input>
    <view class="chaxun" bindtap="search" wx:if="{{search_city}}">查询</view>
  </view>
  <view class="result-box">
    <scroll-view scroll-y="true" data-cityid="{{item.city_id}}" class="result-item" bindtap="onclick" wx:for="{{location}}" wx:key="index">
      {{item.xian}}-{{item.shi}}
    </scroll-view>
  </view>
</van-popup>

 .JS

//定位实况天气

getweather: function (e) {
    var that = this;
    //获取地理位置
    wx.getLocation({
      type: 'gcj02',
      success(res) {
        const latitude = res.latitude
        const longitude = res.longitude
        console.log(res.longitude, res.latitude)
        that.setData({
          location: res.longitude + "," + res.latitude
        })
        //获取城市
        wx.request({
          url: 'https://geoapi.qweather.com/v2/city/lookup?key=' + APIKEY + "&location=" + that.data.location,
          success(res) {
            console.log(res.data)
            that.setData({
              shi: res.data.location[0].adm2,
              xian: res.data.location[0].name,
            })
            //获取实况天气
            wx.request({
              url: 'https://devapi.qweather.com/v7/weather/now?key=' + APIKEY + "&location=" + res.data.location[0].id,
              success(res) {
                console.log(res.data)
                that.setData({
                  temp: res.data.now.temp,
                  humi: res.data.now.humidity,
                  tianqi: res.data.now.text,
                  fengxiang: res.data.now.windDir,
                  dengji: res.data.now.windScale,
                  feelsLike:res.data.now.feelsLike,
                  pic: res.data.now.icon,
                  pres: res.data.now.pressure,
                  update: res.data.updateTime.slice(0, 10)
                })
              }
            })
            //获取空气质量
            wx.request({
              url: 'https://devapi.qweather.com/v7/air/now?key=' + APIKEY + "&location=" + res.data.location[0].id,
              success(res) {
                console.log(res.data)
                that.setData({
                  mass:res.data.now.category,
                })
              }
            })
            //获取24小时天气
            wx.request({
              url: 'https://devapi.qweather.com/v7/weather/24h?key=' + APIKEY + "&location=" + res.data.location[0].id,
              success(res) {
                console.log(res.data)
                var arr = res.data.hourly
                var hourly = []
                for (var i = 0; i < arr.length; i++) {
                  hourly[i] = {
                    "pice": arr[i].icon,
                    "tmp": arr[i].temp,
                    "time": arr[i].fxTime.slice(11, 16),
                    "wind_dir": arr[i].windDir,
                    "wind_sc": arr[i].windScale，
                    "text": arr[i].text
                  }
                }
                that.setData({
                  hourly: hourly
                })
              }
            })
            //获取未来7天天气
            var weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
            wx.request({
              url: 'https://devapi.qweather.com/v7/weather/7d?key=' + APIKEY + "&location=" + res.data.location[0].id,
              success(res) {
                console.log(res.data)
                var arr = res.data.daily
                var daily = []
                for (var i = 0; i < arr.length; i++) {
                  daily[i] = {
                    d_txt: i == 0 ? "今天" : weekArray[new Date(arr[i].fxDate).getDay()],
                    d_date: arr[i].fxDate.slice(5, 10),
                    piced: arr[i].iconDay,
                    picen: arr[i].iconNight,
                    wind_dir: arr[i].windDirDay,
                    wind_sc: arr[i].windScaleDay,
                    tmp_max: arr[i].tempMax,
                    tmp_min: arr[i].tempMin,
                    d_text: arr[i].textDay,
                    n_text: arr[i].textNight,
                  }
                }
                that.setData({
                  daily: daily
                })
              }
            })
          }
        })
      }
    })
  },
​
//选择城市并显示在列表

bindKeyInput(e) {
    this.setData({
      search_city: e.detail.value
    })
    console.log(e.detail.value)
  },
  search(e) {
    var that = this;
    //获取城市
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup?key=' + APIKEY + "&location=" + this.data.search_city,
      success(res) {
        console.log(res.data)
        var arr = res.data.location
        var location = []
        for (var i = 0; i < arr.length; i++) {
          location[i] = {
            xian: arr[i].name,
            shi: arr[i].adm2,
            city_id: arr[i].id
          }
        }
        that.setData({
          location: location
        })
      }
    })
  },
//点击选择城市并更新ui

nclick(e) {
    var that = this;
    var cityid = e.currentTarget.dataset.cityid;
    console.log(e.currentTarget.dataset.cityid)
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup?key=' + APIKEY + "&location=" + cityid,
      success(res) {
        console.log(res.data)
        that.setData({
          shi: res.data.location[0].adm2,
          xian: res.data.location[0].name,
        })
      }
    })
    //以下获取天气代码同上
    //...........我就不展示了
    that.setData({
      show: false //自动关闭弹出层
    });
  },

.WXSS 

/* 页面样式 */
.header {
  height: 400rpx;
  background-color: #64C8FA;
  background: linear-gradient(to bottom, #56CCF2, #2F80ED);
  position: relative;
  padding: 30rpx;
}

.header .bg-wave {
  width: 100vw;
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 120rpx;
  mix-blend-mode: screen;
}


.top {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}
.icon{
  width: 40rpx;
  height: 40rpx;
  margin-right: 8rpx;
}
.city {
  margin-top: 5rpx;
  display: flex;
  align-items: center;
  color: white;
  font-size: 20px;
}

.city image {
  margin-top: 5rpx;
  width: 50rpx;
  height: 50rpx;
}

.search {
  margin-top: 10px;
  margin-left: 50px;
  border-radius: 8rpx;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.1);
  height: 70rpx;
}

.search input {
  width: 200rpx;
  padding: 18rpx 32rpx;
  text-align: left;
  color: white;
  display: inline-block;
}

.bt_search {
  border-radius: 0 8rpx 8rpx 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  display: inline-flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.bt_search icon {
  margin: 8rpx 18rpx;
}

.center {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}

.tmp {
  margin-left: 18rpx;
  display: inline-block;
  font-size: 180rpx;
  color: white;
}
.cond-image{
  width: 200rpx;
  margin-right: 32rpx;
  margin-top: 32rpx;
}
.bottom{
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}
.bottom view{
  color: white;
  margin: 10px;
}

.hourly_title{
  font-weight: bold;
  font-size: 42rpx;
  padding: 18rpx 32rpx;
  margin-top: 10px;
}
.hourly {
  width: 718rpx;
  margin: 0 18rpx;
  border-radius: 18rpx;
  box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  background-color: white;
}
.hourly_item {
  margin: 18rpx 0;
  display: inline-block;
  width: 143.5rpx;
  text-align: center;
  font-size: 28rpx;
}

.hourly_img {
  margin: 64rpx 0;
}

.hourly_img image {
  width: 60rpx;
}

.hourly_item text {
  display: block;
}

.hourly_time {
  color: gray;
}

.hourly_wind_dir {
  margin-top: 32rpx;
}

.hourly_wind_sc {
  color: gray;
}

.hourly_tmp {
  color: #027aff;
}

.daily {
  width: 718rpx;
  white-space: nowrap;
  margin: 0 18rpx;
  background-color: white;
  border-radius: 18rpx;
  box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
}

.daily_item {
  margin: 18rpx 0;
  display: inline-block;
  width: 179.5rpx;
  text-align: center;
  font-size: 28rpx;
}

.daily_item text {
  display: block;
}

.daily_date {
  color: gray;
}

.daily_wind_dir {
  margin-top: 32rpx;
}

.daily_wind_sc {
  color: gray;
}

.footer{
  font-size: 28rpx;
  color: gray;
  text-align: center;
  margin-top: 50rpx;
  margin-bottom: 18rpx;
}
.result-box{
  border-top: gainsboro 1rpx solid;
}
.result-item{
  display: flex;
  padding: 35rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  border-bottom: gainsboro 1rpx solid;
  background-color: white;
  justify-content: space-between;
  align-items: center;
} 
.search-box{
  margin: 32rpx 32rpx 18rpx 32rpx;
  border-radius: 18rpx;
  box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
  background-color: white;
  display: flex;
  overflow: hidden;
  align-items: center;
}
.search-box input{
  flex: 1;
  padding:18rpx 32rpx;
}
.search-box icon{
  padding: 18rpx 0 18rpx 18rpx;
}
.nav_mya {
  width: 93%;
  height: 170rpx;
  background-color: rgb(255, 255, 255);
  border-radius: 40rpx;
  box-shadow: 0 0 20px rgb(0 0 0 / 20%);
  margin-left: 30rpx;
  margin-right: 30rpx;
  margin-top: 20px;
}
.index_icon{
  height: 10%;
  width: 10%;
  padding-left: 40%;
  margin-top: -120px;
  display: inline-block;
}
.index_f{
  font-weight: bold;
  font-size: 35rpx;
  padding: 10rpx 20rpx;
}
.index_text{
  padding-left: 20px;
  padding-right: 120px;
  display: flex;
  justify-content: space-between;
  color: gray;
  font-size: 25rpx;
}

.index{
  padding-top: 15px;
  margin-left: 40px;
  margin-right: 140px;
  font-size: 25rpx;
  display: flex;
  font-weight:700;
  justify-content: space-between;
}
.end-text{
  display: flex;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 20px;
  font-weight: 700;
  font-size: 15px;
}
.chaxun{
  margin-right: 10px;
  color: #027aff;
}

注意事项（谨记）

记得将刚刚在和风天气创建的KEY复制到这个里面

记得将以下代码添加至您的app.json中

  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序获取当前位置的天气情况"
    }
  },

欢迎浏览

大家可以进入我的微信小程序看看实际效果和功能,如果有啥问题大家随时在下面留言！

​​​​​​