它是什么
Claude Code 和 Claude 的 artifacts 让您在终端或聊天中构建完整的 Web 应用。 在与 Claude 的对话中构建完整应用的开发者,以及有雄心的非开发者。
Claude Code 指南合集
Claude Code 在终端里构建了它。现在把它放到主屏幕上。 为 Claude Code 开发者准备的全部指南集中在一处:iOS 和 Android 演练、每项原生功能及对应的 Claude Code 提示词,以及商店拒绝时该怎么办。
每个平台一次性 $109 起,或由我们的团队全程代劳,$698 起。
每个功能页面都说明原生部分(一个设置或一次 URL 调用)和针对您 Claude Code 技术栈的 Web 应用部分,并附可粘贴的提示词。
bioauth://),让您精确地保护想保护的页面。二维码和条形码扫描器在 WebView 中基于浏览器的二维码扫描既慢又频繁索要权限。WebViewGold 通过一个链接(qrcode:// 或 barcodescanner://)打开原生相机扫描器,并把结果直接交回您的 Claude Code 应用:URL 会自动打开,条形码值则存入一个 JavaScript 变量。地理定位您的 Claude Code 应用已经在调用 navigator.geolocation。在 WebViewGold 应用内,这个调用会触发真正的系统权限弹窗,位置来自设备 GPS,而不是浏览器的粗略估算。无需原生代码:您只需编写用途说明并回答商店问卷。AdMob 广告Web 广告网络在应用内收益很低,而且常常在 WebView 中失效。WebViewGold 集成了原生 AdMob SDK:您的 Claude Code 应用下方的横幅广告、若干次交互后的插屏广告,以及在用户想要额外积分或内容时由 JavaScript 触发的激励视频。离线模式审核人员会打开飞行模式。用户会坐地铁。离线时显示白屏的 Claude Code 应用看起来像坏了;带重试按钮的原生离线页面才像一个应用。WebViewGold 提供三个级别的离线支持,哪一级合适取决于您的技术栈(任意 Web 技术栈;artifacts 是单文件的 React 或 HTML 应用,Claude Code 项目通常是 Next.js、Vite 或 SvelteKit)。深度链接用户在邮件中点击来自 取决于您的实现:Supabase、Clerk、Auth.js、Firebase 的魔法链接,却进入了 Safari:在网页上登录了,应用里却没有。Universal Links 和 App Links 解决了这个问题:指向您域名的 https 链接会直接打开 Claude Code 应用。下面是完整的设置,外加用于二维码和其他应用的自定义 scheme 链接。原生分享和触感反馈两件小事能让 Claude Code 应用在第一分钟就有原生感:一个真正的分享面板(AirDrop、信息、WhatsApp、邮件)而不是复制的链接,以及操作成功时的轻微震动。WebViewGold 把两者都作为 URL 调用提供,您可以接到现有按钮上。文件下载和相机上传普通 WebView 会悄悄忽略 PDF 下载,并显示一个简陋的文件选择器。WebViewGold 会把图片保存到相册(savethisimage://?url=…),下载 PDF、音频、ePub 和 Office 文件,并为您 Claude Code 应用中的每一个 <input type="file"> 打开原生相机或相册。应用内评分评分决定了商店详情页的转化率。WebViewGold 让您的 Claude Code 应用恰好在用户满意时显示原生评分对话框(rateapp://):订单完成后、锻炼结束后、项目保存后。您在 Web 应用中决定时机;原生部分只是一次调用。自定义 CSS 和 JavaScript网站需要 Cookie 横幅、带 30 个链接的页脚和一个“下载我们的应用”徽标。应用一个都不需要。WebViewGold 会向您 Claude Code 应用在应用内加载的每个页面注入 custom.css 和 custom.js 文件,网站保持原样,应用看起来就像应用。NFC 标签读取器Safari 完全不允许网站访问 NFC,而 Web NFC 只存在于 Android 版 Chrome 中。用 WebViewGold 封装后,您的 Claude Code 应用只需一个链接就能启动原生 NFC 扫描,并在一个 JavaScript 函数中收到标签内容:Android 上通过文档中的 NFC API,iPhone 上通过 WebViewGold NFC 插件。签到、设备标签和“碰一碰保存”的联系人名片,几行代码就能实现。文档扫描仪只要您的 Claude Code 应用有文件上传,就可以拥有真正的文档扫描仪。WebViewGold 会在原生上传对话框中加入“扫描文档”选项:iPhone 上的 Apple VisionKit 和 Android 上的 Google ML Kit 会识别页面边缘,裁剪并增强每一页,然后像其他上传文件一样把结果交给您现有的文件输入框。打印和 AirPrint在浏览器里好用的打印按钮,到了应用里通常就没反应了,因为应用 WebView 不像 Safari 或 Chrome 那样处理 window.print()。WebViewGold 为您的 Claude Code 应用提供了原生替代方案:printitem:// 从您的服务器下载 PDF 或图片,并打开系统打印对话框(iPhone 上是 AirPrint,Android 上是 Android 打印服务),还可以选择“另存为 PDF”。剪贴板复制和粘贴悄无声息失效的复制按钮、怎么也填不进去的粘贴字段,是 WebView 中的经典烦恼。在 WebViewGold 应用中,您的 Claude Code 应用可以通过 getclipboard:// 按需读取设备剪贴板(内容会写入 clipboarddata 变量),复制则使用标准的 Web Clipboard API 并配有后备方案。下面是具体做法,以及两个平台都强制执行的隐私规则。通讯录访问“查找好友”页面、群组邀请和 AA 分账应用常常需要访问通讯录。在 WebViewGold 应用中,您的 Claude Code 应用通过 requestcontactpermission:// 请求权限,并在调用 readcontacts:// 后从 contacts 变量中以 JSON 形式获得姓名和电话号码。代码几分钟就能写好;能否通过审核,取决于您如何使用这些数据。视频和音频播放HTML5 video 标签在应用内也能用,但长课程看起来局促,而且用户一切换应用,播放通常就会停止。借助 WebViewGold,您的 Claude Code 应用只需一个链接(startnativevideo://)就能把流媒体 URL 交给原生播放器,观众在两个平台上都能获得全屏和画中画,在 iPhone 上还有 AirPlay。在 iOS 上,您还可以让 HTML 音频在后台继续播放,非常适合播客、电台和音频课程。防截屏保护付费课程、私密聊天、账户余额、一次性优惠券:有些页面不应该出现在群聊里。WebViewGold 可以在 Android 上禁止截屏和录屏,在 iOS 上检测截屏,然后调用您 Claude Code 应用中的一个 JavaScript 函数,让您做出响应。这套工具也能反过来用:takescreenshot:// 可以把页面主动保存到相册,适合门票和收据。HealthKit 和 Health Connect用 Claude Code 构建的健身追踪、习惯养成和健康教练类应用,可以直接显示用户真实的步数、心率或体重,而不必让用户手动输入。WebViewGold 用同样的两个 URL scheme,在 iOS 上读写 Apple 健康(HealthKit),在 Android 上读写 Health Connect。代码是简单的部分;健康数据的商店规则才最值得您花心思。日历事件没有进入用户日历的预订,很可能就是一次爽约。在 iOS 上,WebViewGold 让用户通过指向 .ics 文件的普通链接把事件添加到“日历”App,因此您的 Claude Code 应用只需要一个返回该事件的 URL。WebViewGold 在 Android 上没有专门的日历 API;下面介绍在那里可行的替代方案。手电筒在昏暗的仓库里读取序列号,在地下室查看仪表,在音乐会上找座位:有时您的 Claude Code 应用只是需要一点光。WebViewGold 通过 enableflashlight:// 和 disableflashlight:// 两个链接,在 iOS 和 Android 上开关手机的手电筒。这是一个小功能,最适合作为更大工作流程中的辅助工具。分享扩展书签工具、食谱收藏或灵感板,只有在一键就能保存时才真正好用。借助 WebViewGold,您的 Claude Code 应用会出现在 iOS 和 Android 的分享面板中,用户分享的任何内容(一个链接、一段文本、一张照片)都会以 JavaScript 变量 sharedData 的形式到达您的 Web 应用。接下来由您的代码决定:预填表单、保存到后端,或者打开编辑器。小组件和快捷操作主屏幕是应用证明自己不只是一个书签的地方。在 iOS 上,WebViewGold 为您的 Claude Code 应用提供了四种在主屏幕上露面的方式:由您的服务器保持更新的图片小组件、长按图标弹出的快捷操作、运行您 JavaScript 的 Siri 短语,以及备用应用图标。Android 上没有与小组件和快捷操作对应的 WebViewGold 功能,所以本指南也会如实介绍那里的替代方案。Apple Wallet 卡券如果您的 Claude Code 应用销售活动门票、运营会员计划或发放优惠券,这些卡券就应该放进 Apple Wallet(Apple 钱包),在需要的时候出现在锁定屏幕上。WebViewGold 补上了缺失的一环:把 .pkpass URL 中的 https:// 换成 addpkpass://,iOS 就会显示原生的“添加到 Apple 钱包”面板。卡券仍需您自己创建并签名;在 Android 上,Google Wallet 则通过它自己的网页保存链接来实现。原生存储和设备 ID用户希望应用能记住他们。Cookie 和 localStorage 通常能让您的 Claude Code 应用保持登录,但它们属于 Web 存储,清除缓存后就会消失。WebViewGold 增加了两个小巧的原生辅助功能:一个持久化的值存储(writevalue:// 和 readvalue://),用于保存设置和恢复会话;以及一个设备 UUID(get-uuid://),用于您服务器上的设备绑定许可证、受信任设备和按设备区分的设置。Meta Audience Network 广告如果您的受众主要活跃在 Facebook 和 Instagram 上,Meta Audience Network 可以作为 AdMob 的替代方案。WebViewGold 集成了原生 Audience Network SDK:iOS 上提供定时或由页面触发的插页广告,Android 上提供横幅和插页广告,在 Config.swift 和 Config.java 中配置,并由您的 Claude Code 应用控制。下面介绍设置步骤、隐私方面的文书工作,以及广告类应用容易被拒的地方。原生标签栏与导航汉堡菜单加网站页眉,是让 Claude Code 应用看起来像一个书签的最快方式,而这恰恰是审核人员依据准则 4.2 评判的内容。WebViewGold 在 iOS 上添加原生标签栏或侧边栏,在 Android 上添加 Material 底部导航栏或抽屉式导航,每种都只需在一个文件中配置,路由仍由您的 Web 应用负责。启动画面与加载指示器启动后白屏两秒,是 Claude Code 应用招来准则 2.1 审核意见或一星差评的常见原因。原生应用瞬间就能打开,而您的 Web 应用需要一点时间。WebViewGold 用品牌启动画面、原生加载指示器和下拉刷新填补这段时间,再在 Web 应用里加几行代码,就能让交接过程不留痕迹。安全区域与状态栏一个在浏览器里看起来完美的 Claude Code 应用,到了手机上可能页眉被灵动岛遮住、标签栏被主屏幕指示条挡住,或者在深色模式下时钟变成白底白字。WebViewGold 默认会把页面保持在安全区域内,并可以原生地或通过 JavaScript 为状态栏着色。下面介绍什么时候依赖默认设置,什么时候用 CSS 实现边到边显示。强制更新与版本检查您的 Claude Code Web 应用每次发布都会更新,但包裹它的原生外壳只有在用户安装新的商店版本后才会改变。当新功能依赖更新的外壳,或旧构建版本指向您即将停用的 URL 时,您需要知道哪些用户落在了后面。WebViewGold 会把已安装的版本告诉您的 Web 应用;几行代码就能把它变成一条温和的提示横幅或一个强制更新页面。外部链接与 URL 处理在网页上,指向 Stripe、Google 登录、WhatsApp 或帮助中心的链接直接就能用。而在应用里,每个链接都需要一个去处:应用本身、应用内浏览器标签页、Safari 或 Chrome,或者邮件、电话、WhatsApp 等其他应用。处理不当,用户就会困在一个没有返回按钮的第三方页面上、在错误的地方登录,或者在浏览器里付款,而应用还在原地干等。Claude Code 和 Claude 的 artifacts 让您在终端或聊天中构建完整的 Web 应用。 在与 Claude 的对话中构建完整应用的开发者,以及有雄心的非开发者。
任意 Web 技术栈;artifacts 是单文件的 React 或 HTML 应用,Claude Code 项目通常是 Next.js、Vite 或 SvelteKit
把项目推送到 GitHub,然后用 Vercel、Netlify 或 Cloudflare Pages 部署(可以让 Claude Code 来配置部署)。单文件 artifact 也可以导出后以同样方式托管。在 WebViewGold 中使用部署 URL 或您的域名。
取决于您的实现:Supabase、Clerk、Auth.js、Firebase
Stripe
没有需要移除的构建工具徽标。
假设您用 Claude Code 构建了一个 AI 旅行规划应用:用户描述一次旅行,服务器路由向 Claude API 请求逐日行程,Supabase 保存每一次已保存的旅行。您部署到 Vercel,连接 trips.yourdomain.com,并让 Claude Code 添加 WebViewGold 桥接调用,用于分享面板以及为每一天生成的 .ics 日历文件,iOS 会在“日历”应用中打开它。每份行程都有一个举报按钮,隐私政策说明旅行描述由 Anthropic 处理。审核备注中的演示账号里已经有两次示例旅行。两个商店都批准了它,Claude Code 会随每次部署发布改进。
粘贴到 Claude Code 中,检查修改,然后发布。
Audit and prepare this web app for publishing as a native iOS and Android app (it will run inside the WebViewGold native WebView wrapper): 1. Ensure a meta viewport tag, no horizontal overflow from 320px to 1024px, 44px tap targets and safe-area-inset padding on fixed headers/footers. 2. Add /privacy and /terms pages linked from the footer. 3. Add a "Delete account" action in settings that removes the user's data and auth record with confirmation. 4. Remove "Download our app" banners and external promotional links in the main navigation. 5. Add error boundaries and retry states for failed requests. 6. Set the <title> to the app name (max 30 characters) and a meta description. 7. Summarize what changed and what I still need to do manually.
完整的原生应用项目,而不是订阅。以下所有功能都包含在授权中,只需一个设置即可开启。
把它部署到公开的 HTTPS URL,将该 URL 填入 WebViewGold for iOS,用 Xcode 或 Cloud Builder 构建,然后通过 App Store Connect 提交。Android 应用则在 WebViewGold for Android 中使用同一个 URL。
可以,只要它托管在永久的 HTTPS URL 上(导出 artifact 并部署该文件)。凡是超出单个页面的内容,请以项目形式构建,这样才能添加隐私页面和真正的导航。
可以。把 WebViewGold 文档指给它:JavaScript 桥接就是简单的 URL scheme 和 JavaScript 变量,因此代理几分钟内就能集成推送、触觉反馈、分享或生物识别登录。
可以,只要您在解压项目的文件夹中运行它。它可以在 Config.swift 和 Config.java 中设置 URL 和各项选项,为 Social Login Helper 添加触发列表,或调整权限说明文字;您仍然需要用 Xcode 和 Android Studio 构建、签名和上传,或者改用 Cloud Builder 表单。
可以,从您的服务器调用即可。Apple 和 Google 接受那些把密钥保存在服务器端、审核输出内容、允许用户举报问题并在隐私政策中说明数据处理方式的 AI 应用。您的应用还必须遵守 Anthropic 的使用政策,它适用于您的用户可以输入的一切提示词。
结果相同,只是您需要投入的工作量不同。三种方式都附带审核通过保证和 7×24 小时人工支持。
$109 每个平台,一次性付费
WebViewGold 许可证:一个现成的 Xcode 或 Android Studio 项目。粘贴您的 URL,设置名称和图标,开启所需功能,构建并提交。永久免费更新。
在主页查看方案$349 每个许可证,一次性附加购买
无需 Mac、Xcode 或 Android Studio:在浏览器中完成配置,我们在云端构建两个应用,并将其交付到 App Store Connect 和 Play Console。
Cloud Builder 如何运作 试用免费演示$698 每个平台 $798
把您的 URL 和图标发给我们。我们的团队在 72 小时内完成配置、构建并交付您的应用,白标,附源码项目。两个平台共 $1,158。
Full Service 详情 服务提供方:冬季特惠价格有效期至 2026年12月31日。
App Store & Google Play 审核通过保证 – 否则 14 天内退款
想直接交给我们?Full Service:我们在 72 小时内完成配置、构建并交付,每个平台 $698 起。有疑问?通过 7×24 小时在线聊天联系我们。
退款依据我们 FAQ 中列出的条件:应用因非内容原因被 Apple 和/或 Google 拒审,并在购买后 14 天内提出申请。