小程序已经出来有段时间了，之前也有了解过。早起也有了解过，但是很不看好。

最近因工作需要，开始学了小程序。

随着小程序SDK开放的API越来越多，功能也越来越强大，也许一不留神，他又火了。

拿来练手的是一个天气预报（好像每次练手都是天气预报，尴尬了……）

先看运行效果：（目前已经上线了，具体效果可以扫右边二维码）

　　　　　　　　　　　　　　

 

　　首先需要的就是天气接口，这种接口有很多，而且大部分都是免费的。无意中找到一个百度的接口：

http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getweather ，然后就可以开发了。

具体不多说了，直接上代码：

主页面：

index.wxml

<!--index.wxml-->
<view style="background-color:#36c;color:#fff;min-height:{{device.height}}px">
  <view class="box-city">{{weather.today.city}}</view>
  <view class="box-date">{{weather.today.date}}</view>
  <view class="flex-weather">
    <view class="flex-item-3">
      <image wx:if="{{weather.today.icon}}" src="../../images/icon/{{weather.today.icon}}" style="height:{{device.width/4}}px;width:{{device.width/4}}px"></image>
    </view>
    <view class="flex-item-3">
      <view style="font-size:2.5em;font-weight: bold;">{{weather.today.c_temperature}}</view>
      <view class="pm25" style="background-color:{{weather.today.pm_color}}">{{weather.today.pm25}}</view>
    </view>
    <view class="flex-item-3">
      <view class="weather-text" style="font-size:1.5em;font-weight:bold">{{weather.today.weather}}</view>
      <view class="weather-text">{{weather.today.wind}}</view>
      <view class="weather-text">{{weather.today.temperature}}</view>
    </view>
  </view>
  <view wx:for="{{weather.list}}" class="flex-weather">
    <view style="font-size:0.9em;font-weight:bold" class="flex-item-3">{{item.date}}</view>
    <view class="flex-item-3">
      <image src="../../images/icon/{{item.icon_day}}" style="height:{{device.width/8}}px;width:{{device.width/8}}px"></image>
      <image src="../../images/icon/{{item.icon_night}}" style="height:{{device.width/8}}px;width:{{device.width/8}}px"></image>
    </view>
    <view class="flex-item-3">
      <view style="font-size:1.1em;font-weight:bold">{{item.weather}}</view>
      <view style="font-size:0.8em">{{item.temperature}}</view>
      <view style="font-size:0.8em">{{item.wind}}</view>
    </view>
  </view>
  <view class="flex-weather" wx:for="{{weather.index}}">
    <view style="width:28%; padding: 0.3em;">
      <view style="font-size:0.8em;">{{item.title}}</view>
      <view style="font-size:1.5em;font-weight:bold;">{{item.zs}}</view>
    </view>
    <view style="width:72%; padding: 0.3em;font-size:0.9em;text-align:left;">{{item.des}}</view>
  </view>
</view>

样式表文件 index.wxss

/**index.wxss**/

.box-city {
  font-size: 2.5em;
  text-align: center;
  vertical-align: middle;
  padding-top: 0.1em;
  padding-bott