這個案例是仿UC中天氣界面做的中間也有點出入，預留了顯示當前城市名字和刷新圖標的位置，自己可以寫下，也可以添加搜索城市。值得注意的是100%這個設置好像已經不好使了，可以通過獲取設備的高度通過數據綁定設置高度。地址：https://github.com/shuncaigao/Weather

界面主要分為四部分：

第一部分

這里是預留的一塊可以自行添加補充下

<view class="newTopView">
<!--左邊添加當前城市名字，點擊跳轉選擇城市 右邊添加刷新當前天氣-->
</view>

第二部分：

 <view class="topView">
    <view class="degreeView">
    <!--當前溫度-->
      <text class="degree">{{currentTemperature}}</text>
      <!--度數圖標-->
      <image class="circle" src="../../image/circle.png"></image>
    </view>
    <view class="detailInfo">
      <view class="degreeView">
      <!--夜間天氣情況-->
        <text class="detailInfoDegree">{{nightAirTemperature}}</text>
        <image class="detailInfoCircle" src="../../image/circle.png" />
        <text class="detailInfoLine">/</text>
        <!--白天天氣-->
        <text class="detailInfoDegree">{{dayAirTemperature}}</text>
        <!-- style優先級比class高會覆蓋class中相同屬性 -->
        <image class="detailInfoCircle" style="margin-left: 57rpx; margin-right: 40rpx" src="../../image/circle.png" />
        <!-- 當前天氣名字 -->
        <text class="detailInfoName">{{weather}}</text>
      </view>
    </view>
  </view>

第四部分：

 <!-- 底部view -->
  <view class="bottomView">
  <!--數據返回的不是數組 在js中拼接的數組-->
    <block wx:for-items="{{list}}">
      <view class="bottomItemView">
        <image class="bottomImage" src="{{item.day_weather_pic}}" style="margin-bottom: 15rpx;" />
        <text wx:if="{{item.weekday == 1}}" class="bottomText">星期一</text>
        <text wx:elif="{{item.weekday == 2}}" class="bottomText">星期二</text>
        <text wx:elif="{{item.weekday == 3}}" class="bottomText">星期三</text>
        <text wx:elif="{{item.weekday == 4}}" class="bottomText">星期四</text>
        <text wx:elif="{{item.weekday == 5}}" class="bottomText">星期五</text>
        <text wx:elif="{{item.weekday == 6}}" class="bottomText">星期六</text>
        <text wx:else="{{item.weekday == 7}}" class="bottomText">星期日</text>
        <view class="degreeView" style="margin-top: 20rpx;">
          <text class="detailInfoDegree">{{item.night_air_temperature}}</text>
          <image class="detailInfoCircle" src="../../image/circle.png" />
          <text class="detailInfoLine">/</text> 
          <text class="detailInfoDegree">{{item.day_air_temperature}}</text>
          <!-- style優先級比class高會覆蓋class中相同屬性 -->
          <image class="detailInfoCircle" style="margin-left: 57rpx; margin-right: 40rpx" src="../../image/circle.png" />
        </view>
      </view>

js

//index.js
//獲取應用實例
var app = getApp()
Page({
  data: {
    //加載狀態
    loadingHidden: false,
    //當前溫度
    currentTemperature: '',
    //夜間溫度
    nightAirTemperature: '',
    //白天溫度
    dayAirTemperature: '',
    //當前天氣
    weather: '',
    //污染指數
    aqi: '',
    //污染程度
    quality: '',
    //風力
    windPower: '',
    //風向
    windDirection: '',
    //因為數據返回不是數組所以要自己封裝一個數組
    list: [],
    height: 0,


  },

  onLoad: function () {
    console.log('onLoad')
    var that = this

    //100%好像不好使 可以獲取設備高度
    wx.getSystemInfo({
      success: function (res) {
        that.data.height = res.windowHeight;
      }
    })

    wx.getLocation({
      success: function (res) {
        //通過經緯度請求數據
        wx.request({
          //這個網站有免費API趕緊收藏
          url: 'http://route.showapi.com/9-5',
          data: {
            showapi_appid: '11697',
            showapi_sign: '6c0c15c5ec61454dac5288cea2d32881',
            //
            from: '5',
            lng: res.longitude,
            lat: res.latitude,
            //獲取一周情況 0是不獲取
            needMoreDay: '1',
            needIndex: '1'
          },
          success: function (res) {
            console.log(res)
            console.log(res.data.showapi_res_body.now.api)
            that.setData({
              //改變加載狀態
              loadingHidden: true,

              currentTemperature: res.data.showapi_res_body.now.temperature,
              nightAirTemperature: res.data.showapi_res_body.f1.night_air_temperature,
              dayAirTemperature: res.data.showapi_res_body.f1.day_air_temperature,
              weather: res.data.showapi_res_body.now.weather,
              aqi: res.data.showapi_res_body.now.aqi,
              quality: res.data.showapi_res_body.now.aqiDetail.quality,
              windPower: res.data.showapi_res_body.now.wind_power,
              windDirection: res.data.showapi_res_body.now.wind_direction,
              //拼接數組
              list: [
                {
                  'day_weather_pic': res.data.showapi_res_body.f1.day_weather_pic,
                  'weekday': res.data.showapi_res_body.f1.weekday,
                  'day_air_temperature': res.data.showapi_res_body.f1.day_air_temperature,
                  'night_air_temperature': res.data.showapi_res_body.f1.night_air_temperature
                },
                {
                  'day_weather_pic': res.data.showapi_res_body.f2.day_weather_pic,
                  'weekday': res.data.showapi_res_body.f2.weekday,
                  'day_air_temperature': res.data.showapi_res_body.f2.day_air_temperature,
                  'night_air_temperature': res.data.showapi_res_body.f2.night_air_temperature
                },
                {
                  'day_weather_pic': res.data.showapi_res_body.f3.day_weather_pic,
                  'weekday': res.data.showapi_res_body.f3.weekday,
                  'day_air_temperature': res.data.showapi_res_body.f3.day_air_temperature,
                  'night_air_temperature': res.data.showapi_res_body.f3.night_air_temperature
                },
                {
                  'day_weather_pic': res.data.showapi_res_body.f4.day_weather_pic,
                  'weekday': res.data.showapi_res_body.f4.weekday,
                  'day_air_temperature': res.data.showapi_res_body.f4.day_air_temperature,
                  'night_air_temperature': res.data.showapi_res_body.f4.night_air_temperature
                },
                {
                  'day_weather_pic': res.data.showapi_res_body.f5.day_weather_pic,
                  'weekday': res.data.showapi_res_body.f5.weekday,
                  'day_air_temperature': res.data.showapi_res_body.f5.day_air_temperature,
                  'night_air_temperature': res.data.showapi_res_body.f5.night_air_temperature
                },
                {
                  'day_weather_pic': res.data.showapi_res_body.f6.day_weather_pic,
                  'weekday': res.data.showapi_res_body.f6.weekday,
                  'day_air_temperature': res.data.showapi_res_body.f6.day_air_temperature,
                  'night_air_temperature': res.data.showapi_res_body.f6.night_air_temperature
                },
                {
                  'day_weather_pic': res.data.showapi_res_body.f7.day_weather_pic,
                  'weekday': res.data.showapi_res_body.f7.weekday,
                  'day_air_temperature': res.data.showapi_res_body.f7.day_air_temperature,
                  'night_air_temperature': res.data.showapi_res_body.f7.night_air_temperature
                }

              ]
            })
          }
        })

      }
    })

  }
})

PS：

開發者工具無法顯示問題：是因為View沒有獲得高度，默認個高度或者直接修改wxml中height高度即可