企业官网建设流程全解析

如何把多个网站合成一个App：WebToApp Multi-Web四种布局实战图解

WebToApp 的Multi-Web（多站点聚合）模式，可以把多个网站合并到一个 App 里，并提供标签页、卡片、信息流、侧边栏四种布局。无需写代码、无需服务器，在手机上就能完成打包，是新手制作「链接枢纽」「门户合集」类应用的最快方式。

什么是 Multi-Web 多站点应用

Multi-Web 让一个 App 同时承载多个网站，每个站点可以独立配置：

• 名称与 URL—— 站点标签和地址
• 类型——URL、LOCAL（本地项目）、INLINE_HTML（内联网页）或EXISTING（复用另一个应用）
• 图标—— Emoji 图标或 favicon 地址
• 主题色、分类—— 用于卡片和侧边栏的视觉分组
• CSS 选择器—— 供信息流模式提取文章标题和链接
• 启用与排序—— 随时开关、调整站点顺序

它的官方文档在 docs/zh/guide/app-types/multi-web.md，界面实现位于 CreateMultiWebAppScreen.kt。

快速创建多站点应用的三步操作

1. 进入创建入口：在「我的应用」页面点击底部的创建按钮，在 12 种应用类型的网格中选择「多站点聚合」。
2. 添加站点：支持快速添加（粘贴网址）和批量导入（从剪贴板一次粘贴多行 URL，每行一个）。每个站点还可设置名称、Emoji 图标和分类标签。
3. 选择布局并预览：在「显示模式」中挑选四种布局之一，点击预览查看效果后即可保存为应用。

界面文案可参考 app_strings_create.xml，例如批量导入的提示为「每行一个URL，从剪贴板粘贴多个链接」。

四种布局模式怎么选

四种模式的选择逻辑集中在 MultiWebShellMode.kt，下面逐一图解。

标签页（TABS）：底部标签栏快速切换站点

底部是一排站点标签，每个标签显示 Emoji 图标和站点名。站点少时各标签平分底栏，站点多时可横向滚动，当前选中的标签会自动滚到可见位置。

适合场景：2~6 个高频站点（如「新闻 + 邮箱 + 天气」），切换频率高、追求一步到位。

💡 已访问过的标签会保持加载状态，切回去不会重新加载页面。

卡片（CARDS）：卡片首页，点击打开全屏浏览

首页是一张「我的站点」网格：两列彩色渐变卡片，显示站点名和域名，可按分类标签分组排列。点击任意卡片后全屏打开该站点，顶部有标题栏和关闭按钮。

适合场景：站点数量较多（超过 6 个），想要一个美观的「应用启动器」首页；开启「显示站点图标」后每张卡片还会显示站点 Emoji 图标。

信息流（FEED）：类似 RSS 阅读器，聚合所有站点文章

信息流模式会自动抓取各站点页面，用CSS 选择器（如article h2 a、.post-title a）提取文章标题和链接，合并成一条统一的信息流。点按任意条目即在全屏页打开原文。

适合场景：多个博客/资讯源聚合阅读。未配置选择器时会自动提取页面链接（10~200 字符的锚文本），配置选择器后提取更精准。抓取逻辑见 MultiWebShellMode.kt。

侧边栏（DRAWER）：侧边导航栏，滑动切换站点

左上角菜单按钮打开「我的站点」抽屉，站点以列表呈现，当前站点右侧有对勾标记，选择后自动关闭抽屉并切换内容。

适合场景：希望保留完整顶栏、又需要频繁切换站点的用户；站点名称较长时比底部标签更省空间。

进阶技巧：让多站点 App 更好用

• 自动刷新：通过「刷新间隔」（refreshInterval）设置自动刷新秒数，信息流模式下右上角还有手动刷新按钮。
• 共享注入：可对全部站点统一注入公共 JS/CSS，例如全局字体或隐藏广告元素。
• 单站点独立配置：每个站点可携带自己的 WebView 配置或运行时配置，互不干扰。
• 隐私与网络选项：整个多站点 App 共享同一套网络与隐私设置，配置一次全局生效。

相关源码与文档

💡小结：站点少、切换多，选标签页；站点多、要颜值，选卡片；读文章聚合，选信息流；想要抽屉式导航，选侧边栏。一个 Multi-Web 应用即可把散落的网站收进同一个 App。