Thanos Multi‑Platform Development Framework: Architecture, Components, and Implementation

Background – With the rapid emergence of mini‑programs such as WeChat, Baidu, Toutiao, and Quick‑App, developers face huge duplication costs when writing separate code for each platform. Existing solutions like WePY, MPVue, and Taro either target a single platform or require separate learning curves, prompting the need for a truly cross‑platform framework.

Multi‑Platform Ecosystem – The current ecosystem splits into Vue‑based and React‑based families. MPVue (Vue) and Taro (React) pioneered multi‑end development, but both have limitations or have ceased updates, leaving a gap that Thanos aims to fill.

Implementation Approach – Thanos is a compile‑time framework consisting of a compiler and a runtime. It parses Vue single‑file components into an AST, transforms templates into platform‑specific markup (e.g., WXML for WeChat), and generates the appropriate JSON, CSS, and JS files for each target.

Functional Block Diagram & Supported Platforms – Thanos supports nine platforms: WeChat Mini‑Program, H5, Quick‑App, QQ Mini‑Program, Toutiao Mini‑Program, Alipay Mini‑Program, Baidu Mini‑Program, QQ Browser Mini‑Program, and React Native. The functional block diagram (see image) illustrates the flow from source code through the compiler to the runtime on each platform.

Scaffold and Supporting Packages – Thanos provides a CLI scaffold (thanos‑cli) that prompts developers for project metadata, downloads template repositories, and sets up a ready‑to‑code project. Supporting packages include thanos‑app‑components, thanos‑service‑components, thanos‑composite, thanos‑diffcode‑loader, thanosvue, thanosvue‑loader, thanosvue‑template‑compiler, thanos‑tesseract, and thanos‑universal‑api.

Component Layer – To hide platform differences, Thanos defines a set of common components based on the WeChat component spec and provides platform‑specific adapters. Components are categorized as basic (view containers, content, form, navigation, media, map) and business‑level reusable components.

API Layer – APIs are split into universal APIs that abstract platform differences and proprietary APIs for features unavailable on certain mini‑programs. Thanos generates the correct API implementation during the build step based on the target platform.

Compiler Details – The compiler uses Vue's template compiler to convert Vue syntax (e.g., v‑for) into platform markup. CSS handling filters out global selectors for mini‑programs while preserving class selectors; tag selectors are prefixed for compatibility. JavaScript/JSON files are processed via custom webpack loader chains, with JSON files copied directly via copy‑webpack‑plugin.

Runtime Mechanics – The runtime provides unified event delegation, maps Vue lifecycle hooks to mini‑program lifecycles, and replaces DOM patching with setData‑based data synchronization. It also optimizes diffing using a JSON diff algorithm and throttles updates to improve performance.

Lifecycle & Event Proxy – Thanos registers platform‑specific page types, removes DOM‑specific mount logic, and adapts Vue's patch process to use setData. Event proxying resolves component keys, event IDs, and method lookups to invoke the correct handler across all platforms.

Conclusion – Thanos demonstrates a practical approach to multi‑end development by leveraging Vue's compilation pipeline and adding platform adapters. While it still faces challenges such as compilation speed, bundle size, and full feature parity, it offers a solid foundation for teams seeking a single codebase across diverse mini‑program ecosystems.