综合实例-微天气，微信小程序实战开发过程

 app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "微天气",
    "navigationBarTextStyle":"black"
  }
}

index.wxml

<view class="content">
  <!--显示当天的天气信息-->
  <view class="info">
    <!--城市名称 当前日期-->
    <view class="city">{{city}} ({{today}})</view>
    <!--当天温度-->
    <view class="temp">{{weather.wendu}}℃</view>
    <!--感冒描述-->
    <view class="weather">{{weather.ganmao}}</view>    
  </view>

  <!--昨天的天气信息-->
  <view class="yesterday">
    <view class="detail"><text class="yesterday-title">昨天</text> 
        {{weather.yesterday.date}}</view>
    <view class="detail">  {{weather.yesterday.type}}  <!--天气类型，如阴、晴--> 
        {{weather.yesterday.fx}}  <!--风向-->
        {{weather.yesterday.fl}}  <!--风力-->
        {{weather.yesterday.low}}  <!--最低温度-->
        {{weather.yesterday.high}}  <!--最高温度-->
    </view>
  </view>

  <!--最近五天天气信息-->
  <view class="forecast" >
    <view class="next-day"  wx:key="{{index}}" wx:for="{{weather.forecast}}" >
      <!--日期-->
      <view class="detail date">{{item.date}}</view>
      <!--天气类型-->
      <view class="detail">{{item.type}}</view>
      <!--最高温度-->
      <view class="detail">{{item.high}}</view>
      <!--最低温度-->
      <view class="detail">{{item.low}}</view>
      <!--风向-->
      <view class="detail">{{item.fengxiang}}</view>
      <!--风力-->
      <view class="detail">{{item.fengli}}</view>
    </view>
  </view>  

  <!--搜索-->
  <view class="search-area"> 
    <input bindinput="inputing" placeholder="请输入城市名称" 
        value="{{inputCity}}"  />
    <button type="primary" size="mini" bindtap="bindSearch">查询</button>
  </view>
</view>

index.wxss

.content{
  height: 100%;
  width:100%;
  display:flex;
  flex-direction:column;
  font-family: 微软雅黑, 宋体;
  box-sizing:border-box;
  padding:20rpx 10rpx;
  color: #252525;
  font-size:16px;
  background-color:#F2F2F8;
}

/*当天天气信息*/
.info{
  margin-top:50rpx;
  width:100%;
  height:160px;
}

/*城市名称*/
.city{
  margin: 20rpx;
  border-bottom:1px solid #043567;
}

/*当天温度*/
.temp{
  font-size: 120rpx;
  line-height: 130rpx;
  text-align: center;
  padding-top:20rpx;
  color:#043567;
}

/*感冒描述*/
.weather{
  line-height: 22px;
  margin: 10px 0;
  padding: 0 10px;
}

/*昨天天气信息*/
.yesterday{
  width:93%;
  padding:20rpx;
  margin-top:50rpx;
  border-radius:10rpx;
  border:1px solid #043567;
}

/*昨天的*/
.yesterday-title{
  color:red;
}

/*最近五天天气信息*/
.forecast{
  width: 100%;
  display:flex;
  margin-top:50rpx;
  align-self:flex-end;
}

/*每一天的天气信息*/
.next-day{
  width:20%;
  height:450rpx;
  text-align:center;
  line-height:30px;
  font-size:14px;
  margin: 0 3rpx;
  border:1px solid #043567;
  border-radius:10rpx;
}

/*日期*/
.date{
  margin-bottom:20rpx;
  border-bottom:1px solid #043567;
  color:#F29F39;
}

/*搜索区域*/
.search-area{
    display:flex;
    background: #f4f4f4;
    padding: 1rem 0.5rem;
}

/*搜索区域的输入框*/
.search-area input{
    width:70%;
    height: 38px;
    line-height: 38px;
    border: 1px solid #ccc;
    box-shadow: inset 0 0 10px #ccc;
    color: #000;
    background-color:#fff;
    border-radius: 5px;
}

/*搜索区的按钮*/
.search-area button{
   width: 30%;
    height: 40px;
    line-height: 40px;
    margin-left: 5px;
}

index.js

var util = require('../../utils/util.js');
Page({
  data: {
    weather: {
    }
  },
  onLoad: function (options) {
    this.setData({
      today: util.formatTime(new Date()).split(' ')[0]  //更新当前日期
    });
    var self = this;
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        wx.request({
          url: 'http://api.map.baidu.com/geocoder/v2/' +
          '?ak=ASAT5N3tnHIa4APW0SNPeXN5&location=' +
          res.latitude + ',' + res.longitude + '&output=json&pois=0',
          data: {},
          header: {
            'Content-Type': 'application/json'
          },
          success: function (res) {
            var city = res.data.result.addressComponent.city.replace('市', '');//城市名称
            self.searchWeather(city);  //查询指定城市的天气信息
          }
        })
      }
    })
  },
  //根据城市名称查询天气预报信息
  searchWeather: function (cityName) {
    var self = this;
    wx.request({
      //天气预报查询接口
      url: 'http://wthrcdn.etouch.cn/weather_mini?city=' + cityName,
      data: {},
      header: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        if (res.data.status == 1002) //无此城市
        {
          //显示错误信息
          wx.showModal({
            title: '提示',
            content: '输入的城市名称有误，请重新输入！',
            showCancel: false,
            success: function (res) {
              self.setData({ inputCity: '' });
            }
          })
        } else {
          var weather = res.data.data;  //获取天气数据

          for (var i = 0; i < weather.forecast.length; i++) {
            var d = weather.forecast[i].date;
            //处理日期信息，添加空格
            weather.forecast[i].date = '　' + d.replace('星期', '　星期');
          }
          self.setData({
            city: cityName,      //更新显示城市名称
            weather: weather,    //更新天气信息
            inputCity: ''        //清空查询输入框
          })
        }
      }
    })
  },
  //输入事件
  inputing: function (e) {
    this.setData({ inputCity: e.detail.value });
  },
  //搜索按钮
  bindSearch: function () {
    this.searchWeather(this.data.inputCity);
  }
})

永久下载链接：http://qiannao.com/file/303082825/4bce71db/