微信小程序-天气预报

第一次接触微信小程序，结果发现其实小程序和NodeJs或者是其它的js框架挺类似的。所以现在的话我跟着视频敲了一个天气预报小程序练手，这里的话只是使用到前台代码，没有写后台。效果图如下：

这里的话一共使用到了两个接口，一个是百度的位置接口，另外一个是天气接口。

代码如下：

index.js

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六',],
    showday: ['今天','明天','']
  },
  //页面加载完成
  onLoad:function(){
    var that = this;
    var date =  new Date();
    
    date.setDate(date.getDate()+2);
    this.setData({
      'showday[2]':this.data.weekday[date.getDay()]
    });
    console.log(this.data.showday);
    wx.getLocation({
      type:"wgs84",
      success: function(res) {
        var lat = res.latitude;//纬度
        var lng = res.longitude;//经度
        console.log("lat:"+lat);
        console.log("lng:"+lng);
        that.getCity(lat,lng);//调用自己写的函数获得城市信息
      },
    })
  },
  //获得城市
  getCity:function(lat,lng){
    var that = this;
    var url ="http://api.map.baidu.com/geocoder/v2/";
    var param = {
      ak:'QgDjg59KnbdsL14plwnoP5rUAGKyDYPe',
      location:lat+','+lng,
      output:'json'
    };
    wx.request({
      url: url,
      data:param,
      success:function(res){
        console.log(res);
        var city = res.data.result.addressComponent.district;
        var street = res.data.result.addressComponent.street;
        that.setData({
          city:city,
          street:street
        });
        //调用自定义函数获取天气信息
        that.getWeather(city);
      }
    })
  },
  //获取天气信息
  getWeather:function(city){
    var that = this;
    var url = "https://free-api.heweather.com/v5/weather";
    var param={
      key: '3ac2953e01864ad18f0e0c16d5ab7fa4',
      city:city
    };
    //发出请求
    wx.request({
      url: url,
      data:param,
      success:function(res){
        console.log(res);
        that.setData({
          now: res.data.HeWeather5["0"].now,
          forecast: res.data.HeWeather5["0"].daily_forecast
        });
      }
    })
  }
})

//key3ac2953e01864ad18f0e0c16d5ab7fa4

index.wxml

<!--index.wxml-->
<image class="bg" mode="aspectFill" src="../../img/day.jpg"></image>
<view class="wrapper">
    <view class="now">
      <view class="now-tmp">
        <view class="city">{{city}}</view>
        <view class="street">{{street}}</view>
        <view class="tmp">{{now.tmp}}°</view>
        <view class="type">{{now.cond.txt}} | 空气 良</view>
      </view>
      <view class="now-exp">
        <view class="exp-item">
          <view class="">{{now.wind.dir}}</view>
          <view class="">{{now.wind.sc}}级</view>
        </view>

        <view class="item-sp"></view>

        <view class="exp-item">
          <view class="">相对湿度</view>
          <view class="">{{now.hum}}%</view>
        </view>

        <view class="item-sp"></view>

        <view class="exp-item">
          <view class="">体感温度</view>
          <view class="">{{now.fl}}°</view>
        </view>
      </view>
    </view>
    <view class="forecast">
      <block wx:for="{{forecast}}" wx:for-item="fc">
      <view class="cast-item">
        <view class="cast-day">{{showday[index]}}</view>
        <view class="cast-type">
          <image class="type-img" src="../../img/icons/{{fc.cond.code_d}}.png"></image>
          {{fc.cond.txt_d}} | 良
        </view>
        <view class="cast-tmp">
          {{fc.tmp.max}}° / {{fc.tmp.min}}°
        </view>
      </view>
      </block>
    </view>
</view>

index.wxss

/**index.wxss**/
.wrapper{
  width:100%;
  height:100%;
  box-sizing: border-box;
  position: absolute;
  top:0;
  left:0;
  padding:50rpx;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.now{
  height:600rpx;
  color:#fff;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
}

.tmp{
  font-size: 4rem;
}

.bg{
  height: 700rpx;
  width:  750rpx;
}

.now-exp{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.now-tmp{
  flex-grow:  1;/*表示剩余的空间都分配给该元素*/
}

.exp-item{
  font-size: 1.2rem;
  text-align: center;
}
.item-sp{
  width:5rpx;
  background-color: #fff;
}

.forecast{
  margin-top: 50rpx;
}

.type-img{
  width:50rpx;
  height:50rpx;
  vertical-align: middle;
}

.cast-item{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1rpx solid #ccc;
  padding: 40rpx 0;
}

这个程序还是挺简单的，只要将页面布局出来后，只要在使用js的Page对象里面进行数据的交换就可以了。而且在Page里的data对象中的数据都可以使用{{}}的形式将里面的变量显示出来，非常好用的模板方式，和vuejs有点像。