这是一个简单的天气预报 Demo，有天看手机上的天气，突发奇想，自己能不能也做个来玩玩啦。作为一个技术人员就是要保持一份好奇心。肯定没人家专业的做的好，纯玩。
先来张效果图：
这里简单介绍一下项目的主要功能，先获取本地的位置信息和实时时间，然后根据城市名获取本地的实时天气信息和未来几天的天气信息。切换城市，可以选择想查看的城市的天气信息。
在开始项目之前需要先准备一点资料。
天气预报的信息是来源于高德地图，所以你需要先注册一个账号并申请 Key。
还没用过高德的，这是教程：
然后还需要对 有点一些了解，不懂的可以先去了解了解。
准备工作完了就可以开始干项目了。
关于 Node 的安装和 Vue 初始化项目的知识这里就不说了，百度一下，资料有很多。
首先通过vue init 创建项目，并安装依赖，安装完之后，把项目运行起来。
用你熟悉的代码编辑器打开项目，在 下新建 index.vue 文件。
然后在路由文件 /index.js 中注册路由，引入 index.vue index from '@//index'。
把 替换成 index，再删掉 App.vue 中的图片。
{
path: '/',
name: 'index',
component: index
}
这时候访问 :8080/#/，就会显示 index 组件的内容了。
开始写页面了，先把静态页面写好，再添数据进去。当然你也根据你自己的喜欢风格写一个页面。
先实现这样一个静态的页面，代码这里就不贴了，文章末会提供项目源码的地址。
在切换城市那里有用到一个 vant 的组件，效果如下：
好，先安装下 vant.
npm install vant -S
然后再 main.js 中引入
import { Area } from 'vant';
import 'vant/lib/index.css';
Vue.use(Area);
就可以在组件中使用了。
接下来就实现天气预报的业务逻辑部分。
先在 index.html 中引入这个高德和 的 js。我有申请 key，你可以用我的 ，也可以用你自己的 key。
高德获取定位信息的文档：
高德获取天气信息的文档：
通过 ip 定位获取当前的位置信息，代码如下：
var map = new AMap.Map(this.$refs.mapContainer, {
resizeEnable: true
});
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);
_self.getCurrentCityData(result.city);
}
})
})
通过获得到的成名获取天气信息，代码如下：
getCurrentCityData(cityName){
let _self =this;
AMap.plugin('AMap.Weather', function() {
//创建天气查询实例
var weather = new AMap.Weather();
//执行实时天气信息查询
weather.getLive(cityName, function(err, data) {
_self.mapData = data;
console.log("1",err, data);
});
weather.getForecast(cityName, function(err, data) {
_self.featureMapData = data.forecasts;
_self.featureMapData.map((item,index)=>{
_self.seriesData.push(item.dayTemp);
})
_self.initEchart();
_self.loader = false;
console.log("2",err, data,_self.featureMapData);
});
});
},
可以自己打印一下，定位成功返回的数据免费天气预报代码，里面有包含经纬度，省份，城市等等。
接下来写初始化 的代码，代码如下：
initEchart(){
let dom = this.$refs.echartcontaier
var myChart = echarts.init(dom);
var app = {}, option = null;
option = {
xAxis: {
show:true,
splitLine:{show:false},
type: 'category',
data: ['今天', '明天', '后天', '三天后'],
axisLine:{
lineStyle:{
color:'#fff'
}
},
axisTick: {
show: false
}
},
yAxis: {
show:false,
axisLine: {
show:false,
lineStyle:{
color:'#fff'
}
},
axisTick: {show:true},
splitLine:{show:false}
},
tooltip: {
trigger: 'axis',
formatter:function(params){
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
relVal += params[i].value+"°C";
}
return relVal;
}
},
legend: {
data:['气温']
},
series: [{
data: this.seriesData,
type: 'line',
label: {
normal: {
show: true,
position: 'top'
}
}
}]
};
myChart.setOption(option, true);
}
取到了所有需要的数据，动态添加到页面里面，我们的个人天气预报就完成了。
项目源码地址：
项目做完了，功能比较简单免费天气预报代码，但是比较好玩儿。 有问题的可以留言，我会随时回复的。 也麻烦小哥哥小姐姐高抬贵手给在下点个star哦！！！
本文发布于http://www.jgmcp.com/ 转载请注明。
发表评论