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


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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
js正则表达式的使用详解
Jul 09 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
prototype.js常用函数详解
Jun 18 Javascript
jQuery手风琴的简单制作
May 12 jQuery
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 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
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
flexigrid 参数说明
2010/11/23 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
详解Document.Cookie
2015/12/25 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
python自动格式化json文件的方法
2015/03/11 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
使用C++扩展Python的功能详解
2018/01/12 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
如何在python中判断变量的类型
2020/07/29 Python
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
Jdbc数据访问技术面试题
2012/03/30 面试题
区域销售经理职责
2013/12/22 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
离婚代理词范文
2015/05/23 职场文书
2015新员工工作总结范文
2015/10/15 职场文书