使用uniapp展示空气质量详情和未来5日天气

实现功能

展示了当前城市天气的空气质量相关信息, 空气质量六因子
展示了未来5日天气, 粘贴代码直接运行就可以, js, css都是全的

实现效果图

---

getweather

函数中用到了appid和appsecret字段, 在App.vue中, 代码如下

<script>
	export default {
		/*
		天气api接口官网 http://tianqiapi.com
		appid和appsecret请在官网注册, 进入用户中心获取, 新用户可以免费请求3000次
		*/
		globalData:{
			appid : '06369426',
			appsecret : 'VVM7jMR0'
		},
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

vue代码

<template>
	<view style="background-color: #E7ECF4; height: 100%;">
		<view style="padding:10px 10px 200px;">
			<view style="font-size: 12px; color:#333; text-align: right;">{{weather.aqi.update_time}}更新</view>
			<view style="text-align: center; padding-top: 20px;">
				<view style="font-size: 46px; ">
					<text style="position: relative; padding:10px;">{{weather.aqi.air}}<text
							style="background-color: #FFEF01; border-radius: 50%; padding:5px 8px; font-size: 14px; position: absolute; top: 0px; right:-20px;">{{weather.aqi.air_level}}</text></text>

				</view>
				<view style="padding: 10px 0;"><text
						style="font-size: 16px; background-color: #fff; color: #14C355; border-radius:8px; padding:5px;">AQI指数</text>
				</view>
				<view style="font-size: 13px; padding:10px 30px 20px;">{{weather.aqi.air_tips}}</view>
			</view>

			<view
				style="font-size: 14px; padding: 10px; border-radius:5px; background-color: #fff; display: flex; text-align: center; ">
				<view style="width: 16.66%;">
					<view style="font-size: 16px;">{{weather.aqi.pm10}}</view>PM10
				</view>
				<view style="width: 16.66%;">
					<view style="font-size: 16px;">{{weather.aqi.pm25}}</view>PM2.5
				</view>
				<view style="width: 16.66%;">
					<view style="font-size: 16px;">{{weather.aqi.no2}}</view>NO2
				</view>
				<view style="width: 16.66%;">
					<view style="font-size: 16px;">{{weather.aqi.so2}}</view>SO2
				</view>
				<view style="width: 16.66%;">
					<view style="font-size: 16px;">{{weather.aqi.o3}}</view>O3
				</view>
				<view style="width: 16.66%;">
					<view style="font-size: 16px;">{{weather.aqi.co}}</view>CO
				</view>
			</view>

			<view
				style="margin-top:15px; font-size: 14px; padding: 10px; border-radius:5px; background-color: #fff;  text-align: center; ">
				<view style="text-align: left;">{{weather.city}}未来5日天气</view>
				<view style="display: flex; ">
					<view style="width: 20%;">
						<view class="itema">
							{{weather.data[1].date}}</view>
						<view class="itemb">{{weather.data[1].wea}}
						</view>
						<view class="itemc">
							{{weather.data[1].tem2}}~{{weather.data[1].tem1}}°</view>
						<view class="itemd">
							<text
								class="iteme">{{weather.data[1].air_level}}</text>
						</view>
					</view>
					<!--2-->
					<view style="width: 20%;">
						<view class="itema">
							{{weather.data[2].date}}</view>
						<view class="itemb">{{weather.data[2].wea}}
						</view>
						<view class="itemc">
							{{weather.data[2].tem2}}~{{weather.data[2].tem1}}°</view>
						<view class="itemd">
							<text
								class="iteme">{{weather.data[2].air_level}}</text>
						</view>
					</view>
					<!--./2-->
					<!--3-->
					<view style="width: 20%;">
						<view class="itema">
							{{weather.data[3].date}}</view>
						<view class="itemb">{{weather.data[3].wea}}
						</view>
						<view class="itemc">
							{{weather.data[3].tem2}}~{{weather.data[3].tem1}}°</view>
						<view class="itemd">
							<text
								class="iteme">{{weather.data[3].air_level}}</text>
						</view>
					</view><!--./3--><!--4-->
					<view style="width: 20%;">
						<view class="itema">
							{{weather.data[4].date}}</view>
						<view class="itemb">{{weather.data[4].wea}}
						</view>
						<view class="itemc">
							{{weather.data[4].tem2}}~{{weather.data[4].tem1}}°</view>
						<view class="itemd">
							<text
								class="iteme">{{weather.data[4].air_level}}</text>
						</view>
					</view><!--./4--><!--5-->
					<view style="width: 20%;">
						<view class="itema">
							{{weather.data[5].date}}</view>
						<view class="itemb">{{weather.data[5].wea}}
						</view>
						<view class="itemc">
							{{weather.data[5].tem2}}~{{weather.data[5].tem1}}°</view>
						<view class="itemd">
							<text
								class="iteme">{{weather.data[5].air_level}}</text>
						</view>
					</view><!--./5-->
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				city:'',
				weather: [],
				title: '易客API',
				phrase_img: '',
				bg: ''
			}
		},
		onLoad() {
			this.getWeather();
		},
		methods: {
			formatDate(date) {
				var date = new Date(date);
				return (date.getMonth() + 1) + '-' + (date.getDate());
			},
			getWeather() {
				var scity = uni.getStorageSync('storage_city');
				if (scity != '') {
					this.city = scity;
				}
				const appid = getApp().globalData.appid;
				const appsecret = getApp().globalData.appsecret;
				const url = 'http://v1.yiketianqi.com/api?unescape=1&version=v91&appid=' + appid + '&appsecret=' +
					appsecret + '&city=' + this.city;

				uni.request({
					url: url,
					success: (res) => {

						if (res.data.errcode == "100") {
							// 错误处理
							console.error('获取天气信息失败', res.data);
						} else {
							var mydata = res.data;
							for (var i = 0; i < mydata.data.length; i++) {
								mydata.data[i]['date'] = this.formatDate(mydata.data[i]['date']);
								mydata.data[i]['wea_img'] = '/static/skins/' + mydata.data[i]['wea_img'] +
									'.png';
							}
							console.log(mydata);

							this.weather = mydata;
							// update title
							uni.setNavigationBarTitle({
								title: this.weather.city + '空气质量'
							});
						}
					},
					fail: (error) => {
						// 请求失败处理
						console.error('请求失败', error);
					}
				});
			}
		}
	}
</script>

<style>
.itema{font-size: 16px;padding-top: 10px; padding-bottom: 5px;font-size: 13px;}
.itemb{font-size: 16px;padding-bottom: 5px;font-size: 12px; white-space: nowrap;}
.itemc{font-size: 16px;padding-bottom: 10px;font-size: 14px;}
.itemd{font-size: 16px;font-size: 12px;padding-bottom: 10px;}
.iteme{background-color: #FFEF01; border-radius: 10px; padding:2px 5px;}
</style>