微信小程序 - 简易天气预报

预览图：

 

一、代码部分

1：WXML：

<!--pages/weather/weather.wxml-->
<view class="father_box">
  <!--上 -->
  <view class="top_box">
    <!-- 背景图片 -->
    <image class="bg-image" mode="widthFix" src="../../images/l.jpg"></image>
    <text class="pm2_5">{{city}}:{{pm2_5}}</text>
    <view class="temperature">{{weatherArray[0].temperature_curr}}</view>
    <view class="weather">{{weatherArray[0].weather}}</view>
    <view class="wind">{{weatherArray[0].wind}}</view>
    <view class="pm2_5_remark">{{pm2_5_remark}}</view>
  </view>
  <!-- 下 -->
  <view class="bottom_box">
    <view class="bottom_box_father">
      <view class="bottom_left">
        <view class="bottom_left_left">
          <view style="margin-bottom: 10rpx;">今天</view>
          <view>{{weatherArray[0].weather}}</view>
        </view>
        <view class="bottom_left_right">
          <view style="margin-bottom: 10rpx;">{{weatherArray[0].temperature}}</view>
          <view><image class="icon" mode="widthFix" src="{{weatherArray[0].weather_icon}}"></image></view>
        </view>
      </view>
      <view style="height: 120rpx;width: 3rpx;background-color: #b9b9b9;"></view>
      <view class="bottom_right">
        <view class="bottom_right_left">
          <view style="margin-bottom: 10rpx;">明天</view>
          <view>{{weatherArray[1].weather}}</view>
        </view>
        <view class="bottom_right_right">
          <view style="margin-bottom: 10rpx;">{{weatherArray[1].temperature}}</view>
          <view><image class="icon" mode="widthFix" src="{{weatherArray[1].weather_icon}}"></image></view>
        </view>
      </view>
    </view>
  </view>
</view>

2：WXSS：

/* pages/weather/weather.wxss */
page{
  height: 100%;
  width: 100%;
}
.bg-image
{ 
  width : 100%;
  position: fixed;  
  z-index: -1;  
}
.father_box{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* 上 */
.top_box{
  flex: 4;
}
.pm2_5{
  color: white;
  padding: 10rpx;
  margin-left: 20rpx;
  background-color:violet
}
.temperature{
  text-align: center;
  margin-top: 10%;
  color: white;
  font-size:100rpx;
}
.weather{
  text-align: center;
  color: white;
  font-size:40rpx;
  padding-right: 20rpx;
}
.wind{
  text-align: center;
  color: white;
  font-size:40rpx;
}
.pm2_5_remark{
  margin-top: 15%;
  text-align: center;
  color: white;
  font-size:40rpx;
}
/* 下 */
.bottom_box{
  flex: 1;
  background-color:white ;
 
}
.bottom_box_father{
  display: flex;
  height: 100%;
  width: 100%;
  margin-right: 10rpx;
  box-sizing:content-box;
  background-color: white;
  align-items: center;
  justify-content: center;
}
.bottom_left{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom_left_left{
  flex: 1;
  margin-left: 30rpx;
}
.bottom_left_right{
  flex: 1;
}
.bottom_right{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom_right_left{
  flex: 1;
  margin-left: 30rpx;
}
.icon{
  width: 60rpx;
}
.bottom_right_right{
  flex: 1;
}

3：JS:

var QQMapWX = require('../../libs/qqmap-wx-jssdk');    // 百度地图js包文件
Page({
  data: {
    city: "",
    weaid: "",    // 城市气象编号
    // 数据
    pm2_5: "",
    pm2_5_remark: "",
    weatherArray: [{
      temperature: "",
      temperature_curr: "",
      weather: "",
      wind: "",
      weather_icon:""
    }, {
      temperature: "",
      weather: "",
      weather_icon:""
    }
    ],
    pd:[false,false,false]
  },
  onLoad(e) {
    wx.showLoading({
      title: '拼命加载中...',
    })
    this.getLocationInfo()
  },
  // 获取当前城市
  getLocationInfo() {
    let _this = this

    let qqmapsdk = new QQMapWX({
      key: 'NL2BZ-6A46Q-GDY5V-GHTNI-SEL3S-Q6FM5'
    });

    wx.getLocation({
      isHighAccuracy: true,
      type: "gcj02",
      success(res) {
        let { latitude, longitude } = res
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) {
            console.log(res.result)
            let city = res.result.address_component.city
            _this.setData({ city })

            _this.getcityId()
          },
          fail: function (res) {
            console.log(res);
          },
        });
      }
    })
  },
  // 获取城市编号
  getcityId() {
    let _this = this
    wx.request({
      url: 'http://api.k780.com/?app=weather.city&areaType=cn&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
      method: "GET",
      dataType: "json",
      success: (res) => {
        let dtList = res.data.result.dtList
        for (var key in dtList) {
          if (_this.data.city.indexOf(dtList[key].cityNm) != -1) {
            _this.setData({ weaid: dtList[key].weaId })
            break
          }
        }
        _this.SearchCityWeather()
      },
      fail: (result) => {
        wx.showToast({
          title: '获取城市编号失败',
          icon: "error"
        })
      },

    })
  },
  // 获取当前城市的天气指数
  SearchCityWeather() {
    let _this = this
    // 获取今天天气
    wx.request({
      url: 'http://api.k780.com:88/?app=weather.today&weaid=' + _this.data.weaid + '&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
      method: "GET",
      dataType: "json",
      success: (res) => {
        let resultArray = res.data.result
        console.log(resultArray)
        _this.setData({
          'weatherArray[0].temperature': resultArray.temperature,
          'weatherArray[0].temperature_curr': resultArray.temperature_curr,
          'weatherArray[0].weather': resultArray.weather + resultArray.weather_curr,
          'weatherArray[0].wind': resultArray.wind + " " + resultArray.winp
        })
      },
      fail: (result) => {
        wx.showToast({
          title: '获取当前城市天气失败',
          icon: "error"
        })
      },
      complete:()=>{
        _this.setData({'pd[0]':true})
      }
    })
    // 获取pm2.5
    wx.request({
      url: 'http://api.k780.com/?app=weather.pm25&weaId=' + _this.data.weaid + '&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
      method: "GET",
      dataType: "json",
      success: (res) => {
        let resultArray = res.data.result
        console.log(resultArray)
        _this.setData({
          pm2_5: resultArray.aqi_levnm,
          pm2_5_remark: resultArray.aqi_remark
        })
      },
      fail: (result) => {
        wx.showToast({
          title: '获取当前城市天气失败',
          icon: "error"
        })
      },
      complete:()=>{
        _this.setData({'pd[1]':true})
      }
    })
    // 获取未来天气
    wx.request({
      url: 'http://api.k780.com:88/?app=weather.future&weaid='+_this.data.weaid+'&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
      method: "GET",
      dataType: "json",
      success: (res) => {
       let resultArray = res.data.result
       console.log(resultArray)

       _this.setData({
        'weatherArray[0].weather_icon': resultArray[0].weather_icon,
        'weatherArray[1].weather_icon': resultArray[1].weather_icon,
        'weatherArray[1].temperature': resultArray[1].temperature,
        'weatherArray[1].weather': resultArray[1].weather
      })
      },
      fail: (result) => {
        wx.showToast({
          title: '获取未来城市天气失败',
          icon:"error"
        })
      },
      complete:()=>{
        _this.setData({'pd[2]':true})
      }
    })

    let Interval = setInterval(()=>{
      if(_this.data.pd[0] && _this.data.pd[1] &&_this.data.pd[2]){
        wx.hideLoading()
        console.log("关闭")
        clearInterval(Interval)
      }
    },500);
  }
})

4：下载地图包：

不了解的可以通过这个链接查看，其中有关于小程序定位的内容，本章也使用到过：微信小程序获取位置信息_微信小程序获取当前位置_鸢与浅忆的博客-CSDN博客

 5：app.json:

和page、window同级

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

二、 接口文档

该项目使用的接口为nowapi平台提供的接口，官方链接：实时天气接口 - 数据接口 - NowAPI

链接中使用的appkey、sign是免费，但每天有一个次数限制，用来做一个简单的项目足够了。

2.1、 获取城市列表

URL:http://api.k780.com/?app=weather.city&areaType=cn&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json

参数	作用
app	接口 此处应为:weather.city
areaType	cn:国内城市 gb:国外城市

 2.2、获取当前城市天气

URL: http://api.k780.com:88/?app=weather.today&weaid=94&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json

参数	作用
weaid	城市气象编号
appkey	10003

 2.3、获取未来5天城市天气

URL:http://api.k780.com:88/?app=weather.future&weaid=101280601&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json

---

欢迎大家在评论区多多交流留言。