微信小程序实现天气预报功能
更新时间：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>
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高度即可。
另外，本站在线工具小程序上有一款天气查询工具，还添加了城市选择的功能，感兴趣的朋友可以扫描如下小程序码查看：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
一种很常见的写法,大家都是这样写的，但如果这样的代码，杀毒软件认为是病毒的吧，就太恶劣的。判断能力也太差了。2009-09-09
JavaScript学习笔记之取值函数getter与取值函数setter详解
这篇文章主要介绍了JavaScript取值函数getter与取值函数setter，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
利用CSS、JavaScript及Ajax实现高效的图片预加载
图片预加载想必大家都不陌生吧，实现预加载图片有很多方法，包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案，十分高效2013-10-10
JS文本框不能输入空格验证方法，需要的朋友可以参考一下2013-03-03
这篇文章主要为大家介绍了JavaScript 程序循环结构，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了js实现精确到秒的日期选择器,以完整实例形式分析了JavaScript日期选择器的实现步骤与相关技巧,涉及JavaScript针对时间与日期的相关运算,需要的朋友可以参考下2016-04-04
IE的有条件注释是一种专有的（因此是非标准的）、对常规（X）HTML注释的Miscrosoft扩展。2009-08-08
农历是日常生活中不可或缺的一部分，它与人类的生活息息相关，从某种程度上说，它一直伴随着我们，今天的任务是JavaScript转换农历类的实现，感兴趣的你可以千万不要错过，希望本文对你有所帮助2013-01-01
下面小编就为大家带来一篇js中 计算两个日期间的工作日的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了JavaScript分页功能的实现方法,涉及javascript操作分页的相关技巧,需要的朋友可以参考下2015-04-04
最新评论