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

Lovable + 应用专属 UI

用自定义 CSS 和 JavaScript 为您的 Lovable 应用做应用专属调整

网站需要 Cookie 横幅、带 30 个链接的页脚和一个“下载我们的应用”徽标。应用一个都不需要。WebViewGold 会向您 Lovable 应用在应用内加载的每个页面注入 <code>custom.css</code> 和 <code>custom.js</code> 文件,网站保持原样,应用看起来就像应用。

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

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

典型的应用专属改动

隐藏仅网站需要的元素

Cookie 横幅、商店徽标、邮件订阅弹窗、桌面导航、“Edit with …”构建工具徽标。在 custom.css 中各写一条 CSS 规则即可。

类应用的布局

更大的点击区域、固定栏的安全区域内边距、底部导航(或 WebViewGold 的原生导航底栏)、隐藏应用栏已经显示的页面标题。

行为改动

把外部链接改写为在应用内浏览器中打开,表单提交后调用 successhaptic://,为数字商品隐藏 Web 结账并改为显示 IAP 按钮。

给 Lovable 的提示词

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

粘贴到 Lovable 的提示词
Prepare app-only and web-only UI for the native mobile version. 1) Add a hook useIsNativeApp() that returns true when navigator.userAgent contains "WebViewGold". 2) Add the attribute data-web-only to the marketing header, footer, cookie banner and any "Download the app" or "Edit with" promotional elements, and do not render them when useIsNativeApp() is true. 3) Inside the native app, render a fixed bottom tab bar with four tabs (Home, Search, Activity, Profile) using the existing routes, with padding-bottom set to env(safe-area-inset-bottom) and a 56px height; hide the top navigation on mobile widths. 4) Avoid layout shifts: evaluate the hook synchronously so the choice is made before first paint.

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

安东尼奥·达维拉 · CodeCanyon

为 Lovable 应用实现的两种方式

选择与您工作方式相符的那一种。

  1. 方案 A:WebViewGold 中的 custom.css / custom.js

    编辑 Xcode 和 Android Studio 项目中的这两个文件(或 Cloud Builder 字段)。它们会被注入每个页面。无需部署您的 Web 应用;新的应用构建会带上这些改动。

  2. 方案 B:在 Lovable 中检测应用

    在 Config.swift / Config.java 中设置自定义 User-Agent(例如追加“WebViewGold”),然后在 Web 应用检测到它时给 body 添加一个 class,并在您的常规样式表中为 .in-app 变体设置样式。改动随每次发布生效,无需更新应用。

  3. 两者结合

    对经常变化的内容(导航、促销)使用 User-Agent class,对那些在构建工具中不易修改的元素,用 custom.css 做一次性清理。

  4. 在审核条件下验证

    在 iPhone 和 Android 手机上以竖屏和横屏打开应用,并在 iPad 上打开:没有桌面页眉,没有横向滚动,没有东西藏在刘海下面。

入门 custom.css

根据您的 Lovable 标记调整选择器:

css
/* website-only elements */
#cookie-banner, .newsletter-popup, .app-store-badges, #lovable-badge, a[href*="lovable.dev"] { display: none !important; }
/* desktop navigation and footer links */
header .desktop-nav, footer .link-columns { display: none !important; }
/* safe area for fixed bars */
.bottom-bar { padding-bottom: env(safe-area-inset-bottom); }
/* comfortable tap targets */
button, .btn, a.nav-item { min-height: 44px; }

常见问题

自定义 CSS 会改变我的网站吗?

不会。它只在应用内注入。Safari 或 Chrome 中的访客看到的网站和以前一样。

我能注入 JavaScript 库吗?

能,custom.js 会在应用内的每次页面加载时运行。保持它小巧而健壮:根据框架不同,您 Lovable 应用的页面可能在您的脚本之前或之后加载。

CSS 改动需要新的商店版本吗?

custom.css 中的改动需要(它随应用一起发布)。如果您想要即时生效的改动,请改用 Web 应用中的 User-Agent 检测。

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

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

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

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

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

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