Dimina (星河小程序)

Dimina is a cross-platform mini-program framework open-sourced by Didi. It compiles mini-program source code (WXML, WXSS, JavaScript/TypeScript) into unified runtime resource packages that can be loaded by Android, iOS, Harmony, and Web containers.

Key features include:

• Embeddable Modules: Existing mini-programs can be embedded into existing Apps as independent modules.
• Offline Resources: Mini-program packages are provided by the host and stored locally to reduce network dependency.
• Logic/View Separation: Business logic runs in a separate JS engine or Worker, while the view is rendered by a WebView or Browser.
• Unified Native Capabilities: Access host capabilities via standard APIs and an extension Bridge without scattering platform-specific logic in business pages.

Dimina uses a multi-threaded model where business logic and view rendering are separated. The specific engines and containers used depend on the platform:

By default, the compiler generates a folder named after the appId inside your target directory.

Default Structure:

dist/
  ├─ {appId}/
    ├─ logic.js      # Logic code
    ├─ view.js       # View code
    ├─ style.css     # Styles
    └─ config.json   # Configuration

Structure with --no-app-id-dir: If you use the --no-app-id-dir flag, the files are placed directly in the target directory without the {appId} subfolder:

dist/
  ├─ logic.js
  ├─ view.js
  ├─ style.css
  └─ config.json

The Dimina runtime is divided into four distinct layers. Communication between the Logic and Render layers is not direct; all messages must pass through the Container.

The JSSDK includes vConsole and it is statically bundled with pageFrame. It only initializes if an enablement flag is detected in the URL parameters (?vconsole=1).

How to enable vConsole by platform:

• Web Container: Always appends ?vconsole=1 when loading pageFrame.
• Android: Use Dimina.DiminaConfig.Builder().setDebugMode(true).
• iOS: Use a Debug build or set DMPAppConfig.isDebugMode = true.
• Harmony: Use a debug HAP or set DMPAppConfig.isDebugMode = true.

Dimina uses two primary channels for communication between layers via the Container:

1. publish: Used for forwarding messages between the Logic (Service) and Rendering (Render) layers.
   • Scenarios: setData(), page events, component creation, and state synchronization.
2. invoke: Used to call capabilities in the Container or a specific target layer and receive a result.
   • Scenarios: wx.request(), routing, system APIs, and selector queries.

Relation Types

• parent: The parent component in a parent-child relationship.
• child: The child component in a parent-child relationship.
• ancestor: The ancestor component in an ancestor-descendant relationship.
• descendant: The descendant component in an ancestor-descendant relationship.

Lifecycle Hooks

• linked: Triggered when the relationship is established.
• linkChanged: Triggered when the relationship changes (e.g., the component is moved).
• unlinked: Triggered when the relationship is severed or the component is destroyed.

Dimina uses the DMCC (Dimina Mini-program Compiler) to convert source code into logic, view, style, and configuration resources. The container connects the logic layer, view layer, and native capabilities via a message channel.

Each platform uses a different combination of logic engine and view container:

| Platform | Logic Engine | View Container | Entry Point |
| --- | --- | --- | --- |
| Android | QuickJS | Android WebView | [Android SDK](./android/README.md) |
| iOS | JavaScriptCore | WKWebView | [iOS SDK](./iOS/README.md) |
| Harmony | QuickJS | Harmony WebView | [Harmony SDK](./harmony/dimina/README.md) |
| Web | Web Worker | Browser | [Online Demo](https://didi.github.io/dimina/) |

The App instance is created only once within a single Dimina logic runtime. Switching pages does not re-trigger onLaunch. onLaunch is only triggered again if the logic runtime is destroyed and rebuilt.

Components declared in the root app.json are automatically inherited by pages within subPackages. You do not need to re-declare global components inside subpackage configurations.

{
  "pages": ["pages/index/index"],
  "subPackages": [{
    "root": "packageA",
    "pages": ["pages/detail/detail"]
  }],
  "usingComponents": {
    "global-button": "./components/global-button/index"
  }
}