页面效果图展示:
实现代码:
<template>
<view class="content">
<view class="content-top">
<text class="name">{{city}}</text>
</view>
<view class="background">
<view class="content-middle">
<text class="temp-left">{{dataArr.temperature}}°</text>
<view class="temp-middle">
<text class="temp-weather">{{dataArr.weather}}</text>
<text class="temp-maxmin">{{dataArr.temperature-3}}/{{dataArr.temperature-(-3)}}℃</text>
</view>
<image :src="selecturl" mode="aspectFit" class="temp-icon"> </image>
</view>
<view class="content-bottom">
<view class="info">
<image class="info-icon" src="../../static/images/ic_qxjc_weater.png" mode="aspectFit"></image>
<text class="info-data">{{dataArr.weather}}</text>
<text class="info-explain">天气</text>
</view>
<view class="info">
<image class="info-icon" src="../../static/images/ic_qxjc_leaf.png" mode="aspectFit"></image>
<text class="info-data">{{dataArr.humidity}}</text>
<text class="info-explain">空气湿度</text>
</view>
<view class="info">
<image class="info-icon" src="../../static/images/ic_qxjc_temp.png" mode="aspectFit"></image>
<text class="info-data">{{dataArr.temperature}}</text>
<text class="info-explain">温度</text>
</view>
<view class="info">
<image class="info-icon" src="../../static/images/ic_qxjc_windy.png" mode="aspectFit"></image>
<text class="info-data">暂无数据</text>
<text class="info-explain">风速</text>
</view>
<view class="info">
<image class="info-icon" src="../../static/images/ic_qxjc_celsius.png" mode="aspectFit"></image>
<text class="info-data">{{dataArr.temperature-(-3)}}</text>
<text class="info-explain">当天最高温度</text>
</view>
<view class="info">
<image class="info-icon" src="../../static/images/ic_qxjc_celsius.png" mode="aspectFit"></image>
<text class="info-data">{{dataArr.temperature-3}}</text>
<text class="info-explain">当天最低温度</text>
</view>
<view class="info">
<image class="info-icon" src="../../static/images/ic_qxjc_wind.png" mode="aspectFit"></image>
<text class="info-data">{{dataArr.winddirection}}</text>
<text class="info-explain">风向</text>
</view>
<view class="info">
<image class="info-icon" src="../../static/images/ic_qxjc_tornado.png" mode="aspectFit"></image>
<text class="info-data">{{dataArr.windpower}}</text>
<text class="info-explain">风力</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
city: "衡阳蒸湘区",
//高德地图api的key
gdkey: "dcc44b404271d76d8d8bf53febb5f94f",
adcode: 0,
dataArr: [],
//根据天气情况选择图片,默认或无对应状态图片时显示logo
selecturl: "../../static/logo.png",
//预先储存相关天气的图片和名字
imgarry: [{
name: '阴',
imgurl: '../../static/images/weather_ic_cloudy.png'
},
{
name: '晴',
imgurl: '../../static/images/weather_ic_sunny_day.png'
},
{
name: '霾',
imgurl: '../../static/images/weather_ic_fog.png'
},
{
name: '雨',
imgurl: '../../static/images/weather_ic_hail.png'
}, {
name: '雪',
imgurl: '../../static/images/weather_ic_cloudy.png'
}, {
name: '扬沙',
imgurl: '../../static/images/weather_ic_dust.png'
}
]
}
},
onLoad() {
this.getadcode();
console.log("loading.....")
},
methods: {
//获取城市编码,高德地图查询使用的是编码
async getadcode() {
uni.request({
url: "https://restapi.amap.com/v3/geocode/geo?parameters",
data: {
key: this.gdkey,
address: this.city
},
success: res => {
console.log(res.data.geocodes[0].adcode)
this.adcode = res.data.geocodes[0].adcode
this.getdata()
},
fail: err => {
console.log(err)
}
})
},
//根据城市编码获取天气状态
getdata() {
uni.request({
url: "https://restapi.amap.com/v3/weather/weatherInfo?parameters",
data: {
key: this.gdkey,
city: this.adcode,
extensions: 'base'
},
success: res => {
console.log(res.data.lives[0])
this.dataArr = res.data.lives[0]
this.select()
},
fail: err => {
console.log(err)
}
})
},
//依据天气状况对比选择对应图片url
select() {
this.imgarry.forEach((item, index) => {
console.log("foreach" + this.dataArr.weather)
if (item.name == this.dataArr.weather) this.selecturl = item.imgurl
})
}
},
}
</script>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
.content-top {
width: 100%;
height: 70rpx;
background-color: #68CF96;
padding-left: 20rpx;
padding-top: 15rpx;
.name {
font-size: 40rpx;
color: #ffffff;
}
}
.content-middle {
display: flex;
//background-color: #EEFFEE;
width: 100%;
height: 130rpx;
padding-top: 20rpx;
.temp-left {
font-size: 60rpx;
font-weight: bold;
padding-left: 40rpx;
}
.temp-middle {
display: flex;
flex-direction: column;
padding-left: 20rpx;
font-size: 30rpx;
}
.temp-icon {
padding-left: 300rpx;
width: 130rpx;
height: 130rpx;
}
}
.content-bottom {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 750rpx;
justify-content: center;
// background-color: #EEFFEE;
.info {
display: flex;
flex-direction: column;
width: 300rpx;
height: 150rpx;
background-color: #ffffff;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px 0.3px;
border-radius: 15rpx;
padding-left: 20rpx;
padding-top: 20rpx;
margin-right: 15rpx;
margin-bottom: 15rpx;
.info-icon {
width: 50rpx;
height: 50rpx;
}
.info-data {
font-size: 30rpx;
}
.info-explain {
font-size: 30rpx;
color: #d8d5d7;
}
}
}
.background::after {
content: '';
background: linear-gradient(to bottom, #86b972, #a0c68f, #accc9e, #b9d2ad, #c6d8bb);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.3;
z-index: -1;
}
}
</style>