微信小程序之天气预报

   最近学习微信小程序，看视频学习了一个天气预报的小程序，内容比较简单，主要为获取当前地址，获取当前城市近三天的天气预报，使用到的API接口有

一、wx.getLocation

微信小程序自带的API接口，获取当前位置的经纬度

//获取当前位置的经纬度，调用getLocation接口  
getLocation:function(){
    var that = this
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        var latitude = res.latitude
        var longitude = res.longitude
        console.log("lat:"+latitude+"lon:"+longitude)
        that.getCity(latitude,longitude)
      }
    })
  },

二、获取到经纬度后，调用百度地图API获取当前城市以及街道

API接口https://api.map.baidu.com/reverse_geocoding/v3/

//调用百度地图API获取位置详细信息
 getCity: function (latitude, longitude){
    var that = this
    var url = "https://api.map.baidu.com/reverse_geocoding/v3/";
    var params={
      ak:"你的AK",
      output:"json",
      location: latitude +","+longitude
    }
    wx.request({
      url: url,
      data:params,
      success:function(res){
        var city = res.data.result.addressComponent.city//当前城市
        var district = res.data.result.addressComponent.district//当前城区（例如我所在越秀区）
        var street = res.data.result.addressComponent.street//当前街道
        that.setData({
          city:city,
          street:street,
          district:district
        })
        var finalCity = city.substring(0,city.length-1)
        console.log(finalCity)
        that.getWeather(finalCity)
     
         console.log(JSON.stringify(res))
      },
      fail:function(res){
        console.log(JSON.stringify(res))
      },
      complete:function(res){
        console.log(JSON.stringify(res))
      }
    })
  },

使用百度地图API需要有百度账号，进入http://lbsyun.baidu.com/注册账号，

进入控制台输入应用名称，选择应用类型为微信小程序并填写自己的APPID（注册微信小程序开发者）。

获取到访问应用的AK（访问API接口需要的参数）

三、获取天气的API接口

API接口地址：https://api.seniverse.com/v3/weather/daily.json，进入https://docs.seniverse.com（不怎么好用，完整功能需要付费）

getWeather:function(city){
    var that = this
    var url = "https://api.seniverse.com/v3/weather/daily.json"
    var params={
       location:city,
       key:"你的私钥"
    }
    wx.request({
      url:url,
      data:params,
      fail: function (res) {
        console.log(JSON.stringify(res))
      },
      complete: function (res) {
        console.log(JSON.stringify(res))
      },
      success:function(res) {
        console.log(res.data.results[0].daily)
        var tmp = res.data.results[0].daily[0].high;
        var min = res.data.results[0].daily[0].low;
        var txt = res.data.results[0].daily[0].text_day;
        var code = res.data.results[0].daily[0].code_day;
        var qlty = res.data.results[0].daily[0].precip;
        var sc = res.data.results[0].daily[0].wind_scale;
        var fl = res.data.results[0].daily[0].wind_direction;
        var daily_forecast = res.data.results[0].daily;
        that.setData({
          tmp: tmp,
          min:min,
          txt: txt,
          code: code,
          qlty: qlty,
          sc: sc,
          fl: fl,
          daily_forecast: daily_forecast
        })
        console.log(JSON.stringify(res))
      },
    })
  }
})

 这样就可以获取接口需要的私钥参数

以上就是天气预报使用到的API接口，效果图如下

wxml代码如下

<image src="../../assets/day.jpg" class="bg"></image>
<view class="container">
<view class="nowWeather">
<view class="city w">{{city}} {{district}}</view>
<view class="rode w">{{street}}</view>
<view class="temp w b">{{tmp}}°</view>
<view class="weather w">{{txt}} | 空气 优</view>
</view>
<view class="weahterDetail">
<view class="">
<view class="w center">{{fl}}风</view>
<view class="w b center">{{sc}}级</view>
</view>
<view class="l"></view>
<view class="">
<view class="w center">降雨概率</view>
<view class="w b center">{{qlty==''?0:qlty}}%</view>
</view>
<view class="l"></view>
<view class="">
<view class="w center">体感温度</view>
<view class="w b center">40°</view>
</view>
</view>

</view>
<view wx:for="{{daily_forecast}}" wx:for-index="i" wx:for-item="item">
<view class="hor forcast">
<view class="center">{{i==0?'今天':(i==1?'明天':'后天')}}</view>
<view class="hor">
<image  class="img" src="../../assets/icons/100.png">图</image>
<view class="center">{{item.text_day}}|优</view>
</view>
<view class="center">{{item.high}}° / {{item.low}}°</view>
</view>
 
</view>

 wxss代码如下

/**index.wxss**/
/**common**/
.w{
  color: white
}
.b{
  font-weight:bold 
}
.l{
  border:1rpx solid white
}

.bg{
  width:100%;
  height: 700rpx;
}
.temp{
  font-size: 170rpx
}
.center{
  text-align: center;
  margin: auto 0
}
/**index**/
.hor{
  display: flex;
}
.img{
  width: 60rpx;
  height: 60rpx;
  margin-right: 16rpx;
}
.forcast{
  padding: 30rpx;
  border:1rpx solid #eee;
  margin-left:16rpx;
  margin-right:16rpx; 
  justify-content: space-around;
}

.container{
  position: absolute;
  left:0;
  top: 0;
  padding: 0;
  margin: 0;
   width:100%;
  height: 700rpx;
  display: block;
}

.weahterDetail{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: absolute;
  bottom: 50rpx;
}
.nowWeather{
  padding: 60rpx
}

总体来说还是比较简单，比较适合像我这样的小白练手。