AI 写的网页,怎么变成手机上的 App

你用 Claude、Cursor 或者别的 AI 写了一个记账表、打卡器、报价计算器。 在电脑上双击能打开,发到手机上就不行了。这一页讲清楚为什么,和怎么解决。

为什么直接发文件到手机打不开

把 .html 文件传到手机(微信、AirDrop、网盘)之后,手机浏览器打开的是一个 file:// 地址。这种打开方式下,浏览器出于安全考虑砍掉了很多能力: 页面之间读不了文件、稍微现代一点的写法(模块、fetch)直接失效、 存的数据没有归属地。AI 写的代码只要稍微复杂一点,打开就是白屏。 这不是代码写错了,是打开方式不行。

「添加到主屏幕」——就是把网页变成桌面图标、全屏打开、看起来像 App 的那个功能—— 还有一个硬前提:页面必须有一个 https 网址。本地文件永远满足不了。

解决:给它一个网址,三步装到手机

第一步:把这句话发给你的 AI

在电脑上,回到你写这个工具时用的 AI(Claude Code、Cursor、Codex 都行),发:

它会自己读说明、改代码、发布,最后给你一个二维码。 如果它的改动被拒了,它会按返回的错误提示自己修,你不用管。

第二步:用手机打开,绑定

手机相机扫 AI 给的二维码(或者直接点它给的链接), 点「这是我的手机」。绑定之后只有这台手机能打开这个工具, 别人拿到网址也只会看到一扇关着的门。

注意:如果链接是在微信里打开的,先点右上角 ··· 选「在浏览器中打开」。 微信内置的浏览器加不了桌面图标。

第三步:添加到主屏幕

页面底部会弹提示:iPhone 上点分享按钮 ⬆️ → 「添加到主屏幕」。 桌面上会多一个图标,以后点它就是全屏打开,和 App 没有区别。 装完之后没有网也能用——整个工具已经缓存在手机里了。

数据存在哪

存在你手机浏览器自带的数据库里(IndexedDB),不上传到任何服务器。 清浏览记录不影响已添加到主屏幕的应用的数据。 但删掉桌面图标、换手机,数据就没了——所以工具里都有一个「备份数据」按钮, 导出一个文件存到「文件」App,记得偶尔点一下。

之后想改怎么办

回去跟你的 AI 说,比如「金额保留两位小数」「加一个月度汇总」。 它改完自动重新发布,你手机上刷新就是新版。网址不变、数据不动、不用重新绑定。 这是整个流程里最常用的一步——工具是活的,一直可以改。

常见的坑

安卓能用吗?能,Chrome 里同样有「添加到主屏幕」。引导文案会自动适配。

要花钱吗?要备案吗?都不用。免费、无账号,你没有自己的域名和服务器,自然也谈不上备案。

工具里能调外部接口吗?能,写完整的 https:// 地址就行。 但注意手机上没有常驻后端,所有逻辑要在页面里完成。

更多问题看 常见问题。

首页 · 教程:网页变手机 App · 常见问题 · 给 AI 的说明