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

Cursor + 导航

为您的 Cursor 应用添加原生标签栏和导航

汉堡菜单加网站页眉,是让 Cursor 应用看起来像一个书签的最快方式,而这恰恰是审核人员依据准则 4.2 评判的内容。WebViewGold 在 iOS 上添加原生标签栏或侧边栏,在 Android 上添加 Material 底部导航栏或抽屉式导航,每种都只需在一个文件中配置,路由仍由您的 Web 应用负责。

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

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

四种原生导航方式

四种方式在点按时都会在主 WebView 中加载您 Web 应用的某个 URL,所以您的路由完全不用改。每个平台选一种主要模式即可。

iOS 标签栏(导航页脚)

在 Config.swift 中把 showNavFooter 设为 true,并在 FooterBar.json 中描述三到五个标签:标签文字(name)、SF Symbol 图标(sf_symbol)和点按后打开的 URL(redirection_link),另外用 colour(dark 或 light)设置整个标签栏的配色。

iOS 侧边栏

把 enableSidebar 设为 true,并在 Sidebar.json 中填写相同的字段。一个悬浮按钮会打开原生滑出菜单,适合版块多到标签栏放不下的情况。它可以单独使用,也可以与页脚标签栏同时使用(侧边栏文档)。

Android 底部导航栏

Config.java 中的 ENABLE_NAVIGATION_FOOTER 会添加一个 Material 3 底部导航栏。其中的条目、图标和文字来自 res/menu/menu_drawer.xml;Google 建议设置三到五个顶级目的地。深色和浅色模式会自动跟随系统。

Android 抽屉式导航

ENABLE_NAVIGATION_DRAWER 会添加一个悬浮菜单按钮,用来打开 Material 抽屉式导航,由同一个菜单文件驱动。底部导航栏和抽屉式导航可以同时使用,例如主要版块放在底部,设置、帮助和法律页面放在抽屉里。

给 Cursor 的提示词

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

给 Cursor 代理的提示词
这个 Web 应用运行在提供原生标签栏的 WebViewGold 原生外壳中。它的 User-Agent 包含 "WebViewGold"。
1. 读取路由配置,选出四到五个顶级路由。编写 docs/native/FooterBar.json(colour,加上每个标签一条 layout 条目,包含 name、sf_symbol 和指向 https://app.yourdomain.com 的 redirection_link),并把相同的条目列为 res/menu/menu_drawer.xml 的 Android 菜单项。
2. 创建 lib/native.ts,提供 isNativeApp(),为 true 时跳过网站页眉、汉堡菜单和页脚链接栏。
3. 在每个详情路由的页眉中添加 BackButton,并回退到上级路由。
4. 添加一个 Playwright 测试:使用包含 "WebViewGold" 的 User-Agent,直接打开每个标签 URL,期望状态码为 200,并断言网站页眉没有渲染。
5. 在 .cursor/rules 中添加:应用内原生标签栏是唯一的导航;永远不要添加 Web 底部导航。
报告您修改的每个文件。

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

安东尼奥·达维拉 · CodeCanyon

原生导航栏、Web 标签栏还是网站菜单?

原生导航栏(WebViewGold)在 Web 应用中构建的标签栏带汉堡菜单的网站页眉
外观系统原生样式:iOS 上是 SF Symbols,Android 上是 Material 3随您设计,与品牌保持一致一个移动网站
在哪里修改FooterBar.json、Sidebar.json、menu_drawer.xml;随商店更新发布在您的 Web 应用中,每次部署即时生效在您的 Web 应用中
主屏幕指示条和安全区域原生处理需要用 env(safe-area-inset-bottom) 设置内边距常被主屏幕指示条遮挡
点按后的效果在 WebView 中加载该标签的 URL(一次页面加载)客户端路由切换;即时响应,保留状态先打开菜单,再跳转
最适合三到五个固定的顶级版块经常变化的版块、角标和计数器仅用于网站;在应用内隐藏

为 Cursor 应用添加原生标签栏

两个平台合计约 30 分钟,外加一次重新构建。

  1. 选出三到五个目的地

    通常是首页、一个主列表或搜索、收件箱或创建操作,以及账户。其他内容都放在这些版块之内。每个目的地都需要在您的 Cursor 应用中有自己的 URL,而且直接加载这个 URL 时就能打开正确的页面,而不是只能通过应用内点击到达。

  2. iOS:编写 FooterBar.json

    把 showNavFooter 设为 true,并为每个标签添加一个条目,包含 name、sf_symbol(例如 house、magnifyingglass、tray、person.crop.circle)以及指向您生产域名的完整 redirection_link。把 colour 设置为与您的主题相匹配。参考:iOS 文档。

  3. Android:填写 menu_drawer.xml

    在 Config.java 中把 ENABLE_NAVIGATION_FOOTER(底部导航栏)或 ENABLE_NAVIGATION_DRAWER(侧边抽屉)设为 true,在 res/menu/menu_drawer.xml 中定义条目、图标和文字,并按照 Android 文档中的说明为每个条目分配 URL。

  4. 在应用内隐藏 Web 导航

    在 Config.swift(useragent_iphone、useragent_ipad)和 Config.java(USER_AGENT)中设置包含“WebViewGold”之类标记的自定义 User-Agent,然后让您的 Cursor 应用在检测到它时,不再渲染网站页眉菜单、汉堡按钮和页脚链接栏。同一屏幕上出现两套导航系统,是最常见的设计类审核意见。

  5. 为详情页提供返回按钮

    iPhone 没有系统返回按钮。标签负责打开各个版块;从版块进入的页面需要在页眉中显示清晰可见的返回箭头。请保持 enableswipenavigation 开启,这样在 iOS 上从屏幕边缘轻扫也能返回;Android 用户还可以使用系统返回手势。

  6. 在冷启动和未登录状态下测试每个标签

    分别在启动后立即、登录后以及会话过期后点按每个标签。如果某个标签重定向到了登录页,用户登录后应回到这个标签,而不是仪表板。

典型应用的 FooterBar.json

把这些 URL 替换为您的 Cursor 应用在生产域名上的路由。Sidebar.json 使用相同的结构。图标名称请在 Apple 的 SF Symbols 应用中核对。

json
{
  "colour": "light",
  "layout": [
    { "redirection_link": "https://app.yourdomain.com/", "sf_symbol": "house", "name": "首页" },
    { "redirection_link": "https://app.yourdomain.com/search", "sf_symbol": "magnifyingglass", "name": "搜索" },
    { "redirection_link": "https://app.yourdomain.com/inbox", "sf_symbol": "tray", "name": "收件箱" },
    { "redirection_link": "https://app.yourdomain.com/account", "sf_symbol": "person.crop.circle", "name": "账户" }
  ]
}

审核人员会注意到的导航问题

  • 原生标签栏加上带有自己菜单的网站页眉:应用看起来像没做完。请在应用内隐藏其中之一。
  • 标签指向预览或测试环境地址,或指向直接加载时返回 404 的路由。构建之前,请在新的浏览器标签页中逐一打开每个标签 URL。
  • 超过五个标签,或标签打开的是外部网站。标签只留给您自己的顶级版块;法律和帮助页面放到侧边栏或抽屉式导航中。
  • 布局仍然依赖网站页脚来放置删除账户或隐私政策等关键链接。请确保这些链接在应用内依然可以访问,例如放在“账户”下。
  • 只靠标签栏来应对准则 4.2。它能让应用更有原生感;推送通知、离线页面和像应用一样的布局才能让整体完整(参见准则 4.2 指南)。

常见问题

要通过 App Store 审核,必须有原生标签栏吗?

没有哪一项功能是必需的。准则 4.2 关注应用是否提供了比重新包装的网站更多的东西,准则 4.0 关注它是否遵循 iOS 的设计规范。原生标签栏是这两方面最明确的信号之一,尤其是与推送通知和完善的离线页面搭配时,但它无法替代一个适配移动端的 Web 应用。

不发布商店更新也能修改标签吗?

原生标签栏不行:FooterBar.json、Sidebar.json 和 menu_drawer.xml 都打包在构建版本里。标签 URL 背后的页面则会随每次部署更新。如果您的版块经常变化,请改为在 Web 应用中构建标签栏,并只在应用内显示。

原生标签栏支持单页应用吗?

支持。每个标签都会在 WebView 中加载自己的 URL,因此您的托管服务必须对每个路由都返回应用(SPA 回退到 index.html),您的路由器也必须在直接加载时打开正确的页面。测试方法:把某个标签 URL 粘贴到新的浏览器标签页中打开。

应该用页脚标签栏、侧边栏,还是两者都用?

用页脚标签栏承载三到五个主要版块。再添加 iOS 侧边栏或 Android 抽屉式导航,放置设置、帮助和法律页面等次要目的地。不要在两处重复相同的链接。

Cursor 生成的菜单怎么处理?

在网站上保留它,并通过 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日。

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

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

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

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