WebViewGold 文档 · iOS
🇨🇳 中文
获取 WebViewGold

原生侧边栏导航

启用带有自定义链接和 SF Symbols 图标的原生滑动侧边栏菜单——通过 Sidebar.json 配置。

除了原生导航页脚之外,WebViewGold 还提供原生的滑动侧边栏,让您无需修改网站即可提供类似原生应用的导航体验。一个浮动菜单按钮会打开包含您的链接的侧边栏——每个条目都会让主 WebView 导航到您为其关联的 URL。

启用方法:

Config.swift 中设置以下选项:

var enableSidebar = true

配置方法:

在 Xcode 项目中打开 Sidebar.json,定义配色方案和菜单条目:

{
   "colour":"dark",
   "layout":[
      {
         "redirection_link":"https://example.org/home",
         "sf_symbol":"house",
         "name": "首页"
      },
      {
         "redirection_link":"https://example.org/shop",
         "sf_symbol":"cart",
         "name": "商店"
      }
   ]
}
说明
colour
侧边栏的配色方案:darklight
redirection_link
点按条目时在主 WebView 中加载的 URL。
sf_symbol
来自 Apple SF Symbols 库的图标名称(例如 housecartwrench.and.screwdriver)。
name
侧边栏条目的标签。

行为:

  • 浮动按钮在您的 Web 内容上方打开和关闭侧边栏。
  • 点按条目会在主 WebView 中加载关联的 URL,因此您的 Web 应用永远不会离开应用外壳。
  • 侧边栏可以与原生导航页脚组合使用,也可以独立使用。

SDK 风格的实现说明

将此功能视为向 Web 层公开的原生能力:将生产网站或 PWA 作为唯一可信来源,然后使用文档中的 WebViewGold 配置标志、URL 命令和 JavaScript 桥接调用,仅在能够带来价值的地方启用原生 iOS 行为。这种方式让代码库易于维护,因为同一个 Web 应用只需极少的条件逻辑即可同时服务于浏览器、WebViewGold for iOS 以及其他 WebViewGold 平台。

为获得可靠的结果,建议优先使用 HTTPS 端点、稳定的路由名称、在界面中明确的成功/错误状态,以及封装原生调用的小型 JavaScript 辅助函数。例如,使用 jQuery Mobile、Lovable、Base44、Bolt、WordPress、Bubble、自定义 React/Vue/Angular 技术栈或静态 HTML 构建的 Web 应用,可以提供单个按钮或事件处理程序来触发原生 WebViewGold API,同时仍为浏览器提供优雅的回退方案。

  • 推荐的集成模式:检测应用上下文,调用 WebViewGold API,然后在原生回调或路由变更后更新 Web 界面。
  • 测试清单:在真机或打包构建上验证该功能,检查权限和商店审核文案,并确认仅使用浏览器的用户仍能获得有用的回退方案。
  • SEO 优势:让功能页面、路由标题和结构化内容在您的网站上保持可被索引,同时由 WebViewGold 为 iOS 用户提供原生应用外壳。

太忙了?我们替您搭建应用。

我们的团队为您配置、构建并提交 WebViewGold 应用——全程代劳、交付迅速、德国制造。

让我们搭建应用 →

在浏览器中构建

无需 Mac、无需 IDE:WebViewGold Cloud Builder 在线为您配置、构建并上传应用。

了解 Cloud Builder →