Snapchat Web Lenses（网页版 Lens）让你把普通的 HTML5 游戏打包成 zip，直接作为 Lens 发布到 Snapchat 里。游戏是它的首个应用场景，这项功能目前处于测试阶段（beta）；虽然任何网页框架都可以用，但 Snap 推荐 PlayCanvas，官方文档也全程以它为例。整个过程完全不需要打开 Lens Studio。
PlayCanvas 于 2026年10月23日宣布支持这一功能，同时已有四款首发游戏上线。本指南会说明 Web Lens 是什么、你的构建必须满足哪些硬性限制、Web Lens API 提供了什么，以及从网页构建到玩家能通过名称或 Snapcode 找到你的游戏的五个实用步骤。
Snapchat Web Lenses 速览
| 是什么 | 打包成 zip、作为 Snapchat Lens 发布的网页应用 |
| 平台 | iOS 和 Android 版 Snapchat |
| 屏幕 | 全屏竖屏，9:16（不支持横屏） |
| 引擎 | 任意网页框架；Snap 推荐 PlayCanvas |
| 包体大小 | zip 不超过 8 MB，zip 根目录下的 index.html 不超过 1 MB |
| 运行环境 | 支持 WebAssembly（包括多线程）、Web Workers 和 eval() |
| 沙盒 | 无网络、无摄像头、无麦克风、无运动传感器 |
| Snapchat 功能 | 通过 Web Lens API 使用排行榜、Bitmoji 和存储 |
| 状态 | 测试阶段（beta），细节可能变动 |
网页游戏开发者为什么要关注
根据 Snap 2026 年第二季度财报，Snapchat 的月活用户达 9.71 亿；Snap 还表示，其 Game Lenses 每月吸引超过 1.75 亿人参与。Web Lenses 让网页开发者无需上架应用商店、玩家也无需安装，就能触达这批用户：玩家打开游戏的方式，和试用任何一个 Lens 完全一样。
首批开发者公布的早期数据，可以让你大致了解它的潜力：
| 游戏 | 工作室 | 类型 | 开发者公布的数据 |
|---|---|---|---|
| Bloom | NOWWA | 治愈系花园解谜 | 平均每次游玩约 260 秒，近 30% 的玩家次日回访 |
| Ball Smasher | MetaM | 街头篮球投篮 | 几小时完成原型，几天内游玩次数达数百万 |
| Snake Showdown | Elanra Studios | 贪吃蛇对战 | 前四周 180 万玩家贡献 700 万次游玩 |
| Bitmoji Ski | Snap | 滑雪街机 | 一天做完，每天 600 万次展示 |
变现方面，Snap 的 Lens+ Payouts 计划允许符合条件的创作者（年满 18 岁、身处符合条件的国家）把 Lens 设为 Lens+ 和 Platinum 订阅用户专享，并按参与度获得收入分成。Snap 还在邀请开发者提交原创 Web Lens 游戏方案以争取开发资金，围绕排行榜等社交循环设计的游戏会被优先考虑。
构建必须遵守的规则
大多数上传被拒，都源于几个打包错误，所以在写任何游戏代码之前，先把这些规则弄清楚。
- 只支持竖屏。 Lens 以 9:16 全屏运行。从一开始就按单手操作来设计镜头、HUD 和按钮。
- zip 不超过 8 MB。 这个限制针对的是压缩后上传的文件。把它当作上限而不是目标：zip 越小加载越快，而玩家多快能开始玩才是最关键的。
index.html放在根目录，不超过 1 MB。 要压缩的是构建文件夹里的内容，而不是文件夹本身。让index.html只作为轻量入口，不要把整个 bundle 或大型data:URL 内联进去。- 全部使用相对路径。 在 HTML 和运行时的
fetch()调用中都用./a/game.js，绝不用/a/game.js。如果用 Vite，请设置base: './'。 - zip 内使用正斜杠。 在 Windows 上，PowerShell 的
Compress-Archive会写入反斜杠，导致路径失效。请用资源管理器的“压缩为 ZIP 文件”、zip -r，或使用archiver包的 Node 脚本，然后用unzip -l检查。
沙盒：Web Lens 不能做什么
Web Lens 是完全自包含的。它无法访问网络，不能使用摄像头或麦克风，也读不到运动传感器；而且 localStorage 和 IndexedDB 每次启动都是空的。实际上这意味着：
- 所有脚本、模型、纹理、字体和音效都必须打包进 zip。
- 不能调用数据分析接口，不能用远程配置，也不能接在线多人后端。
- 进度必须用 Web Lens API 的 Storage 功能保存。
Web Lens API：排行榜、Bitmoji 和存储
Snap 的 API（npm 包 @snap/web-lens-api）负责把你的游戏接入 Snapchat。启动时调用一次 init()，使用某项功能前先用 isSupported() 检查。在 Snapchat 之外，比如在电脑上或本地开发服务器上，API 会用内置的 stub 返回示例数据，所以不用手机也能开发——只要确保某项功能缺失时游戏仍然可以玩。
| 功能 | 作用 | 注意事项 |
|---|---|---|
| 排行榜 | 提交分数并打开 Snapchat 自带的排行榜面板 | 分数必须是整数；计时赛用升序排列；好友的分数被超越时可以收到通知 |
| Bitmoji | 以带骨骼的 3D GLB 或 2D 头肩图像加载玩家的 Bitmoji | URL 大约五分钟后失效；Bitmoji 不带动画；务必内置一个默认角色 |
| 存储 | 绑定玩家账号的小型键值存储 | 每个值为 JSON，最大 32 KiB，每位玩家每个 Lens 合计 100 KiB；进度变化时和页面被隐藏时都要保存 |
好的排行榜奖励的是玩家想要提升的东西——准确度、速度或生存时间——并且让再来一局只需点一下。保存进度也值得同样用心：想清楚哪些内容必须跨局保留（最高分、已解锁关卡），哪些可以放心重置。
从网页构建到发布 Lens 的 5 个步骤
- 选择工作流。 一种是把 PlayCanvas Engine 当作普通 JavaScript 项目使用（很适合搭配 AI 编程助手），用
npm create playcanvas@latest my-lens -- --starter web-lens生成脚手架；另一种是基于浏览器的 PlayCanvas Editor，它可以通过 Editor MCP Server 连接 AI 助手。这个 starter 已经配好了竖屏布局、安全区域、相对路径、打包流程和 Web Lens API。 - 添加 PlayCanvas Skills（可选）。
npx skills add playcanvas/skills能教会兼容的 AI 编程代理如何在 PlayCanvas 中搭建场景、动画、HUD 和特效。 - 针对手机构建。 把 HUD 放在
env(safe-area-inset-*)范围内，因为 Snapchat 会在顶部附近绘制自己的关闭按钮；按经过的时间来缩放运动（很多手机以 120 Hz 运行）；音频要在用户操作后再启动，Lens 被隐藏时要暂停。按名称导入引擎类，方便打包工具剔除未使用的代码；压缩纹理，并跳过 source map。 - 接入 API。 游戏结束时提交分数，需要的话加载 Bitmoji，并用 Storage 保存进度。
- 打包、上传并提交。 在 starter 项目中，
npm run package会构建 zip 并按照 Snap 的规则检查。然后登录 My Lenses，创建一个 Web Lens，上传 zip，并填写名称、上传 512 × 512 的 PNG 图标和 5 秒、720 × 1280 的预览视频。审核通过后，玩家就能通过名称或 Snapcode 找到你的游戏。
完全不想写代码？Snap 的 AI Lens 创作工具 Easy Lens 现在可以根据文字提示生成由 PlayCanvas 驱动的 Web Lens 游戏，Lens+ 订阅用户可以在 Easy Lens 网页版上使用。
哪些游戏最适合做成 Web Lens？
| 适合 | 不适合 |
|---|---|
| 单拇指操作的街机、解谜和冲分游戏 | 横屏或需要键盘鼠标的游戏 |
| 一局时间短、可以立即重开 | 依赖服务器的长时间游玩 |
| 体积小、经过压缩的资源 | 运行时下载大量资源 |
| 以排行榜驱动的竞争 | 实时在线多人对战 |
先从一个从启动到开玩路径很短的小项目做起。在真机上测试触控、屏幕边缘、音频、暂停和重开（npx vite preview --host 可以让你在手机浏览器里打开构建），并把每一处针对平台的修改都记下来，免得以后更新时又被改回去。
官方详细信息请查看 Snap 的 Web Lenses 文档、平台要求，以及 PlayCanvas 的公告。
常见问题
什么是 Snapchat Web Lens？
Web Lens 是一个以 Lens 形式在 Snapchat 内运行的网页应用。你用网页技术开发，把构建打包成 zip，通过 My Lenses 上传即可，不需要 Lens Studio。
必须使用 PlayCanvas 吗？
不必。任何网页框架都可以用，但 Snap 推荐 PlayCanvas，官方文档使用的是 PlayCanvas 搭配 Vite。
Web Lens 游戏最大可以多大？
压缩后的 zip 最大 8 MB，根目录下的 index.html 最大 1 MB。这些是测试阶段的限制，上传前请先确认最新要求。
Web Lens 能联网或使用多人服务器吗？
不能。Web Lens 无法访问网络，所以所有资源都必须打包进去，也无法使用在线多人后端。排行榜则通过 Web Lens API 提供。
如何保存玩家进度？
使用 Web Lens API 的 Storage 功能。普通的浏览器存储每次打开 Lens 时都是空的。
Web Lens 游戏能赚钱吗？
符合条件的创作者可以加入 Lens+ Payouts，为设为 Lens+ 和 Platinum 订阅用户专享的 Lens 获得收入分成；Snap 也在接受申请资助游戏的方案。
