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


Posted in Javascript onJuly 18, 2018

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

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

这个案例是仿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高度即可。

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
vue代理和跨域问题的解决
Jul 18 #Javascript
小程序自定义组件实现城市选择功能
Jul 18 #Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 #Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 #Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 #Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 #Javascript
微信小程序日期选择器实例代码
Jul 18 #Javascript
You might like
php框架Phpbean说明
2008/01/10 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
一些实用的jQuery代码片段收集
2011/07/12 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
详细介绍Python语言中的按位运算符
2013/11/26 Python
python实现文件分组复制到不同目录的例子
2014/06/04 Python
python定时器(Timer)用法简单实例
2015/06/04 Python
python django事务transaction源码分析详解
2017/03/17 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
a标签下载链接的简单实现
2016/09/13 HTML / CSS
英国精品买手店:Browns Fashion
2016/09/29 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
教育实习生的自我评价分享
2013/11/21 职场文书
教师产假请假条
2014/04/10 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS