ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

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

如何把多个网站合成一个App:WebToApp Multi-Web四种布局实战图解 如何把多个网站合成一个AppWebToApp 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。快速创建多站点应用的三步操作进入创建入口在「我的应用」页面点击底部的创建按钮在 12 种应用类型的网格中选择「多站点聚合」。添加站点支持快速添加粘贴网址和批量导入从剪贴板一次粘贴多行 URL每行一个。每个站点还可设置名称、Emoji 图标和分类标签。选择布局并预览在「显示模式」中挑选四种布局之一点击预览查看效果后即可保存为应用。界面文案可参考 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 共享同一套网络与隐私设置配置一次全局生效。相关源码与文档内容路径多站点模式官方文档docs/guide/app-types/multi-web.md创建多站点应用界面CreateMultiWebAppScreen.kt四种布局实现MultiWebShellMode.kt应用类型总览docs/zh/guide/main-screen/create-app.md小结站点少、切换多选标签页站点多、要颜值选卡片读文章聚合选信息流想要抽屉式导航选侧边栏。一个 Multi-Web 应用即可把散落的网站收进同一个 App。创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表