微信小程序实战之天气预报

Posted 2020-09-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序实战之天气预报相关的知识，希望对你有一定的参考价值。

原文:微信小程序实战之天气预报

技术分享

这个案例是仿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>

//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
                }

              ]
            })
          }
        })

      }
    })

  }
})

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高度即可

以上是关于微信小程序实战之天气预报的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序获取今日天气预报代码小程序获取七日天气

微信小程序第七天WXML语法之模板用法

2018年最新微信小程序开发零基础

微信小程序代码片段

微信小程序之购物数量加减 —— 微信小程序实战商城系列