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

更新时间：2018年07月18日 17:13:52 作者：顺子_RTFSC

这篇文章主要为大家详细介绍了微信小程序实现天气预报功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

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

另外，本站在线工具小程序上有一款天气查询工具，还添加了城市选择的功能，感兴趣的朋友可以扫描如下小程序码查看：

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

您可能感兴趣的文章:

原生JS和jQuery操作DOM对比总结
这篇文章主要给大家介绍了原生JS和jQuery操作DOM的一些对比总结，文中总结了很多的对比，相信对大家的学习或者工作能带来一定的帮助，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-01-01
js实现仿百度瀑布流的方法
这篇文章主要介绍了js实现仿百度瀑布流的方法,以完整实例形式分析了js仿百度瀑布流的相关样式与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
js实现购物车商品数量加减
这篇文章主要为大家详细介绍了js实现购物车商品数量加减，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
十个开发人员面临的最常见的JavaScript问题总结
今天，JavaScript 是几乎所有现代 Web 应用的核心。这就是为什么JavaScript问题，以及找到导致这些问题的错误，是 Web 发者的首要任务。本文总结了十个常见的问题及解决方法，需要的可以参考一下
2022-11-11
原生js拖拽(第一课未兼容)拖拽思路
第一步点击需要拖动的元素,在点击下的元素被选中，进行move移动,当鼠标弹起的时候，停止动作.点击元素oDIV的时候，可用的是oDIV区域，而move和up则是全局区域
2013-03-03
20个JS简写技巧提升工作效率
这篇文章主要介绍了20个JS简写技巧提升工作效率，本文特点以言简意赅为主，围绕JS简写技巧的话题展开全文，具有一定的查看价值，需要的小伙伴可以参考一下
2021-12-12
javascript 进度条实现代码
这个例子是通过测试的。是真真正正根据记录的条数挂钩的。
2009-07-07
javascript addLoadEvent函数说明
网页加载完整后会触发一个onload事件，默认地一个事件只能和一个函数绑定。
2010-01-01
解决JS中乘法的浮点错误的方法
本篇文章主要介绍了解决JS中乘法的浮点错误的方法。需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
前端获取用户地理定位的方法及一些注意事项
这篇文章主要介绍了移动端和PC端在使用定位过程中需要注意的事项,包括系统GPS打开、定位权限、页面授权等,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-02-02

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具