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

Claude Code + 启动画面

为您的 Claude Code 应用设置启动画面、加载指示器和下拉刷新

启动后白屏两秒,是 Claude Code 应用招来准则 2.1 审核意见或一星差评的常见原因。原生应用瞬间就能打开,而您的 Web 应用需要一点时间。WebViewGold 用品牌启动画面、原生加载指示器和下拉刷新填补这段时间,再在 Web 应用里加几行代码,就能让交接过程不留痕迹。

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

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

白屏从何而来

第一次请求

应用在几毫秒内就启动了,但首个 HTML、CSS 和 JavaScript 仍需通过网络传输。遇到冷启动的服务器(缩容到零的托管)或较弱的网络,这需要好几秒。没有启动画面,用户和审核人员看到的就是一个空白的 WebView。

空白的单页应用

大多数 Vibe Coding 应用都是 React 单页应用。页面“加载完成”时,根元素可能仍是空的,要等 JavaScript 渲染、首批数据到达后才有内容。如果启动画面恰好在这时消失,您就会看到一帧空白。

颜色不一致

白色启动画面背景之后是深色应用,或深色页眉下面是白色页面背景,每次启动都会闪一下。让启动画面、HTML 和状态栏共用同一种背景色,就能消除这种闪烁。

给 Claude Code 的提示词

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

给 Claude Code 的提示词
阅读 https://www.webviewgold.com/llms-full.txt(App Name, Icon & Splash Screen、Splash Screen 和 Loading Sign 部分)。这个 Web 应用运行在 WebViewGold 中;iOS 项目位于 ./ios-app,Android 项目位于 ./android-app。
1. 根据主题确定首屏的背景色,在 HTML 入口文件中把它内联设置到 html 和 body 上;在根元素内添加一个小型 CSS 骨架屏。
2. 把所有在会话或首批数据加载期间返回 null 的渲染替换为骨架屏。
3. iOS:在 Config.swift 中设置 splashScreenEnabled = true、remainSplashOption = true、splashMinTime = 800、splashFadeTime = 250,并把 splashscreencolor 设为该颜色。
4. Android:在 Config.java 中设置 SPLASH_SCREEN_ACTIVATED = true、REMAIN_SPLASH_OPTION = true、SPLASH_MIN_TIME = 800 和 SPLASH_FADE_OUT = 250,并在 colors.xml 中设置启动画面背景色。
5. 为 spinneron:// 和 spinneroff:// 添加辅助函数,仅在 navigator.userAgent 包含 "WebViewGold" 时执行,并在耗时请求前后使用它们。
6. 在 CLAUDE.md 中记下这个颜色,并列出所有改动。

我很高兴购买了这个应用!非常简单,文档也很棒。联系客服后,他们回复很快且非常友好,一天之内就解决了我的问题。10/10,值得推荐。

Nelis Geiger · CodeCanyon

配置一个覆盖整个首次加载的启动画面

在 Config.swift 和 Config.java 中花十分钟设置,然后重新构建一次。

  1. 启用启动画面并添加图片

    iOS:在 Config.swift 中启用 splashScreenEnabled,并把正方形的 splash.gif(128、512 或 1024 像素)放在项目根目录。Android:在 Config.java 中启用 SPLASH_SCREEN_ACTIVATED,并把 splash.gif 放进 assets。支持 GIF 动图;动画请尽量简短。

  2. 匹配背景色

    把 iOS 的 splashscreencolor 和 Android colors.xml 中的启动画面背景色,设为与您首屏完全相同的背景色。用 scaleSplashImage 和 SCALE_SPLASH_IMAGE 调整徽标大小(占屏幕短边的百分比;0 表示隐藏)。

  3. 一直显示到页面就绪

    把 remainSplashOption(iOS)和 REMAIN_SPLASH_OPTION(Android)设为 true:启动画面会一直显示到起始 URL 加载完成,而不是在固定的 splashTimeout / SPLASH_TIMEOUT 之后切换为加载指示器。可选:用 splashMinTime / SPLASH_MIN_TIME 设置最短显示时间,用 splashFadeTime / SPLASH_FADE_OUT 设置淡出时间,单位均为毫秒。

  4. 为后续页面加载设置加载指示器样式

    启动之后,每当页面加载时,WebViewGold 都会显示原生指示器。在 iOS 上可以选择旋转图标或进度条(useLoadingSign、useLoadingProgressBar)以及颜色(loadingIndicatorColor);在 Android 上用 ACTIVATE_PROGRESS_BAR 切换。

  5. 在 Web 应用中绘制第一帧

    在 index.html 中为 html 元素设置与启动画面颜色相同的内联背景色,并在会话检查和首批数据加载期间渲染一个轻量的骨架屏,而不是空的根元素。这样从启动画面到 Web 应用的交接就天衣无缝了。

从 JavaScript 控制原生加载指示器和下拉刷新

客户端操作不算页面加载,所以原生指示器不会自动出现。在您的 Claude Code 应用中进行 AI 生成、上传或耗时较长的后端调用时,请自己打开和关闭它;在自带手势的页面上,请关闭下拉刷新:

javascript
const inApp = navigator.userAgent.includes("WebViewGold"); // 您的自定义 User-Agent 标记

async function withNativeSpinner(task) {
  if (inApp) window.location.href = "spinneron://";
  try {
    return await task();
  } finally {
    if (inApp) window.location.href = "spinneroff://";
  }
}

// 用法
// const reply = await withNativeSpinner(() => fetch("/api/generate", { method: "POST", body }));

// 地图、拖放看板、轮播图: 在该页面打开期间禁用
function setPullToRefresh(enabled) {
  if (inApp) window.location.href = enabled ? "enablepulltorefresh://" : "disablepulltorefresh://";
}

一项设置开启下拉刷新

  • iOS:把 pulltorefresh 设为 true,把 preventoverscroll 设为 false(这个手势需要回弹效果)。浅色和深色模式的颜色:pulltorefresh_loadingsigncolour_lightmode、pulltorefresh_backgroundcolour_lightmode 以及对应的 _darkmode 变体(下拉刷新文档)。
  • Android:在 Config.java 中把 ENABLE_PULL_REFRESH 设为 true。同样的 enablepulltorefresh:// 和 disablepulltorefresh:// 调用在两个平台上都有效。
  • 这个手势会重新加载当前 URL。如果您的 Claude Code 应用中某些页面含有未保存的输入(长表单、聊天草稿),请在该页面打开期间关闭它。
  • 希望应用从后台返回时显示最新内容?autoRefreshEnabled(iOS)和 AUTO_REFRESH_ENABLED(Android)会在应用回到前台时重新加载页面;含有长表单的应用请保持关闭。

审核中会被指出的问题

  • 启动画面在页面就绪前就结束,随后出现白屏。如果关闭了 remainSplashOption,而首次请求又很慢,审核人员看到的正是这种情况,而空白屏幕是典型的准则 2.1 问题(如何解决准则 2.1 问题)。
  • 冗长的品牌开场动画。Apple 的人机界面指南把启动视为进入应用的快速过渡;启动画面显示到加载完成为止没有问题,额外再加五秒动画就不行了。
  • 构建版本中残留了 WebViewGold 的占位启动画面或图标。
  • 登录检查好几秒都不渲染任何内容。请立即显示登录表单或骨架屏。
  • 把预览地址、受密码保护的地址或会休眠的开发地址用作起始 URL:启动画面结束后显示的是错误页面。

常见问题

App Store 要求必须有启动画面吗?

Apple 要求应用提供启动屏幕(launch screen),WebViewGold 的 iOS 项目已经包含。在此之上的品牌启动画面是可选的,但对于加载 Web 应用的应用来说,它是避免首页加载期间出现白屏的实用方法。

启动画面应该显示多久?

首页加载需要多久就显示多久,不要更长。remainSplashOption(iOS)和 REMAIN_SPLASH_OPTION(Android)正是这样做的;只有当加载太快导致徽标一闪而过时,才需要再加一个约一秒的最短显示时间。

为什么启动画面之后仍有一帧白屏?

页面已经加载完成,但您的单页应用还没渲染出来,或者它的背景色与启动画面颜色不同。请在 html 元素上设置内联背景色,立即渲染骨架屏,并保持启动画面颜色完全一致。

启动画面可以是动画吗?

可以,两个平台上的 splash.gif 都可以是动图。请保持正方形、文件体积小,并且时长短于通常的加载时间,以免用户看到动画中途被截断。

Claude Code 应用在客户端导航时会显示加载指示器吗?

不会自动显示:客户端路由切换和 fetch 调用都不算页面加载。耗时较长的操作请在前后使用 spinneron:// 和 spinneroff://,短操作则使用骨架屏。

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

结果相同,只是您需要投入的工作量不同。三种方式都附带审核通过保证和 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 天内提出申请。