Nanachi Multi‑End Mini‑Program Translation Framework: Architecture, Advantages, and Technical Details

Shaw Yudong, a front‑end engineer at Qunar, introduces Nanachi, a multi‑end mini‑program translation framework developed by Qunar that enables a single React codebase to run on multiple mini‑program platforms and H5, greatly improving development efficiency and becoming the company's standard mini‑program framework.

Nanachi is installed globally via npm install nanachi-cli -g , initialized with nanachi init yourprojectname , and built or watched using commands such as nanachi watch (with platform‑specific flags like watch:ali , watch:bu , watch:h5 ). The watch mode launches a webpack‑dev‑server for real‑time H5 debugging.

The H5 solution offers several advantages over traditional approaches: write‑once‑run‑anywhere with low adaptation cost, a rich component library compatible with WeChat components, encapsulated mini‑program APIs (e.g., toast, call, vibration) that mimic native experience, no need to manage routing manually, and zero‑configuration webpack bundling with optional custom configuration.

During compilation, Nanachi processes three stages: source code transformation, intermediate artifact generation, and final bundling. It translates mini‑program‑specific tags to web equivalents, uses the schnee‑ui component library to bridge differences, and automatically injects component dependencies. Page and App structures are transformed: a dynamicPage higher‑order component handles lifecycle hooks, title bar, tab bar, pull‑to‑refresh, and animations; the App mounts a PageWrapper that manages the page stack.

At runtime, Nanachi implements a compatible API layer supporting both callbacks and promises, reproduces native components (including complex ones like city selector and carousel), and provides browser‑side title bar and tab bar. It simulates missing mini‑program lifecycles and synchronises navigation with the browser history using history.pushState and history.replaceState , handling the popstate event to keep API behavior consistent.

Page stack management mirrors mini‑program behavior by maintaining an internal __currentPages array, enforcing a maximum page count (10 for WeChat), and performing push/pop logic on navigation calls.

To avoid style leakage, Nanachi adds a unique hash attribute (derived from the MD5 of the combined JS and CSS file path) to JSX tags and corresponding CSS selectors, achieving scoped styling without requiring developer changes or compromising compatibility.

In summary, Nanachi has become Qunar's standard for mini‑program development, offering cross‑platform efficiency, H5 parity, zero‑config builds, and flexible webpack customization, while simplifying component and API usage, routing, and styling for developers.