用create-react-app创建项目
样式用styled-components解决
数据用redux交流
定位用高德地图API
天气数据用和风天气API
展示
PC端
移动端
定位
在index.html中加入高德地图(key填自己的)
//html中
//JS中 promiselet AMap = window.AMapfunction getLocation() { return new Promise((resolve) => {
AMap.plugin('AMap.CitySearch', function () { let citySearch = new AMap.CitySearch()
citySearch.getLocalCity(function (status, result) { if (status === 'complete' &&
result.info === 'OK') {
resolve(result)//定位城市
} else {
resolve(null)
}
})
}
)
})
}
天气数据
//用了axios包发起请求import axios from 'axios'function getWeatherInfo(city) { return axios //填自己的KEY
.get(`https://free-api.heweather.com/v5/weather?city=${city}&key=填自己的KEY`)
.then(resolve => { let data = resolve.data return data.status === 'ok' ? data : null
})
}
CSS用styled-components
好处就是模块化，CSS前缀会在build时自动补全，可以直接用JS操作一些东西.
JS CSS HTML 整个模块的东西都在一个js文件中，修改和维护很方便操作。
源码，DOME
源码参考github：https://github.com/weblzf/weather-react-learn
DOME：http://liuzhifei.net/weather/index.html
作者：泡沫的快乐
链接：https://www.jianshu.com/p/d0d5080f61b2
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/658/viewspace-2804660/ ，如需转载，请注明出处，否则将追究法律责任。
下一篇：
前端求职面试资源分享，值得收藏！
请登录后发表评论
登录
全部评论
