微信小程序-天气预报

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