小程序已經出來有段時間了，之前也有了解過。早起也有了解過，但是很不看好。

最近因工作需要，開始學了小程序。

隨著小程序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-bottom: 0.1em;
}

.box-date {
  font-size: 0.8em;
  text-align: center;
  vertical-align: middle;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

.flex-weather {
  flex-direction: row;
  display: -webkit-flex;
  align-items: center;
  text-align: center;
  margin-top: 0.1em;
  margin-bottom: 0.3em;
}

.flex-item-3 {
  width: 33.33%;
  padding: 0.1em;
}

.pm25 {
  font-size: 1.5em;
  margin-left: 1em;
  margin-right: 1em;
  border-radius: 0.1em;
}

.weather-text {
  font-size: 0.9em;
  margin-bottom: 0.1em;
  margin-top: 0.1em;
}

邏輯層 index.js

var Bmap = require("../../bmap-wx.js");
var util = require("../../util.js");
var app = getApp();
Page({
  data: {
    weather: {},
    device: app.globalData.deviceInfo
  },
  onLoad: function () {
    var that = this;
    var bmap = new Bmap.BMapWX({ ak: "需要填寫你的ak，免費申請"});
    bmap.weather({
      success:function(data){
        that.setData({ weather: util.formatWeather(data)});
      },
      fail: function(data){
        wx.showToast({
          title: ‘獲取天氣信息失敗！‘
        });
      }
    });
  }
})

用來處理json的工具類 util.js

function formatWeather(res) {
  var weathers = {
    today: {},
    list: []
  };
  console.log(res);
  weathers.today.city = res.currentWeather[0]["currentCity"];
  weathers.today.pm25 = res.currentWeather[0]["pm25"];
  weathers.today.temperature = res.currentWeather[0]["temperature"];
  weathers.today.weather = res.currentWeather[0]["weatherDesc"];
  weathers.today.wind = res.currentWeather[0]["wind"];
  var today_date = res.currentWeather[0]["date"].split(/[ ：()]/);

  weathers.today.c_temperature = today_date[4];
  weathers.today.date = today_date[1] + " " + today_date[0];
  var weatherArray = res.originalData.results[0].weather_data;
  for (var i = 0; i < weatherArray.length; i++) {
    var weather = {};
    var date = new Date((Date.parse(res.originalData.date) / 1000 + (86400 * i)) * 1000);
    var month = date.getMonth() + 1;
    month = month > 9 ? month + "月" : "0" + month + "月";
    weather.date = month + date.getDate() + "日" + " " + weatherArray[i]["date"].split(" ")[0];
    weather.temperature = weatherArray[i]["temperature"];
    weather.weather = weatherArray[i]["weather"];
    weather.wind = weatherArray[i]["wind"];
    var day_pic = weatherArray[i]["dayPictureUrl"];
    weather.icon_day = day_pic.substring(day_pic.lastIndexOf("/") + 1, day_pic.length);
    var night_pic = weatherArray[i]["nightPictureUrl"];
    weather.icon_night = night_pic.substring(night_pic.lastIndexOf("/") + 1, night_pic.length);
    weathers.list.push(weather);
  }
  if (new Date().getHours() > 18) {
    weathers.today.icon = weathers.list[0].icon_night;
  } else {
    weathers.today.icon = weathers.list[0].icon_day;
  }
  if (weathers.today.pm25 > 300){
    weathers.today.pm_color = "#6d001d";
  }else if (weathers.today.pm25 > 200) {
    weathers.today.pm_color = "#884898";
  } else if (weathers.today.pm25 > 150) {
    weathers.today.pm_color = "#f00";
  } else if (weathers.today.pm25 > 100) {
    weathers.today.pm_color = "#fc0";
  }else{
    weathers.today.pm_color = "#0f0";
  }

 weathers.index = [];
 var indexArray = res.originalData.results[0].index;
 for(var i = 0; i < indexArray.length; i++){
  var index = {
    title: indexArray[i].title,
    des: indexArray[i].des,
    zs: indexArray[i].zs
  };
  weathers.index.push(index);
 }
  console.log(weathers);
  return weathers;
}

module.exports = {
  formatWeather: formatWeather
}

最後，需要下載一下

bmap-wx.js
地址：http://lbsyun.baidu.com/index.php?title=wxjsapi/wxjs-download

至此，全部完成工作！

小程序開發之——簡簡天氣