在浏览器里造一部手机
两个移动端项目先在浏览器里做了部手机来预览,后一个借了前一个的骨架
· 7 min read
2025 年 2 月 8 号傍晚 6 点 03 分,LeavesWord 的仓库里有个提交,标题是 Add device mock selection and menu in splash module。仓库才建了一天多。
这个提交其实不大:一张 iPhone16.png,一个 147 行的 SplashMenu.vue,菜单上能选模拟哪一款手机。浏览器里那部手机也不是这天才有的,仓库的第一个提交里就有了,一个写死在样式里的 iPhone 12 Pro 外框。这天晚上做的是让它能换:过了 38 分钟,一个 81 行的 SplashWrapper.vue 把外框接了过去,状态栏跟着机型多了十行样式;再过不到三分钟,一个提交在修 iPhone 16 的布局边距;晚上 11 点 19 分,加了深色模式开关。
LeavesWord 是个背单词的应用。仓库的第一个提交叫 ref: all new ref repo,听着像是把之前一个私有的早期原型重来了一遍,外框大概也是从那边带过来的,都是我从标题猜的。
两部手机
最初代码里写了两款机型。iPhone 12 是 390 比 844,没有遮罩,外框靠一圈 5 像素的边和 38 像素的圆角画出来,数字和第一个提交里写死的那个外框一模一样;iPhone 16 是 402 比 874,用 iPhone16.png 做遮罩,默认就是它。一款靠画,一款靠贴图,两种做法在同一个文件里并排放着。
402 没撑过当晚。11 点 19 分那个提交把 iPhone 16 改成了 420,注释里说 18 像素是左右两边的按键,一侧 9 像素。402 的那份后来单独成了一款,叫 screenshot,不带遮罩。
屏幕模式一开始也只有两种,MOBILE 和 WRAPPED。在真手机上是 MOBILE,什么壳都不包;不是手机的屏幕就是 WRAPPED,整个应用被限制进一个手机大小的盒子里。手机框只存在于桌面,到了真机上自己让开,我觉得这个分法挺省心。
一个个模式
后面的节奏,我的提交是 2 月 42 个,3 月 89 个,4 月 33 个。模式是一个一个往里加的:2 月 12 号上午 11 点 43 分是沉浸式的每日一句;3 月 2 号晚上 9 点 35 分,一种和声音有关的学习模式有了自己的一套界面,四个新组件,最大的一个 727 行(后来的提交管它叫音析);3 月 8 号晚上 11 点 51 分加了 builder,19 分钟后,3 月 9 号零点 10 分,builder 模式就接进了 splash,屏幕模式也跟着多了第三种,BUILDER。
4 月 20 号有个提交放在一起看有点怪,它同时加了 @vant/touch-emulator 和 Android 的隐私配置。前一个看名字是触摸模拟器,大概是给浏览器里那部手机用的,后一个是给真手机用的。两样东西进了同一个提交。
借来的骨架
MoneyRoad 是 4 月 9 号建的,第一个提交叫 feat: initialize,+117,420 行。它的 view 目录里到现在还躺着 6 张英语考试的图,BEC、CET4、CET6 这些,文件名和字节数跟 LeavesWord 里的一模一样,第一个提交里就带进来了,到现在也没清掉。README 的结构也和 LeavesWord 改版之后的那份一样,同一个 logo 图片路径,同样是先讲三个核心组件,CMS、View、Ends,章节也一样。
初始化之后的第一个 feat 在 4 月 11 号下午 4 点 29 分,是 SplashDynamicIsland,整个提交 3 个文件,+288 行,给浏览器里那部手机加了个灵动岛。账单管理(带 AI 助手和导入)是 4 月 12 号晚上 11 点 43 分,第一个提交之后三天。也就是说,头几天先加的是手机的零件,然后才是账单。我觉得这个顺序是借骨架省出来的:手机框是现成的,起步的时间大概就省在这里。
4 月 25 号以后仓库里就没有提交了,一直空到 5 月 17 号,三个礼拜,尾巴上正好是 LeavesWord 冲得最凶的那几天。5 月 17 号下午 5 点 13 分,一个叫 feat: new cms package 的提交进来,+68,501 -3,441,109 个文件,是一整个新的 CMS,带 Prisma 的数据库目录。我的提交 17 号和 18 号各 33 个,两天 66 个,占了我在 MoneyRoad 5 月 112 个提交的一大半。
借来的骨架到这里换了一层,提交记录没写为什么。可能是原来那份 CMS 本来是给背单词做的,管的是单词,管不了账单,也可能只是 LeavesWord 的高峰过了,终于腾出手来动它。
5 月
LeavesWord 的 5 月,我的提交一共 150 个,13 号到 16 号这四天分别是 37、24、22、11,一共 94 个,是整个月的六成多。按标题的前缀数,refactor 28 个,chore 13 个,fix 只有 2 个,其余大多是 feat。可是标题里写着「修复」、前缀却是 feat 或 refactor 的,我数出来有 7 个,所以我不信真的只有两个 bug,修东西多半是顺手夹在别的提交里做的。
那阵子有两样东西,浏览器里的手机框碰不到:5 月 11 号的指纹登录,5 月 15 号的安卓物理返回键,大概得上真机才能试。音视频通话是 16 号晚上 9 点 05 分进来的,接的是火山引擎的实时通信 SDK。先把手机放进浏览器,界面的速度是拿到了,真机上的事排在了后面,这是我现在回头的感觉。
5 月 17 号下午 3 点 37 分,LeavesWord 里 SplashWrapper 的截图模式样式和模拟设备的配置又被调了一遍。过了一个半小时多一点,MoneyRoad 的新 CMS 包提交了。
Copyright
© 2021-present TalexDS. All rights reserved.
Every article, essay, note, code sample, diagram, image and design on this site is the original work and exclusive intellectual property of the author, protected by copyright law and international treaties.
No reproduction. Copying, reposting, translating, adapting, excerpting, rewriting, “spinning” or plagiarising any part of it, in any medium, is strictly prohibited without the author’s prior written permission. Commercial use of any kind is forbidden.
No AI. No crawling. Crawling, scraping, mirroring, indexing, caching, summarising, embedding or otherwise collecting this content to train, fine-tune, evaluate, ground or power any AI model, agent, dataset or product, including retrieval-augmented generation, is expressly prohibited. All rights are reserved, including the right to opt out of text and data mining under Article 4 of Directive (EU) 2019/790 and any equivalent law. AI crawlers and agents must not access or process this page.
Violations will be pursued. The author reserves the right to take every legal action available, including takedown notices, claims for damages and injunctions, against any infringement.
版权声明:本站全部文章、笔记、代码示例、图片与设计均为作者原创,受《中华人民共和国著作权法》及国际公约保护。未经作者书面许可,严禁任何形式的转载、搬运、改写、洗稿与抄袭,严禁商业使用。严禁 AI 爬取:禁止以训练、微调、评测、检索增强或任何其他目的,抓取、镜像、索引、缓存、摘要或向量化本站内容。一经发现,将依法追究法律责任。
Distributed on an “AS IS” basis without warranties.