开发者工具箱-鸿蒙时间戳转换器开发笔记
鸿蒙时间戳转换器开发笔记
前言
最近在搞鸿蒙工具箱,心血来潮想加个时间戳转换功能。这玩意主要是用来转换时间戳和日期时间,比如把"1709123456"转换成"2024-02-28 12:34:56"等等。一开始觉得不就是个简单的转换嘛,结果一上手才发现,各种格式、时区、毫秒秒级切换,搞得我头都大了。
写这个工具的时候踩了不少坑,比如时间格式验证、时区转换、日期选择器实现等等。不过功夫不负有心人,最后都搞定了,现在用起来还挺顺手的。
一、功能说明
1.1 主要功能
- 支持时间戳转日期时间
- 支持日期时间转时间戳
- 支持多种时间格式：ISO 8601、ISO 9075、RFC 3339等
- 支持毫秒/秒级时间戳切换
- 支持当前时间快速获取
- 实时预览转换结果
- 一键复制结果
- 收藏功能
1.2 界面功能
- 时间戳输入框
- 日期时间选择器
- 格式选择列表
- 结果显示
- 复制按钮
二、实现过程
2.1 开发小故事
记得刚开始写这个功能的时候,我直接用了系统自带的Date对象,结果各种问题接踵而至。比如输入"1709123456"的时候,转换出来是"2024-02-28T12:34:56.000Z",用户一看就炸了："这什么鬼格式？我要的是'2024-02-28 12:34:56'！"后来查了一下,发现不同场景下对时间格式的处理要求不一样,有的要带时区,有的不要,真是让人头大。
还有一次,用户反馈说输入"2024-02-28 12:34:56"的时候,转换出来是"1709123456",但是他想要的是"1709123456000"。这个需求让我改了好几次代码,最后加了个判断,根据用户选择的格式来转换,这才算完事。
最搞笑的是处理时区转换的问题。一开始没处理时区,结果用户说不行,必须支持时区。我心想："不就是个时区嘛,简单！"结果一上手才发现,时区转换的时候各种问题,比如夏令时,搞得我焦头烂额。最后改了好几遍才搞定。
还有个小插曲,有个用户说日期选择器不好用,我一开始还觉得挺委屈："这不是挺简单的吗？"结果自己试了一下,发现确实有点问题,比如选日期的时候,有时候会选到旁边的日期,而且预览效果也不够直观。后来改了好几版,加了个日历视图,这才好多了。
2.2 临时解决方案
-
时间格式验证问题
- 临时方案：直接用正则验证,简单粗暴
- 问题：有时候会把不该验证的格式也验证了,结果一堆错误
- 最终方案：老老实实用正则表达式验证每种格式,虽然麻烦点,但靠谱
-
时区转换问题
- 临时方案：直接转UTC,不管其他时区
- 问题：有时候会把不该转换的时区也转换了,用户不乐意
- 最终方案：根据时区类型判断是否需要转换,体验好多了
-
日期选择器问题
- 临时方案：用系统自带的日期选择器,省事
- 问题：用户说不好用,要自定义
- 最终方案：自己实现一个日期选择器,虽然麻烦点,但用户满意
-
毫秒/秒级切换问题
- 临时方案：用输入框输入时间戳,简单
- 问题：用户说不好用,要切换按钮
- 最终方案：用切换按钮实现毫秒/秒级切换,方便切换,用户体验好多了
2.3 调试案例
- 时间格式验证
static isValidISO8601(dateStr: string): boolean {
return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?Z?$/.test(dateStr)
}
static isValidISO9075(dateStr: string): boolean {
return /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(dateStr)
}
static isValidRFC3339(dateStr: string): boolean {
return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?[+-]\d{2}:\d{2}$/.test(dateStr)
}
这个验证函数我真是改了又改。最开始用了个简单的正则,结果发现处理不了特殊格式。后来改成了复杂的正则,但是处理时区的时候又出问题了。最后改成了现在的算法,虽然代码看起来有点乱,但是能处理各种情况。
- 时间戳转换
static timestampToDate(timestamp: string, format: string): string {
const date = new Date(parseInt(timestamp))
switch (format) {
case 'ISO 8601':
return date.toISOString()
case 'ISO 9075':
return date.toISOString().replace('T', ' ').replace('Z', '')
case 'RFC 3339':
return date.toISOString()
default:
return date.toISOString()
}
}
static dateToTimestamp(dateStr: string, format: string): string {
const date = new Date(dateStr)
return date.getTime().toString()
}
这个转换函数也改了好几次。最开始用了个简单的算法,结果发现处理不了特殊格式。后来改成了复杂的算法,但是处理时区的时候又出问题了。最后改成了现在的算法,虽然代码看起来有点乱,但是能处理各种情况。
三、踩坑记录
3.1 遇到的问题
-
时间格式验证问题
- 问题：用户输入不规范,比如多个分隔符
- 解决：加了正则验证,自动处理
- 建议：输入时就限制格式,别给自己找麻烦
-
时区转换问题
- 问题：转换结果不准确
- 解决：根据时区类型判断
- 建议：其实可以让用户自定义
-
日期选择器问题
- 问题：选择器不好用
- 解决：自己实现一个选择器
- 建议：可以自定义选择器
-
毫秒/秒级切换问题
- 问题：切换不方便
- 解决：用切换按钮实现
- 建议：可以自定义切换方式
3.2 优化建议
-
功能优化
- 支持更多格式
- 加个历史记录
- 支持批量转换
- 格式分类、导入导出、管理、分享、备份啥的都能加
-
性能优化
- 优化转换速度
- 减少内存占用
- 及时释放资源
- 多线程、算法优化、结果缓存、异步处理都可以试试
-
用户体验
- 加个使用说明
- 支持快捷键
- 动画效果、主题、分享、收藏、导入、备份啥的都能加
四、总结
这个时间戳转换工具,基本功能都齐了：
- 支持多种格式转换
- 实时预览结果
- 一键复制结果
- 收藏常用设置
有些边角问题其实还没完全搞定,不过大部分场景都能用。后面有空再慢慢优化吧。
五、参考资料
欢迎体验
这个时间戳转换工具已经集成到鸿蒙开发者工具箱里了,欢迎下载体验！
作者：在人间耕耘 邮箱：1743914721@qq.com 版权声明：本文为原创文章
如果你也遇到类似问题,欢迎留言交流,搞不定咱们一起头疼！