跳至内容
WebViewGold 从 Vibe Coding 到 App Store
中文
获取 WebViewGold

Claude Code + 主屏幕

为您的 Claude Code 应用添加主屏幕小组件、快捷操作和 Siri

主屏幕是应用证明自己不只是一个书签的地方。在 iOS 上,WebViewGold 为您的 Claude Code 应用提供了四种在主屏幕上露面的方式:由您的服务器保持更新的图片小组件、长按图标弹出的快捷操作、运行您 JavaScript 的 Siri 短语,以及备用应用图标。Android 上没有与小组件和快捷操作对应的 WebViewGold 功能,所以本指南也会如实介绍那里的替代方案。

每个平台一次性 $109 起,或由我们的团队全程代劳,$698 起。

  • 审核通过保证 – 否则 14 天内退款
  • 无需编程
  • 一次性付费,免费更新
  • 7×24 小时人工支持
  • 2014 年起德国出品 · ISO 27001

iOS 上的四项主屏幕功能

图片小组件

一个显示由您服务器渲染的 SVG 或 PNG 的主屏幕小组件:今天的数据、下一个预约、连续打卡天数。您的 Web 应用通过 widget://https://yourdomain.com/widget.svg?t=TOKEN 把它指向一张图片;Config.swift 中的 widgetRefreshTime(分钟)和 widgetfallbackURL 分别设置刷新间隔和备用图片。

快捷操作

在 Config.swift 中把 useShortcuts 设为 true,并在 Shortcuts.json 中定义操作:标题、redirection_link、可选的 JavaScript injection 和一个 SF Symbol。用户长按应用图标时就会看到它们。

Siri 短语

借助可选的 Siri 附加组件(单独销售;您需要把它的插件令牌填入 siriEnabled),像 addtosiri://?command=Log%20Water&jsFunction=logWater() 这样的链接可以让用户添加一个短语,用来运行您 Web 应用中的某个 JavaScript 函数。

备用应用图标

最多提供三个备用图标(深色、经典、节日主题),让用户通过 changeicon://icon1 到 changeicon://icon3 切换,或用 changeicon://default 换回默认图标。每次更换时,iOS 都会弹出系统提示予以确认。

给 Claude Code 的提示词

把这段粘贴到 Claude Code 中以实现 Web 应用端。检查结果,发布,然后在 WebViewGold 应用中测试。

给 Claude Code 的提示词
给 Claude Code 的提示词:阅读 https://www.webviewgold.com/llms-full.txt(iOS Widget Extension、Shortcuts、Siri 和 Dynamic App Icon 这几节)。然后:1) 添加按用户生成的小组件令牌,以及一个服务端路由,针对该令牌以 SVG 或 PNG 图片返回用户的摘要。2) 添加一个辅助函数,仅在 iOS 应用内(自定义 WebViewGold User-Agent 以及 iPhone 或 iPad),每个会话导航一次到 widget://https://OUR_DOMAIN/widget.svg?t=TOKEN。3) 让快捷操作使用的深层路由(/new、/today)在冷启动时正常工作。4) 在 WebViewGold iOS 项目中,把 useShortcuts 设为 true,编写包含三个操作、使用有效 SF Symbol 的 Shortcuts.json,把 widgetRefreshTime 设为 30,把 widgetfallbackURL 设为我们的 logo 图片。5) 添加一个使用 changeicon://icon1、changeicon://icon2 和 changeicon://default 的图标选择器。6) 保存原生文件之前先把 diff 给我看,为令牌路由编写测试,并在 CLAUDE.md 中注明这些功能仅限 iOS。

在过去5年我们尝试过的所有应用平台中,WebViewGold为我们带来了有史以来最短、最高效的上市时间。我不知道为什么没有更早发现你们,但我真的非常满意。目前我们的应用在iOS App Store和Google Play商店的下载量已超过6000次,没有任何问题!

安东尼奥·达维拉 · CodeCanyon

哪些内容适合放到主屏幕上

这些功能都应该帮用户省掉一步。对典型的 Vibe Coding 应用来说,合适的用法有:

下一件事

下一个预约、下一节课、下一个配送时段。由 您自己的 API 路由、无服务器函数或 Supabase 渲染的小组件图片,不用打开应用就能回答“什么时候?”。

进度一目了然

习惯连续天数、储蓄目标、今日销售额、已写字数。一个大数字加一个标签,在小组件尺寸下最易读。

最常用的三项任务

“新建条目”“扫描收据”或“今天”这样的快捷操作会直接打开对应页面,让应用用起来比网站更快。

腾不出手的时候

在不方便点按时,用 Siri 短语来“开始锻炼”“记录一杯水”或“播放我的电台”。

给忠实用户的小福利

把备用图标作为订阅用户的小奖励,或者为在意主屏幕外观的用户提供一个深色模式图标。

为 Claude Code 应用添加小组件和快捷操作

包括小组件图片端点在内,大约半天。

  1. 在服务器上渲染小组件图片

    在 您自己的 API 路由、无服务器函数或 Supabase 中添加一个端点,为单个用户返回 SVG 或 PNG:一个数字或一行文字,字号大、对比度高,不要细小的标签。让它保持快速、低成本,因为每次刷新都会重新获取它。

  2. 用令牌而不是 Cookie 做身份验证

    小组件是在您已登录的 WebView 之外获取图片的,所以请为每个用户生成一个无法猜测的小组件令牌,放进 URL,并允许用户更换它。绝不要在 URL 中放明文的用户 ID。

  3. 从 Claude Code 把小组件指向它

    登录后,仅在 iOS 应用内导航一次到 widget://https://yourdomain.com/widget.svg?t=TOKEN。把 widgetfallbackURL 设为面向未登录用户的品牌图片,并选一个合理的 widgetRefreshTime;iOS 会限制小组件的刷新次数,所以预期应是“一小时内更新”,而不是实时。

  4. 激活小组件 target

    按照 iOS 文档 中的视频指南,在 WebViewGold Xcode 项目中启用小组件扩展,然后在真实 iPhone 上从主屏幕的小组件库中添加它。

  5. 定义快捷操作

    在 Shortcuts.json 中写两到四个条目,指向您 Claude Code 应用的深层页面(加上 ?source=shortcut 便于统计分析)。这个列表随应用一起发布,所以修改它需要新的构建;而它打开的页面可以随每次部署而变化。

  6. 可选:图标和 Siri

    把备用图标放进 AppIconAlternate 文件夹,并把 CFBundleAlternateIcons 条目添加到 Info.plist,写法要与动态应用图标文档中所示完全一致。如需 Siri,请按照Siri 文档中的说明申请插件令牌。

用于快捷操作的 Shortcuts.json

放在 WebViewGold iOS 项目中,并通过 useShortcuts = true 启用(参见快捷操作文档)。injection 字段会在页面加载后运行 JavaScript,这里用来打开您 Web 应用提供的扫描视图。

json
{
    "shortcuts": [
        {
            "title": "新建条目",
            "redirection_link": "https://app.yourdomain.com/new?source=shortcut",
            "injection": "",
            "symbol": "plus.circle"
        },
        {
            "title": "今天",
            "redirection_link": "https://app.yourdomain.com/today?source=shortcut",
            "injection": "",
            "symbol": "calendar"
        },
        {
            "title": "扫描收据",
            "redirection_link": "https://app.yourdomain.com/expenses?source=shortcut",
            "injection": "(function() { if (window.openReceiptScanner) { window.openReceiptScanner(); } })();",
            "symbol": "doc.viewfinder"
        }
    ]
}

Android:有哪些功能,以及可以改用什么

需求WebViewGold 中的 iOS 方案Android 替代方案
在主屏幕上一眼看到信息图片小组件(widget://)没有 WebViewGold 小组件 API。可以发送带 url 的推送通知来打开对应页面;原生 AppWidget 需要在您收到的 Android Studio 项目中定制开发。
直接跳转到某个页面快捷操作(Shortcuts.json)没有文档化的快捷操作 API。让这些页面在您的导航中一键可达,并使用 App Links,让指向深层页面的链接直接打开应用。
语音指令Siri 附加组件(addtosiri://)WebViewGold 中没有对应功能。
用户自选应用图标changeicon://WebViewGold 的 Android 版不提供此功能。
接收来自其他应用的内容分享扩展可用:ShareIntent API。参见分享扩展和 Share Intent。

常见问题

小组件和快捷操作在 Android 上能用吗?

无法通过 WebViewGold 实现。小组件、Shortcuts.json 快捷操作、Siri 短语和备用图标都是 iOS 项目的功能。在 Android 上,请使用能打开特定 URL 的推送通知、App Links 和分享目标;原生 Android 小组件可以在您收到的 Android Studio 项目中定制开发,但它不是 WebViewGold 文档中记载的功能。

小组件能显示实时数据吗?

它显示的是由您的服务器渲染的图片,按您在 widgetRefreshTime 中设置的间隔重新加载。iOS 会限制小组件的刷新次数,所以请把它当作“近期”数据,而不是实时数据。小组件本身没有按钮,点按它会打开应用。

小组件对 App Store 审核有帮助吗?

有帮助,它能支撑准则 4.2 的论点,因为这是网站做不到的事,前提是它显示来自应用的有用内容。把它放进截图,并在审核备注中提到它,审核人员才会真的去找它。

Siri 集成包含在许可证中吗?

Siri 是单独销售的可选附加组件:您会收到一个插件令牌,填入 siriEnabled,并为 target 添加 Siri 能力(capability)。小组件、快捷操作和备用图标都是 iOS 项目中有文档说明的功能。

不更新应用能修改快捷操作吗?

这个列表位于应用内的 Shortcuts.json 中,所以新增或重命名操作都需要新的构建。快捷操作打开的页面是您 Claude Code 应用的普通 URL,因此页面显示的内容会随每次部署而变化。

让您的应用上架商店的三种方式

结果相同,只是您需要投入的工作量不同。三种方式都附带审核通过保证和 7×24 小时人工支持。

自己动手

$109 每个平台,一次性付费

WebViewGold 许可证:一个现成的 Xcode 或 Android Studio 项目。粘贴您的 URL,设置名称和图标,开启所需功能,构建并提交。永久免费更新。

在主页查看方案

Cloud Builder

$349 每个许可证,一次性附加购买

无需 Mac、Xcode 或 Android Studio:在浏览器中完成配置,我们在云端构建两个应用,并将其交付到 App Store Connect 和 Play Console。

Cloud Builder 如何运作 试用免费演示

Full Service

$698 每个平台 $798

把您的 URL 和图标发给我们。我们的团队在 72 小时内完成配置、构建并交付您的应用,白标,附源码项目。两个平台共 $1,158。

Full Service 详情 服务提供方: WeSetupYourWebViewApp

冬季特惠价格有效期至 2026年12月31日。

准备好发布您的 Claude Code 应用了吗?

App Store & Google Play 审核通过保证 – 否则 14 天内退款

想直接交给我们?Full Service:我们在 72 小时内完成配置、构建并交付,每个平台 $698 起。有疑问?通过 7×24 小时在线聊天联系我们。

退款依据我们 FAQ 中列出的条件:应用因非内容原因被 Apple 和/或 Google 拒审,并在购买后 14 天内提出申请。