程序如下：<template>

<div class="wrapper">

  <div class="header-wrapper">

    <div class="header-title">

      <span>空气质量良好</span>

      <span>武汉市</span>

    </div>

   <div class="header-text">   

   <span>25℃</span>

   <span>晴</span>

   </div>

  <div class="weather-advice">天气好，适合外出散步</div>

  </div>

  <div class="body-wrapper">

   <div class="body">

   <div class="data-wrapper">

     <div class="data">

       <img class="data-logo" src="/static/images/temp.png"/>

       <div class="data-text">

         <div class="data-title">水温：</div>

         <div class="data-value">26℃</div>

       </div>

     </div>

     <div class="data">

       <img class="data-logo" src="/static/images/wet.png"/>

       <div class="data-text">

         <div class="data-title">湿度：</div>

         <div class="data-value">69％</div>

       </div>

     </div>

   </div>

   </div>

  </div>

</div>

</template>

<script>

export default {

  data () {

    return {

    }

  },

  components: {

  },

  methods: {

    },

  created () {

    // let app = getApp()

  }

}

</script>

<style lang="scss" scoped>

.wrapper{

  padding:15px;

  .header-wrapper{

    background-color:#3d7ef9;

    border-radius: 20px;

    color: white;

    box-shadow:#d6d6d6 0px 0px 5px;

    padding: 15px 30px;

    .header-title{

      display: flex;

      justify-content: space-between;

    }

    .header-text{

      font-size:32px;

      font-weight:400;

      display: flex;

      justify-content: space-between;

    }

    .weather-advice{

      margin-top:20px;

      font-size:18px;

    }

  }

  .body-wrapper{

    display: flex;

    justify-content: space-between;

    margin-top: 20px;

    .data{

      background-color: #fff;

      width:150px;

      height:80px;

      border-radius: 20px;

      display: flex;

      justify-content: space-around;

      padding:0 8px;

      box-shadow: #d6d6d6 0px 0px 5px;

      .data-logo{

        height: 36px;

        width: 36px;

        margin-top:15px;

      }

      .data-text{

        margin-top:15px;

        color:#7f7f7f;

        .data-value{

          font-size: 20px;

        }

      }

    }

  }

}

</style>

而开发者工具的微信小程序显示如下：

而教程的显示效果如下：