经过一段时间的React学习,React和Vue的开发确实有很大的不同,但是都是MVVM框架,因此上手没有很大的难度,这次用React+Redux开发一个天气预报小项目。源码地址:github.com/Beichenlove…
<<<前端是我一辈子的信仰,写代码直到50岁>>>
关注微信公众号:web前端学习圈
回复关键词【CSDN】领取2020年最新web前端系统学习教程(视频+笔记+素材+源码+项目实战)全套整理约50G
另外公众号每天都会分享学习方法,知识干货,实战案例,面试技巧,经验分享等相关文章,关注web前端学习圈=关注5000+前端大牛
前端
数据获取
页面初始化
选择热门城市
搜索其它城市
初次打开页面,根据所在城市进行天气展示,需要我们进行一个实时地位的获取,这里我使用了高德地图Web JS API。首先我们在public文件夹下的index.html引入在页面添加 JS API 的入口脚本标签;
// key值需在官网上申请
复制代码
我们使用官方提供的接口实现实时定位,因为需要首次渲染就展示天气信息,所以使用componenDidMount生命周期函数进行该请求:
componentDidMount()
{ // 防止作用域被修改
let _self = this;
if(_self.props.init){
//eslint-disable-next-line
AMap.plugin('AMap.CitySearch', function () {
//eslint-disable-next-line
var citySearch = new AMap.CitySearch()
citySearch.getLocalCity(function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// 查询成功,result即为当前所在城市信息
_self.props.getCity(result.city)
_self.initWeather(_self.props.city)
_self.props.getInit()
}
})
})
}
else{
_self.initWeather(_self.props.city)
}
}复制代码
这里需要做一个判断,如果从其它页面更改了城市选择,回到此页面会重新进行一个加载因而修改掉更改后的城市,因此我们用一个标识符来判断是不是首次加载。
另外我们注意有个坑,React会提示找不到 AMap
实例问题。这里使用注释
//eslint-disable-next-line
写在每个出现AMap类的前面一行,其eslint忽略此行代码从而不报错
和获取定位信息类似,我仍然使用的高德地图提供的API,这里我附上官网,lbs.amap.com/api/javascr…
为了显示温度变化趋势,我使用了echarts的折线图进行一个数据的可视化
实现代码
initEchart(array)
{
let domChart = this.dom;
//eslint-disable-next-line
var myChart = echarts.init(domChart);
let option = null;
option = {
xAxis: {
show: false,
type: "category",
axisLine: {
lineStyle: {
color: "#fff"
}
},
grid:{bottom: "20"}
},
yAxis: {
show: false
},
series: [
{
data: array,
type: "line"
}
]
}
myChart.setOption(option, true);
}
复制代码
react-redux是react官方用来绑定Redux,将Provider放在最上层,从而实现store可以被下面组件接收
复制代码
组件中我们使用connect()来获取store里的state或者dispatch action,利用其特性可以简单方便地实现城市的更改,历史搜索以及判断标识符等数据的更改和获取。
redux默认的设定是dispatch只能接受一个对象参数,函数和promise都是不允许的,thunk中间件则能解决这个问题,redux-thunk 统一了异步和同步 action 的调用方式,把异步过程放在 action 级别解决,而component 没有影响,这里我配合react-redux实现redux数据的一个更新操作。
我在二级页面实现一个搜索城市,查询城市天气的功能,这里我使用本地json文件,并用axios实现请求,
axios.get('/city/citys.json').then((res) =>
{ var tem = []
tem = res.data.citys.filter((item) => item.citysName.includes(value))
if(tem = [])
{
unfound = 'Not Found'
}
callback(tem.slice(0, 10))
loading = false
})复制代码
我使用一个filter方法来进行条件筛选,返回含有输入值的数据,若为空,则返回一个提示。搜索框我采用了antd官方组件,它已经给我们封装好了
复制代码
我用该组件文本框值变化时的回调函数handleSearch方法实现接口请求,筛选符合搜索条件的内容进行展示。并采用选中options(展示栏)的回调函数handleChange进行redux内state城市的一个更改,同时跳转到首页,代码:
handleSearch = value => {
if (value) {
loading = true
fetch(value, data => this.setState({ data }));
}
else {
this.setState({ data: [] });
}
};
handleBlur = () => unfound = null;
handleChange = value => {
this.state.data.map((item) => {
if (item.id == value) {
let city = item.citysName.split(',')[0]
this.props.changeCity(city)
this.props.history.push('/')
this.setState({ data: [] });
}
})
};复制代码
虽然这个项目只是一个简单的小项目,但是对于自己的技能提示还是有一定的帮助。在开发过程中也遇到了一些问题,俗话说解决问题的过程就是自己能力提升的过程,毕竟学习之路,道阻且长,行则将至。
更多的项目详情大家可以访问我的Github,也 欢迎大家留言交流