Dimina: Open‑Source Cross‑Platform Mini‑Program Framework for Front‑End Dev

Since the launch of WeChat Mini Programs in 2017, the market has lacked a mature, open‑source solution. Didi now open‑sources its core mini‑program framework, Dimina (星河小程序), a lightweight cross‑platform framework that aims to provide high performance, low entry barrier development experience.

What is Dimina?

Dimina allows developers to write a single mini‑program codebase that runs on Android, iOS, HarmonyOS, and Web. It integrates Vue 3 with mini‑program syntax, offering a modular architecture that feels like building with blocks.

Core Architecture

Rendering Engine: Vue 3 (chosen for its similarity to mini‑program syntax).

Syntax Translator: DMCC compiler, which seamlessly converts mini‑program syntax to Vue syntax.

Native Containers: Platform‑specific runtime containers for executing the compiled code.

Compilation Process

<code>Input files                Output files
app.js, index.js → logic.js   # (logic file)
index.wxml → view.js          # (view file)
app.wxss, index.wxss → style.css # (style file)
app.json, index.json → config.json # (config file)</code>

The compiler acts like a translator, turning mini‑program “dialects” into a universal “language” understood by all target platforms.

Project Structure

<code>your‑miniprogram/
├── app.js      # application logic
├── app.json    # configuration
├── app.wxss    # global styles
├── pages/      # page directory
│   └── index/
│       ├── index.js   # page logic
│       ├── index.wxml  # page markup
│       ├── index.wxss  # page styles
│       └── index.json  # page config
└── components/ # component directory</code>

Component Ecosystem

Dimina currently supports over 25 common components, covering all daily development needs:

Basic: view, text, button, image, …

Form: input, checkbox, radio, picker, …

Navigation: navigator, navigation‑bar, …

Media: swiper, scroll‑view, rich‑text, …

API Capabilities

More than 60 APIs are provided, grouped into eight functional categories, delivering a “Swiss‑army‑knife” level of capability for diverse development scenarios.

Getting Started

Developers can follow the illustrated flowchart to quickly integrate Dimina and build everyday business features.

Real‑World Demo

An online demo showcases the full component library, smooth user interactions, and real‑time state updates with routing.

Demo URL: https://didi.github.io/dimina/

Future Outlook

Dimina will continue to enhance its API, component, and feature set. The project welcomes community contributions.

Project Links

GitHub repository: https://github.com/didi/dimina

Online demonstration: https://didi.github.io/dimina/