微信小程序实现天气预报功能


            本文实例为大家分享了微信小程序实现天气预报功能的具体代码，供大家参考，具体内容如下



这个案例是仿UC中天气界面做的中间也有点出入，预留了显示当前城市名字和刷新图标的位置，自己可以写下，也可以添加搜索城市。值得注意的是100%这个设置好像已经不好使了，可以通过获取设备的高度通过数据绑定设置高度。地址：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,





 },



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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。