天气小组件效果如下
高德，腾讯，百度地图会给程序员提供一些接口，我们只要调用这些接口，就可以拿到定位，甚至天气情况信息。本期文章我们以高德地图为例，高德地图api链接放到下方。
准备工作
获取api
进入网址后，我们点击右上角的控制台，然后进入左边的应用管理，点击展开进入我的应用。我们自行创建一个新的应用，就命名为vue-weather，应用类型我们选择一个天气，之后添加一个key，key名称自取，服务平台投选web端，其余默认确认新建。
以后进入公司中，你的项目需要用上地址啥的信息，也大概是用这些。为何公司自己不整一个？太费钱！地图是需要实时更新的，还需要配合卫星。很多公司都是直接用高德，百度的api，企业开发是需要向他们缴费的
用vite脚手架安装项目
vite文档有安装教程：开始 | Vite 官方中文文档 (vitejs.dev)
npm create vite@latest weather -- --template vue
// weather是项目名，自取
vite没有全给你把vue源码下载下来，所以我们还需要下载一些源码，其实就是依赖
我们来到package.json中查看：dependencies和devdependencies都是我们需要安装的依赖，dependencies是生产环境，devdependencies是开发环境。
生产环境就是以后项目完成后给用户使用的，开发环境只需要开发阶段需要使用。就拿vite为栗，等我们开发完毕就不需要vite的源码了，最终代码写完是需要将项目打成一个压缩包的，vite脚手架只是给你很好地生成了目录结构
安装依赖
npm i
// 安装所有依赖
运行项目
npn run dev
// dev取决于package.json中scripts的第一个key
目前生成的页面是默认给你的，我们给他删掉。
src中components删掉hello world，style.css删掉，main.js删掉引入的style.css，App.vue清空自己vb一下，再把scss改成css
安装路由
npm i vue-router@4
router官方文档：安装 | Vue Router (vuejs.org)也有介绍安装
在这里提醒一下，安装的时候就不用开魔法了，如果还是不行，考虑是自己的源的问题，可以试着换一下源
npm config get registry
// 查看自己的源
npm config set registry http://mirrors.huaweicloud.com/repository/npm
// 换华为的源
这里顺带提一嘴，开全局魔法的时候，关机前需要关掉，否则它会修改你系统盘文件的一些设置，导致你开机后无法连上网，这个时候需要手动去设置中关掉手动代理
weather
我们将这个页面写成一个组件，通过路由的形式让他成为一个页面，因此需要在路由中简单配置下，我的这个页面组件是views/Home.vue
配路由
router/index.js
import { createRouter, createWebHistory} from 'vue-router'
// 创建路由， 声明history路由模式
const routes = [
{
path:'/', // 页面根路径默认重定向到home路径
redirect: '/home'
},
{
path: '/home', // 路径都习惯性小写
name: 'home', // name属性，代指组件名
component: () => import('../views/Home.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
App.vue中添加一个路由路口
<template>
<div>
<!-- 所有配置了路由的.vue文件都展示在这个口子 -->
<router-view></router-view>
</div>
</template>
在main.js中引入
import router from './router'
app.use(router)
开发页面
做好整体框架
<template>
<div class="container">
<div class="nav">
<div class="time">当前时间</div>
<div class="city">切换城市</div>
</div>
<div class="city-info">
<div class="city-name">南昌</div>
<p class="weather">大雪</p>
<h2 class="temp">
<!-- em标签 斜体-->
<em>-5</em>℃
</h2>
<div class="detail">
<span>风力: 6级</span> |
<span>风向: 北风</span> |
<span>空气湿度:10%</span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style lang="css" scoped>
.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>
拿到实时时间
<script>
export default {
data() {
return {
localTime: '00:00'
}
},
created() {
setInerval(() => {
this.localTime = new Date().toLocalTimeString()
}, 1000)
}
}
</script>
created是生命周期函数：vue代码会被读成html代码，这个过程被官方划分了10多个过程，页面从无到有按顺序自动触发
toLocaleTimeString将日期转为到秒，因此每秒执行一次刷新一次
拿到定位
有以下几种方式拿到用户定位：1. ip定位；2. GPS，北斗（无需联网）；3. 浏览器内置功能 ；4. 地图公司
这里我们用高德地图api，获取城市定位
JS API 结合 Vue 使用-基础-进阶教程-地图 JS API 2.0|高德地图API (amap.com)
安装高德地图依赖
npm i @amap/amap-jsapi-loader --save
天气组件引入
import AMapLoader from '@amap/amap-jsapi-loader';
结合文档给到的调用方法，把之前创建的key放进方法中
然后使用查询城市插件Amap.CitySearch
initAmap放进生命周期中调用
别忘了在index.html中引入这段代码
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "「你申请的安全密钥」",
};
</script>
现在打印result可以看到所有的信息了，然后只需要将开头写死的位置数据换成result.city就好
拿到天气
调用对应的插件
然后只需要将杭州市换成result.city就可以拿到当地的天气数据了
最终天气插件Home.vue如下
<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标签 斜体-->
<em>{{weatherData.temperature}}</em>℃
</h2>
<div class="detail">
<span>风力: {{weatherData.windPower}}级</span> |
<span>风向: {{weatherData.windDirection}}</span> |
<span>空气湿度:{{weatherData.humidity}}%</span>
</div>
</div>
</div>
</template>
<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: "b821b15320a85ac51ea0067a15942491", // 申请好的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>
<style lang="css" scoped>
.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>
最后将天气数据保存到数据源中去的时候，在函数中this丢失可以在外层用that顶替一下，然后再将之前写死的天气换成api请求过来的数据即可
至此，天气组件已经完成
最后
另外有不懂之处欢迎在评论区留言，如果觉得文章对你学习有所帮助，还请”点赞+评论+收藏“一键三连，感谢支持！
本次学习代码已上传至本人GitHub学习仓库：github.com/DolphinFeng…
原文链接：https://juejin.cn/post/7320082701213286412 作者：Dolphin_海豚
