当前位置：Gxlcms > JavaScript > 微信小程序实现天气预报功能

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

时间：2021-07-01 10:21:17 帮助过：711人阅读

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

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

界面主要分为四部分：

第一部分

这里是预留的一块可以自行添加补充下

  1. <view class="newTopView">
  2. <!--左边添加当前城市名字，点击跳转选择城市 右边添加刷新当前天气-->
  3. </view>

第二部分：

  1.  <view class="topView">
  2.  <view class="degreeView">
  3.  <!--当前温度-->
  4.  <text class="degree">{{currentTemperature}}</text>
  5.  <!--度数图标-->
  6.  <image class="circle" src="../../image/circle.png"></image>
  7.  </view>
  8.  <view class="detailInfo">
  9.  <view class="degreeView">
  10.  <!--夜间天气情况-->
  11.  <text class="detailInfoDegree">{{nightAirTemperature}}</text>
  12.  <image class="detailInfoCircle" src="../../image/circle.png" />
  13.  <text class="detailInfoLine">/</text>
  14.  <!--白天天气-->
  15.  <text class="detailInfoDegree">{{dayAirTemperature}}</text>
  16.  <!-- style优先级比class高会覆盖class中相同属性 -->
  17.  <image class="detailInfoCircle" style="margin-left: 57rpx; margin-right: 40rpx" src="../../image/circle.png" />
  18.  <!-- 当前天气名字 -->
  19.  <text class="detailInfoName">{{weather}}</text>
  20.  </view>
  21.  </view>
  22.  </view>


第三部分：

  1.  <!-- 中间部分 -->
  2.  <view class="centerView">
  3.  <view class="centerItem" style="margin-right: 25rpx;">
  4.  <image class="centerItemImage" src="../../image/leaf.png" />
  5.  <!-- 相同属性抽出来！ -->
  6.  <!--污染指数-->
  7.  <text class="centerItemText" style="margin-left: 10rpx; margin-right: 10rpx">{{aqi}}</text>
  8.  <!--污染指数对应name-->
  9.  <text class="centerItemText">{{quality}}</text>
  10.  </view>
  11.  <view class="centerItem" style="margin-left: 25rpx">
  12.  <image class="centerItemImage" src="../../image/wind.png" />
  13.  <text class="centerItemText" style="margin-left: 10rpx; margin-right: 10rpx">{{windPower}}</text>
  14.  <!--风-->
  15.  <text class="centerItemText">{{windDirection}}</text>
  16.  </view>
  17.  </view>

第四部分：

  1. <!-- 底部view -->
  2.  <view class="bottomView">
  3.  <!--数据返回的不是数组 在js中拼接的数组-->
  4.  <block wx:for-items="{{list}}">
  5.  <view class="bottomItemView">
  6.  <image class="bottomImage" src="{{item.day_weather_pic}}" style="margin-bottom: 15rpx;" />
  7.  <text wx:if="{{item.weekday == 1}}" class="bottomText">星期一</text>
  8.  <text wx:elif="{{item.weekday == 2}}" class="bottomText">星期二</text>
  9.  <text wx:elif="{{item.weekday == 3}}" class="bottomText">星期三</text>
  10.  <text wx:elif="{{item.weekday == 4}}" class="bottomText">星期四</text>
  11.  <text wx:elif="{{item.weekday == 5}}" class="bottomText">星期五</text>
  12.  <text wx:elif="{{item.weekday == 6}}" class="bottomText">星期六</text>
  13.  <text wx:else="{{item.weekday == 7}}" class="bottomText">星期日</text>
  14.  <view class="degreeView" style="margin-top: 20rpx;">
  15.   <text class="detailInfoDegree">{{item.night_air_temperature}}</text>
  16.   <image class="detailInfoCircle" src="../../image/circle.png" />
  17.   <text class="detailInfoLine">/</text> 
  18.   <text class="detailInfoDegree">{{item.day_air_temperature}}</text>
  19.   <!-- style优先级比class高会覆盖class中相同属性 -->
  20.   <image class="detailInfoCircle" style="margin-left: 57rpx; margin-right: 40rpx" src="../../image/circle.png" />
  21.  </view>
  22. </view>

js

  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5.  data: {
  6.  //加载状态
  7.  loadingHidden: false,
  8.  //当前温度
  9.  currentTemperature: '',
  10.  //夜间温度
  11.  nightAirTemperature: '',
  12.  //白天温度
  13.  dayAirTemperature: '',
  14.  //当前天气
  15.  weather: '',
  16.  //污染指数
  17.  aqi: '',
  18.  //污染程度
  19.  quality: '',
  20.  //风力
  21.  windPower: '',
  22.  //风向
  23.  windDirection: '',
  24.  //因为数据返回不是数组所以要自己封装一个数组
  25.  list: [],
  26.  height: 0,
  27.  },
  28.  onLoad: function () {
  29.  console.log('onLoad')
  30.  var that = this
  31.  //100%好像不好使 可以获取设备高度
  32.  wx.getSystemInfo({
  33.  success: function (res) {
  34.  that.data.height = res.windowHeight;
  35.  }
  36.  })
  37.  wx.getLocation({
  38.  success: function (res) {
  39.  //通过经纬度请求数据
  40.  wx.request({
  41.   //这个网站有免费API赶紧收藏
  42.   url: 'http://route.showapi.com/9-5',
  43.   data: {
  44.   showapi_appid: '11697',
  45.   showapi_sign: '6c0c15c5ec61454dac5288cea2d32881',
  46.   //
  47.   from: '5',
  48.   lng: res.longitude,
  49.   lat: res.latitude,
  50.   //获取一周情况 0是不获取
  51.   needMoreDay: '1',
  52.   needIndex: '1'
  53.   },
  54.   success: function (res) {
  55.   console.log(res)
  56.   console.log(res.data.showapi_res_body.now.api)
  57.   that.setData({
  58.   //改变加载状态
  59.   loadingHidden: true,
  60.   currentTemperature: res.data.showapi_res_body.now.temperature,
  61.   nightAirTemperature: res.data.showapi_res_body.f1.night_air_temperature,
  62.   dayAirTemperature: res.data.showapi_res_body.f1.day_air_temperature,
  63.   weather: res.data.showapi_res_body.now.weather,
  64.   aqi: res.data.showapi_res_body.now.aqi,
  65.   quality: res.data.showapi_res_body.now.aqiDetail.quality,
  66.   windPower: res.data.showapi_res_body.now.wind_power,
  67.   windDirection: res.data.showapi_res_body.now.wind_direction,
  68.   //拼接数组
  69.   list: [
  70.   {
  71.    'day_weather_pic': res.data.showapi_res_body.f1.day_weather_pic,
  72.    'weekday': res.data.showapi_res_body.f1.weekday,
  73.    'day_air_temperature': res.data.showapi_res_body.f1.day_air_temperature,
  74.    'night_air_temperature': res.data.showapi_res_body.f1.night_air_temperature
  75.   },
  76.   {
  77.    'day_weather_pic': res.data.showapi_res_body.f2.day_weather_pic,
  78.    'weekday': res.data.showapi_res_body.f2.weekday,
  79.    'day_air_temperature': res.data.showapi_res_body.f2.day_air_temperature,
  80.    'night_air_temperature': res.data.showapi_res_body.f2.night_air_temperature
  81.   },
  82.   {
  83.    'day_weather_pic': res.data.showapi_res_body.f3.day_weather_pic,
  84.    'weekday': res.data.showapi_res_body.f3.weekday,
  85.    'day_air_temperature': res.data.showapi_res_body.f3.day_air_temperature,
  86.    'night_air_temperature': res.data.showapi_res_body.f3.night_air_temperature
  87.   },
  88.   {
  89.    'day_weather_pic': res.data.showapi_res_body.f4.day_weather_pic,
  90.    'weekday': res.data.showapi_res_body.f4.weekday,
  91.    'day_air_temperature': res.data.showapi_res_body.f4.day_air_temperature,
  92.    'night_air_temperature': res.data.showapi_res_body.f4.night_air_temperature
  93.   },
  94.   {
  95.    'day_weather_pic': res.data.showapi_res_body.f5.day_weather_pic,
  96.    'weekday': res.data.showapi_res_body.f5.weekday,
  97.    'day_air_temperature': res.data.showapi_res_body.f5.day_air_temperature,
  98.    'night_air_temperature': res.data.showapi_res_body.f5.night_air_temperature
  99.   },
  100.   {
  101.    'day_weather_pic': res.data.showapi_res_body.f6.day_weather_pic,
  102.    'weekday': res.data.showapi_res_body.f6.weekday,
  103.    'day_air_temperature': res.data.showapi_res_body.f6.day_air_temperature,
  104.    'night_air_temperature': res.data.showapi_res_body.f6.night_air_temperature
  105.   },
  106.   {
  107.    'day_weather_pic': res.data.showapi_res_body.f7.day_weather_pic,
  108.    'weekday': res.data.showapi_res_body.f7.weekday,
  109.    'day_air_temperature': res.data.showapi_res_body.f7.day_air_temperature,
  110.    'night_air_temperature': res.data.showapi_res_body.f7.night_air_temperature
  111.   }
  112.   ]
  113.   })
  114.   }
  115.  })
  116.  }
  117.  })
  118.  }
  119. })

wxss

  1. .container {
  2.  display: flex;
  3.  flex-direction: column;
  4.  justify-content: space-between;
  5. }
  6. .newTopView {
  7.  display: flex;
  8.  flex-direction: row;
  9.  justify-content: space-between;
  10. }
  11. /* 头部样式上半部分*/
  12. .topView {
  13.  flex-direction: column;
  14.  align-self: center;
  15.  margin-top: -450rpx;
  16. }
  17. /*当前度数样式*/
  18. .degreeView {
  19.  flex-direction: row;
  20.  position: relative;
  21. }
  22. /*当前温度度数图标*/
  23. .circle {
  24.  width: 35rpx;
  25.  height: 35rpx; 
  26.  position: absolute;
  27.  left: 130rpx;
  28. } 
  29. /*当前度数数组*/
  30. .degree {
  31.  color: white;
  32.  font-size: 130rpx
  33. }
  34. /*详细View样式*/
  35. .detailInfoView {
  36.  flex-direction: row;
  37. }
  38. /*当前最高和最低温度度数图标*/
  39. .detailInfoCircle {
  40.  width: 20rpx;
  41.  height: 20rpx; 
  42.  position: absolute;
  43.  left: 30rpx;
  44. } 
  45. /*当前度数数组*/
  46. .detailInfoDegree {
  47.  color: white;
  48.  font-size: 30rpx
  49. }
  50. /*斜线*/
  51. .detailInfoLine {
  52.  color: white;
  53.  margin-left: 15rpx;
  54.  font-size: 30rpx;
  55. }
  56. /*比如阴天 晴天，暴雨*/
  57. .detailInfoName {
  58.  font-size: 30rpx;
  59.  color: white;
  60.  margin-left: 20rpx;
  61.  align-self: center
  62. }
  63. /*中间view样式*/
  64. .centerView {
  65.  display: flex;
  66.  flex-direction: row;
  67.  margin-top: -550rpx;
  68.  justify-content: center;
  69.  align-items: center;
  70. }
  71. /*中间view分为两个view*/
  72. .centerItem {
  73.  display: flex;
  74.  flex-direction: row;
  75.  align-items: center;
  76.  justify-content: center;
  77. }
  78. /*Item中图片样式*/
  79. .centerItemImage {
  80.  width: 25rpx;
  81.  height: 25rpx;
  82. }
  83. /*文字样式*/
  84. .centerItemText {
  85.  font-size: 28rpx;
  86.  color: white;
  87. }
  88. /*底部view样式*/
  89. .bottomView {
  90.  margin-top: -200rpx;
  91.  display: flex;
  92.  flex-direction: row;
  93.  justify-content: space-around;
  94.  align-items: center;
  95. }
  96. .bottomItemView {
  97.  display: flex;
  98.  flex-direction: column;
  99.  align-items: center;
  100.  margin-bottom: 200rpx;
  101. }
  102. /*最近七天样式*/
  103. .bottomImage {
  104.  width: 70rpx;
  105.  height: 70rpx;
  106. }
  107. .bottomText {
  108.  font-size: 28rpx;
  109.  color: white;
  110. }

PS：

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

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

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！