微信小程序天气预报

第一次接触微信小程序，结果发现其实小程序和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有点像。