万恶起源于,
一张在群聊中炫耀十一月份,还在开冷气的深圳气温截图…
万恶之源(注:ifisher为坤哥)
坤哥提出,想要一个 只想知道昨日和今日气温的应用,每天早上起来,想知道该穿什么衣服,该比昨天多穿一件,还是少穿一件. 虽然现有的App也有带这种功能,但是太复杂了.我只想要点开App 看一眼就知道今天和昨天的温度对比.
找了一圈,发现免费的天气API只提供实况和未来几天的预报,想要获取历史天气的话,得付费.这个时候坤哥想到一个Idea, 每天查询天气之后,把数据缓存起来,明天再来看就有昨天的了.
棒棒! 那就叫他「昨日天气」吧!
好!说干就干!
…………………..
对于我这种重度拖延症患者来说,是不可能的.
所以,
一周之后,
…………………..
好!说干就干!
1. 新建工程
首先…首先你得要有一个工程.
假设你的电脑已经有运行React-Native的环境&你有开发React的基础知识.
关于环境的配置 React-Native中文网有非常非常详细的介绍:搭建开发环境 – React Native 中文网.
输入命令:
react-native init weather进入init好的工程,就可以开始写代码了.
2.获取定位
React-Native提供Geolocation API,通过getCurrentPosition()方法,可以很快的获取设备的经纬度.
注意,如果要在安卓设备上获取定位,需要在AndroidManifest.xml 文件中添加以下代码以获取定位权限:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> 获取定位的代码:
navigator.geolocation.getCurrentPosition(
(position) =>{
console.log(position);
/*your code here*/
},
(error) => console.log(error.message),
{timeout: 20000, maximumAge: 1000}
);
3.查询天气信息
天气接口使用的是和风天气3-10天天气预报 | 和风天气免费版.
和风天气支持用经纬度直接获取定位所在地的天气信息,于是用刚刚获取的经纬度来查询天气信息,使用axios/axios发送请求:
axios.get('https://free-api.heweather.com/s6/weather/forecast', {
params: {
location: location,
key: /*开发者key*/
}
}).then((response) => {
console.log(response)
/*your code here*/
}).catch(error => {
console.log(error)
})4.本地持久化存储
前面提到,我们需要将前一天的天气信息缓存起来,React-Native提供的AsyncStorage.
AsyncStorageis a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.
这正是我们需要的!
做本地存储的时候纠结了一阵,想了几个方案,最终确定下来的方案是:
- 每次请求天气数据的时候生成一个日期精度为’day’的时间戳,作为存储的Key,请求得到的天气数据作为存储的Value.
- 读取昨日数据的时候,以昨日的时间戳作为Key去获取storage中昨日对应的天气数据.
- 清除storage中昨日之前的存储数据.
为了方便处理日期的加减和生成时间戳,我用到了一个日期处理库:Moment.js Moment.js 中文网
5.界面设计
想要有图标,谷歌了一下”weather Icon”, 找到一套免费的Monochrome Weather Icon Pack.(不用和风自带的Icon,原因是,我想要白色的Icon,但他们的是深蓝色的.)
上d站参考了一下配色,还想要做成卡片圆圆的感觉;
最后确定界面如下:
6.打包APK
Android要求所有应用都有一个数字签名才会被允许安装在用户手机上.
所以打包的第一步,是需要生成一个签名https://developer.android.com/studio/publish/app-signing.html.
然后还要记得改图标和应用的名字:
分别在 “./android/app/src/res/”和”./android/app/src/AndroidManifest.xml”下修改.
最后在终端运行:
cd android && ./gradlew assembleReleaseAPK安装包就制作完成啦~
7.应用托管
因为暂时没有上架市场的打算,但是App得找个地方放, 还是用蒲公英最合适.
应用下载链接:蒲公英; 密码是:123456
也可扫码下载
后续:
如果说这个功能,App的优势在哪里,大概就是可以做Widget了吧,只要在手机上随时下拉就能看到信息了.
噢,对了 还有推送…不过我本人比较讨厌推送这玩意.
所以要迭代的话,下个功能 应该是做Widget吧!
2017-12-05 更新:
加入明天天气之后,增加了本地缓存,
在已经有数据的情况下,使用已有数据显示.
现在应用界面如下:
另外,还有「昨日天气」App的姊妹篇:
