WebToApp 网页自动翻译20 种目标语言与四引擎故障转移的翻译叠加层实现【免费下载链接】web-to-appThe most full featured web-to-app toolkit on Android, a complete APK workshop that runs entirely on your phone项目地址: https://gitcode.com/GitHub_Trending/web/web-to-app在 WebToApp 中把生成的应用到目标语言环境使用时页面正文往往还是原语言。网页自动翻译是编辑通用配置编辑器中的一张能力卡片它开启一个注入式翻译叠加层translateEnabled页面加载后自动采集正文文本批量发送到翻译引擎并原地替换为译文同时保留一键还原原文的能力。本文围绕这张卡片展开从 UI 选项讲到注入脚本与原生JavascriptInterface的完整调用链读完可以掌握自动翻译的启用方式、参数含义以及引擎降级机制的源码级原理。入口与定位功能位于 编辑通用配置编辑器中的翻译卡片。操作路径点击应用卡片上的 ⋮ 菜单选择编辑通用配置网页应用此入口简称为编辑在媒体与互动分组下找到翻译卡片。需要注意它的翻译对象这翻译的是生成应用内的网页内容与构建器本身的界面语言从我的应用顶栏的语言按钮设置相互独立。前者改的是被加载页面的正文后者改的是 WebToApp 主程序自身的 UI 文案两者互不影响。三个配置项翻译卡片提供三项配置其数据结构定义在 TranslateConfig配置项字段说明默认值启用translateEnabled打开翻译叠加层页面加载完成后自动翻译正文关闭目标语言targetLanguage提供 20 种语言见下文清单中文简体zh-CN引擎preferredEngineGoogle、MyMemory、LibreTranslate 或 Lingva并支持自动故障转移自动选择AUTO浮动按钮showFloatingButton页面右下角的翻译/还原 FAB 按钮开启目标语言20 种TranslateLanguage 枚举完整列出了 20 种目标语言及对应的语言代码语言代码语言代码中文简体zh-CN俄语ru中文繁體zh-TW阿拉伯语arEnglishen印地语hi日本語ja泰语th한국어ko越南语viFrançaisfr印尼语idDeutschde马来语msEspañoles土耳其语trPortuguêspt意大利语it荷兰语nl波兰语pl这些代码同时用于 URL 请求的tl/langpair/target参数源语言固定为auto自动检测。引擎选项与自动选择TranslateEngine 枚举定义了五个选项AUTO自动选择、GOOGLE、MYMEMORY、LIBRE、LINGVA。AUTO表示由运行时故障转移机制决定实际使用的引擎下文详述这也是文档所说的在它们之间自动故障转移手动指定某引擎后该引擎成为活跃引擎但当它连续失败达到阈值时仍会按序降级到下一个引擎保证翻译可用性。配置项的 UI 实现在 CreateAppScreen.kt 的 TranslateCard开关 目标语言下拉框 引擎下拉框选中项通过onConfigChange(config.copy(...))写回。运行时的翻译叠加层翻译开启后脚本注入时机在 ShellWebViewCallbacks.kt 的 onPageFinishedif (config.translateEnabled !isLocalRuntimePage) { injectTranslateScript(it, config.translateTargetLanguage, config.translateShowButton) }注意!isLocalRuntimePage条件本地运行时页面如内嵌的 Node.js/Go/Python 服务页面不注入翻译脚本避免干扰运行时页面自身的内容。同一注入点也覆盖另外两个 WebView 宿主——WebViewActivity 和悬浮小窗服务即翻译叠加层在普通窗口、Shell 窗口和悬浮窗三种形态下都生效。注入脚本的工作流程ShellTranslateScript.kt以evaluateJavascript注入一段自守卫脚本window._translateInjected防止重复注入其核心逻辑延迟 1.5 秒后自动翻译页面加载完成后setTimeout(..., 1500)触发translatePage()对应TranslateConfig.autoTranslateOnLoad true的默认行为文本采集用TreeWalker遍历document.body的文本节点过滤规则包括跳过SCRIPT / STYLE / NOSCRIPT / IFRAME / TEXTAREA / INPUT / SELECT / CODE / PRE / SVG / MATH / CANVAS等标签SKIP_TAGS跳过不可见元素display:none、visibility:hidden、opacity:0与可编辑区域只保留长度 ≥ 2 且不是纯数字/标点/符号的文本并按去重集合去重减少请求量缓存与分批请求以原文|目标语言为键维护translateCache未命中的文本按每批 20 条提交给原生端window._nativeTranslate.translate(textsJson, targetLang, callbackId)每次回调带 30 秒超时保护原地替换与还原替换前用WeakMap保存原文再次点击 FAB 时可restoreOriginal()一键还原浮动按钮FAB右下角渐变圆形按钮三态切换——待机紫色翻译图标、翻译中橙色旋转圈、已翻译绿色对勾出错时显示红色错误图标并在 3 秒后回落到待机态。FAB 支持触摸拖拽松手后自动吸附到左/右侧边动态内容再翻译翻译完成后启动MutationObserver监听 DOM 新增节点检测到新内容时防抖 800 ms 后重新执行translatePage()命中缓存的文本不再请求观察器在 30 秒后自动断开以控制开销页面级兜底若原生接口不可用window._nativeTranslate不存在脚本内置一条页面内fetch的引擎链作为降级路径按 Google → MyMemory → LibreTranslate → Lingva 的顺序逐个尝试全部失败才报错。原生端TranslateBridge 与引擎故障转移真正的翻译请求由 Kotlin 侧完成。TranslateBridge通过JavascriptInterface注册为 JS 端可见的_nativeTranslate对象页面脚本调用translate(textsJson, targetLang, callbackId)后在 IO 协程中把文本数组按每批 10 条拆分逐批调用translateBatchWithFallback回调结果以JSONArray.toString()合法 JS 数组字面量拼回window._translateCallback(callbackId, resultsJson)其中callbackId来自页面 JS经过JsStrings.quote转义后再拼入脚本——源码注释明确说明这是为了防止构造出的回调 ID 在异步完成时执行注入的 JS异常路径同样走回调向页面回传错误信息而不是让 Promise 挂起。引擎端点与超时参数四个引擎的 API 端点在 TranslateBridge.kt 的伴生对象中集中定义引擎端点请求方式Googlehttps://translate.googleapis.com/translate_a/singleGETslautotllangdttq原文MyMemoryhttps://api.mymemory.translated.net/getGETq原文langpairautodetect\|langLibreTranslatehttps://libretranslate.com/translatePOST JSON{q, source: auto, target, format: text}Lingvahttps://lingva.ml/api/v1/auto/lang/原文GET统一的超时与重试参数连接超时 10 秒CONNECT_TIMEOUT_MS、读超时 15 秒READ_TIMEOUT_MS、单次失败后 200 ms 重试间隔RETRY_DELAY_MS。此外来自页面的targetLang在拼 URL 前会先做URLEncoder编码防止构造的语言代码改写查询串或路径结构。自动故障转移的具体规则自动故障转移不是简单地逐个试错而是一套带状态机的降级逻辑translateBatchWithFallback每个请求从当前活跃引擎开始按活跃引擎 → 后续引擎 → 绕回起点的环形顺序依次尝试某引擎成功后立即采用其结果某引擎连续失败 3 次ENGINE_FAILURE_THRESHOLD 3即被降级activeEngineIndex顺延到下一个引擎并写日志降级到 XX一旦某引擎成功其失败计数清零降级引擎若后续请求成功例如网络恢复后 Lingva 先于 Google 可用活跃引擎会切换回去日志记录降级翻译成功切换活跃引擎到: XX全部引擎失败时返回原文return texts页面表现为保留原语言而不是空白页面可通过_nativeTranslate.setEngine(name)手动指定引擎对应卡片上的引擎下拉框getEngineStatus()则返回各引擎的名称、失败计数与活跃状态。各引擎响应解析也做了容错解析失败时按expectedCount补齐空串保证一批进、一批出的数量对齐页面端不会出现索引错位。配置如何落到生成应用翻译开关与配置会持久化到应用模型WebApptranslateEnabled 字段随 Room 数据库 Schema 演进见 app/schemas/ 下各版本 JSON构建 APK 时这些配置经 ApkConfig 序列化进产物保证导出的 APK 与构建器里的翻译行为一致。配置字段的双向序列化有 ConfigRoundTripSentinelTest 做往返测试守护避免字段在应用模型 ↔ JSON转换中丢失。小结翻译卡片只改生成应用内网页内容的语言不改变构建器 UI 语言20 种目标语言、AUTO四引擎故障转移、FAB 浮动按钮与动态内容再翻译是叠加层的主要能力故障转移的核心参数连续 3 次失败降级、10 s/15 s 超时、环形尝试顺序全部可在 TranslateBridge.kt 中核对若需要理解页面如何与原生端通信阅读顺序建议ShellTranslateScript.kt页面侧→ TranslateBridge.kt原生侧→ ShellWebViewCallbacks.kt注入时机。【免费下载链接】web-to-appThe most full featured web-to-app toolkit on Android, a complete APK workshop that runs entirely on your phone项目地址: https://gitcode.com/GitHub_Trending/web/web-to-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考