【免费下载链接】legacy-mindmupLegacy MindMup (v1) code项目地址https://gitcode.com/gh_mirrors/le/legacy-mindmup点击查看免费下载MindMuplegacy-mindmup 是 MindMup v1 的服务端代码仓库的 iOS 版本并不是一个原生应用而是一套WKWebView 桥接 Web 前端的混合架构原生 App 只是外壳真正的思维导图编辑器运行在网页里通过mmproxy消息通道与 iOS 通信同时仓库中并存 3/ 和 4/ 两套前端由服务端按 App 版本号动态分发。本文拆解这套协同机制的 4 个核心环节。一、先搞清楚iOS 版 MindMup 长什么样打开仓库结构你会发现移动端代码集中在几个目录public/lib-ios/3/与public/lib-ios/4/—— 两套 iOS 专用 JS 模块库public/ios/3/与public/ios/4/—— 两套页面产物与入口脚本views/ios/3/与views/ios/4/—— 两套 ERB 页面模板public/mm-ios.js—— 移动端全局命名空间入口整个协作关系可以概括为一句话iOS 原生代码负责壳窗口、菜单、分享、键盘网页代码负责核导图渲染与编辑两者靠一条 JSON 消息总线对接。二、WKWebView 桥接JavaScript 如何喊话原生端桥接的起点是一个非常小的类MM.IOS.Proxy定义在 wkwebview-proxy.jsvar wkMessageHandler (window.webkit window.webkit.messageHandlers window.webkit.messageHandlers[listenerName]);它做的事情只有三件找到原生注册的 MessageHandler。WKWebView 中原生 App 会预先注册一个叫mmproxy的监听器JS 通过window.webkit.messageHandlers.mmproxy拿到它发送时做深拷贝。sendMessage会把参数JSON.parse(JSON.stringify(...))后postMessage过去避免原生端异步读取时数据被 JS 侧修改找不到 handler 就降级为 console.log。这样同一份代码在浏览器里调试时不会报错。更巧妙的是这个 Proxy 还劫持了window.console.log和window.onerror见 wkwebview-proxy.js#L38-L51——网页里任何一条日志、任何一个未捕获的 JS 错误都会被自动转发给原生端做分析上报。移动端排障能力就是这么白嫖出来的。反向通道原生 → 网页则是全局函数MM.command它是下一条消息的接收口我们接下来看。三、命令总线 MM.command原生指令如何反向路由每次MM.main(config)启动时入口在 main-ios.js会先组装一个处理器列表然后挂上统一分发器commandHandlers [mapModelProxy, confimationProxy, windowProxy, iosStage, maploadHandler, serverConfig, licenseCommandHandler, exportRequestHandler, modalRequestHandler];分发逻辑见 main-ios.js#L108-L128原生端发来一个{type, args}形式的命令后MM.command依次询问每个 handler 的handlesCommand(command)谁认领谁执行handleCommand。几个不经过 handler 的特殊指令也在这里兜底处理指令 type作用ping探活原样回传给原生端keyboardShown/keyboardHidden键盘弹出/收起时切换 body class调整布局contentSaved通知自动保存模块丢弃未保存变更mapModel直接调用 mapModel 上的同名方法这种每个 handler 自己声明管哪些命令的责任链模式是双版本共存却互不干扰的关键——新增能力只需新增一个 handler。几个值得细看的处理器ios-window-proxy.js处理setViewport旋转屏幕、分屏时原生同步 viewport和prepareForSave——先把页面缩放到适合截图的视角再回传save-content整图 JSON或save-screen仅截图给原生端ios-mapmodel-proxy.js把mapModel:xxx形式的命令转发为 MapModel 方法调用。注意 第39-46行当处于快速编辑模式时节点编辑请求会反向发给原生端由 App 弹出自己的输入框——因为 WKWebView 内的输入体验受限这是典型的该用原生就用原生ios-stage-api.js处理iosStage:前缀命令比如双击节点弹出上下文菜单时它会算出选中节点在页面上的像素矩形和触点坐标再通过togglePopover事件让 popover 菜单精准出现在手指位置。四、双版本前端3/ 与 4/ 目录如何分工服务端的路由是版本分发的总开关见 web.rb#L144-L158get /ios/map do # 供 3.0 的旧 App 使用 erb :ios/3/ios_legacy end get /ios/editor/:my_app_version do version params[:my_app_version].to_f if params[:my_app_version] halt 404 if version settings.earliest_supported_ios_version if version 4 then erb :ios/3/ios else erb :ios/4/ios end end三个要点App 打开编辑器时会在 URL 里带上自己的版本号/ios/editor/3.1或/ios/editor/4.2服务端据此决定返回哪套前端EARLIEST_IOS_VERSION环境变量是一根熔断线低于该版本的 App 直接收到 404防止远古 App 连上无法兼容的新后端另有 web.rb#L160-L174 的/ios/config接口返回 S3 上传地址、Gold API、帮助页 URL 等 JSON 配置App 启动时拉取。两套前端的差异可以用diff一眼看清4/ 版在 ios-server-config.js、ios-server-connector.js、ios-license-handler.js、ios-export-request-handler.js、ios-modal-export-widget.js 上多出一整组云端能力模块——ServerConfig负责把配置存入 localStorage 并监听config:set命令热更新ServerConnector据此重建 GoldS3 云存储API 与S3Api实例配置一变就整体换掉ExportRequestHandler承接exportRequest命令导出结果通过ios-export-result回传原生端最终走 iOS 系统分享面板发出去。也就是说3/ 是本地编辑器4/ 是本地编辑器 云端保存/授权/导出。页面模板 ios.erb 里 4/ 版还多了 Atlas 发布弹窗等额外 widget 片段commandHandlers数组也从 5 个扩展到 9 个对比 ios/3/main-ios.js 与 ios/4/main-ios.js 的初始化清单即可验证。五、构建管线Grunt 如何把双版本打包构建逻辑集中在 GruntFile.jsconcat任务把三部分拼成单文件public/mm-ios.js public/lib-ios/N/*.js public/ios/N/main-ios.js └────────────── compiled/mm-ios-compiled-N.js ── mm-ios-compiled-N.min.jsN取 3 和 4 各跑一遍CSS 同样走cssmin:combine合并成combined-ios-3.css/combined-ios-4.css。生产环境加载压缩后的mm-ios-compiled-N.min.js见 scripts_ios.erb开发环境则加载未压缩版本。一条grunt compile同时产出两套前端互不污染。六、如何验证这套行为仓库用两层测试守护这个架构路由层ios_paths_spec.rb 验证/ios/map与/ios/editor/3.0返回的页面body都带ios-wkwebviewclass、低版本请求 404、/ios/config返回的 JSON 字段齐全JS 模块层test/下每个 iOS 模块都有对应 spec如 ios-modal-widget-spec.js、ios-server-connector-spec.js基于test-lib/jasmine-1.2.0/的 Jasmine 框架由 Grunt 的jasmine任务在编译前先行执行。七、总结回顾一下这套协同架构的 4 个关键设计一条总线双向通JS → 原生走mmproxy.postMessage原生 → JS 走MM.command命令总线责任链解耦每个 handler 自声明管辖的命令类型加功能不动主干版本号即路由服务端一个路由按 App 版本分发 3/ 或 4/ 前端EARLIEST_IOS_VERSION熔断过旧客户端原生兜底体验输入框、确认弹窗、分享面板等交给原生实现网页只做渲染与逻辑。理解了 wkwebview-proxy.js 与 main-ios.js 这两个文件基本就读懂了 MindMup 移动端壳核分离、双版本演进的全部骨架。赞分享【免费下载链接】legacy-mindmupLegacy MindMup (v1) code项目地址https://gitcode.com/gh_mirrors/le/legacy-mindmup点击查看免费下载相关推荐LiveBridge架构拆解Flutter与Kotlin双栈协同和MethodChannel桥接实践指南LiveBridge架构拆解Flutter与Kotlin双栈协同和MethodChannel桥接实践指南 LiveBridge 是一款面向 Android 1拆解 CC Pocket 架构App、Bridge 与 Agent 三层如何协同工作的完整指南拆解 CC Pocket 架构App、Bridge 与 Agent 三层如何协同工作的完整指南 CC Pocket 是一款免费的移动端编程代理客户端通过 W人工智能AI Agent移动开发代码智能体后端如何构建 OpenWash Android 与 Web 双端体验移动端与 Web 控制台的协同如何构建 OpenWash Android 与 Web 双端体验移动端与 Web 控制台的协同 OpenWash项目名 openwash web是一个面向上一篇Skaffold自定义构建器开发扩展你的Kubernetes工具链下一篇Velocity动画缓存策略优化重复动画的性能创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考