Vue: 实时天气小demo
作者：滚去睡觉
https://juejin.cn/post/7309443151687663668
浅聊一下
最近天气有点冷，给大家用vue做一个简单的天气预报小demo，记得多穿衣服哦各位！
准备
高德地图
打开高德地图api(高德开放平台 | 高德地图API (amap.com)[1])，注册成为开发者
点击控制台，左侧应用管理--我的应用中创建一个新应用，名字随意，绑定服务为web端
创建完之后，你就会拥有一个key，这个key在接下来大有用处
vue
来到你想创建文件的地方，打开你的DOS， 使用npm命令安装vite
npm create vite@latest weather -- --template vue
安装完以后，你就可以看见你的文件夹里多了一个weather文件夹
在vscode中打开，在终端输入
npm run dev
动手
实时天气界面
由于我们这个简单的demo只有一个页面，所以我们直接在App.vue中写一个页面
html
<template>
<div class="container">
<div class="nav">
<div class="time">{{ localTime }}</div>
<div class="city">切换城市</div>
</div>
<div class="city-info">
<div class="city-name">南昌</div>
<p class="weather">雾</p>
<h2 class="temp">
<em>10</em>℃
</h2>
<div class="detail">
<span>风力：3级</span> |
<span>风向：北风</span> |
<span>空气湿度：99</span>
</div>
</div>
</div>
</template>
css样式：
css
复制代码
<style lang="css" scoped>
*{
margin: 0;
padding: 0;
}
.container {
min-height: 100vh;
background-color: #000;
opacity: 0.6;
color: #fff;
}
.nav {
overflow: auto;
padding: 10px;
}
.time {
float: left;
}
.city {
float: right;
}
.city-info {
text-align: center;
}
.temp {
font-size: 26px;
}
.temp em {
font-style: normal;
font-size: 34px;
}
</style>
js代码：
js
复制代码
<script>
export default {
data() {
return {
localTime: '00:00',
weatherData: {}
}
},
created() {
setInterval(() => {
this.localTime = new Date().toLocaleTimeString()
}, 1000);
this.initAMap()
},
}
</script>
做完这一步以后，我们的基础页面就打造好啦！不过这里显示的并不是我们填入的数据，在这里，主要看到页面效果就好。
可是，这里的内容是我们在代码中写死的内容，那我们怎么获取到实时天气情况呢？高德地图就派上了用场。
导入高德地图
我们先来到首页，在文档与支持中打开 JS api(概述-地图 JS API 2.0 | 高德地图API (amap.com)[2])
我们在这里主要使用的是AMapLoader，直接粘贴到vscode（注意，要填自己在一开始申请的key）
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
data() {
return {
localTime: '00:00',
weatherData: {}
}
},
created() {
setInterval(() => {
this.localTime = new Date().toLocaleTimeString()
}, 1000);
this.initAMap()
},
methods: {
initAMap() {
let that = this;
AMapLoader.load({
key: "*********************", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ['AMap.CitySearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
AMap.plugin('AMap.CitySearch', function () {
var citySearch = new AMap.CitySearch()
citySearch.getLocalCity(function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// 查询成功，result即为当前所在城市信息
console.log(result.city);
//加载天气查询插件
AMap.plugin('AMap.Weather', function () {
//创建天气查询实例
var weather = new AMap.Weather();
//执行实时天气信息查询
weather.getLive(result.city, function (err, data) {
console.log(err, data);
that.weatherData = data
});
});
}
})
})
})
}
}
}
</script>
在index.html中，我们要添加key的密钥，在head中添加就可以了
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "7824ac1d0c1f2682ab1ca5467a184acd",
};
</script>
<title>Vite + Vue</title>
</head>
当我们获取到天气信息和位置信息以后，在template中的内容就不能写死了
<template>
<div class="container">
<div class="nav">
<div class="time">{{ localTime }}</div>
<div class="city">切换城市</div>
</div>
<div class="city-info">
<div class="city-name">{{weatherData.city}}</div>
<p class="weather">{{weatherData.weather}}</p>
<h2 class="temp">
<em>{{weatherData.temperature}}</em>℃
</h2>
<div class="detail">
<span>风力：{{weatherData.windPower}}级</span> |
<span>风向：{{weatherData.windDirection}}</span> |
<span>空气湿度：{{weatherData.humidity}}</span>
</div>
</div>
</div>
</template>
写到这里，我们的小demo就完成了，来看看效果
结尾
本篇文章里向大家介绍了高德地图提供的一个定位服务和天气服务，掘友们要是有类似的需求，可以上高德地图js api上寻找你要的功能组件。