事情的起点很简单:我有一套跑在 Cloudflare 上的临时邮箱,但每次看邮件都要打开电脑和后台。后来就想,能不能做一个手机上用的 App,平时收验证码或者看临时邮件会方便一点。
第一版
第一版很快,基本就是 React Native 里套了一个 WebView。能打开,能看邮件,也能勉强用。
但用了一会儿就觉得不太舒服。它更像是把网页塞进手机里,不是一个真正顺手的 App。滑动、返回、列表这些地方都比较粗糙,所以很快就想重写。
第二版
第二版开始把邮件列表做成原生组件,界面也整理了一下。列表体验好了很多,但邮件正文又出了问题。
有些 HTML 邮件自己的样式太复杂,会影响到页面布局。尤其是营销邮件,里面一堆表格、内联样式和奇怪的 CSS,放进 App 里很容易撑开界面。
我试过几种办法:
- 清理 HTML 和 CSS
- 只显示纯文本
- 用单独的 WebView 显示正文
最后发现还是第三种比较合适。邮件正文本来就是外部内容,不应该和 App 自己的 UI 混在一起。
后来的方案
现在的做法是:列表、导航、操作这些用原生组件;邮件正文放到受限的 WebView 里。这样列表比较顺手,正文也不太容易把整个界面弄乱。
这不是什么很复杂的技术,但做过之后会更清楚边界在哪里。哪些内容是自己控制的,哪些内容只是拿来展示的,要分开处理。
现在
这个 App 目前主要是自己用。功能不算多,但够用:
- 看收件箱
- 打开邮件正文
- 下载附件
- 手机上简单管理临时邮箱
后面有时间再慢慢改。现在至少不用每次都打开电脑看邮件了。