这个案例是仿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 class="centerView">    <view class="centerItem" style="margin-right: 25rpx;">      <image class="centerItemImage" src="../../image/leaf.png" />      <!-- 相同属性抽出来！ -->      <!--污染指数-->      <text class="centerItemText" style="margin-left: 10rpx; margin-right: 10rpx">{{aqi}}</text>      <!--污染指数对应name-->      <text class="centerItemText">{{quality}}</text>    </view>    <view class="centerItem" style="margin-left: 25rpx">      <image class="centerItemImage" src="../../image/wind.png" />      <text class="centerItemText" style="margin-left: 10rpx; margin-right: 10rpx">{{windPower}}</text>      <!--风-->      <text class="centerItemText">{{windDirection}}</text>    </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,  },  onl oad: 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                }              ]            })          }        })      }    })  }})

wxss

.container {  display: flex;  flex-direction: column;  justify-content: space-between;}.newTopView {  display: flex;  flex-direction: row;  justify-content: space-between;}/*  头部样式上半部分*/.topView {  flex-direction: column;  align-self: center;  margin-top: -450rpx;}/*当前度数样式*/.degreeView {  flex-direction: row;  position: relative;}/*当前温度度数图标*/.circle {  width: 35rpx;  height: 35rpx;    position: absolute;  left: 130rpx;} /*当前度数数组*/.degree {  color: white;  font-size: 130rpx}/*详细View样式*/.detailInfoView {  flex-direction: row;}/*当前最高和最低温度度数图标*/.detailInfoCircle {  width: 20rpx;  height: 20rpx;    position: absolute;  left: 30rpx;} /*当前度数数组*/.detailInfoDegree {  color: white;  font-size: 30rpx}/*斜线*/.detailInfoLine {  color: white;  margin-left: 15rpx;  font-size: 30rpx;}/*比如阴天 晴天，暴雨*/.detailInfoName {  font-size: 30rpx;  color: white;  margin-left: 20rpx;  align-self: center}/*中间view样式*/.centerView {  display: flex;  flex-direction: row;  margin-top: -550rpx;  justify-content: center;  align-items: center;}/*中间view分为两个view*/.centerItem {  display: flex;  flex-direction: row;  align-items: center;  justify-content: center;}/*Item中图片样式*/.centerItemImage {  width: 25rpx;  height: 25rpx;}/*文字样式*/.centerItemText {  font-size: 28rpx;  color: white;}/*底部view样式*/.bottomView {  margin-top: -200rpx;  display: flex;  flex-direction: row;  justify-content: space-around;  align-items: center;}.bottomItemView {  display: flex;  flex-direction: column;  align-items: center;  margin-bottom: 200rpx;}/*最近七天样式*/.bottomImage {  width: 70rpx;  height: 70rpx;}.bottomText {  font-size: 28rpx;  color: white;}

PS：

开发者工具无法显示问题：是因为View没有获得高度，默认个高度或者直接修改wxml中height高度即可