How JD’s Low‑Code Platform Transforms Mini‑Program Development

Background

Low‑code development platforms (LCDP) enable rapid creation and deployment of applications through visual configuration rather than hand‑written code. JD’s growing reliance on WeChat mini‑programs created a need for a shared, reusable solution across thousands of internal mini‑programs.

Architecture Design

1. Design Considerations The platform balances low learning cost and quick onboarding against the need for broad applicability. A highly generic solution incurs high integration, learning, and development costs, while a highly vertical solution offers fast integration but limited extensibility.

2. Core Functions The platform provides zero‑code or low‑code rapid app generation, a visual UI builder, and drag‑and‑drop project assembly.

3. Layered + iOC Architecture The system is divided into clear horizontal layers that communicate via interfaces and protocols. An iOC (Inversion of Control) approach decouples dependent objects through third‑party injection, simplifying complexity and enhancing reusability.

4. Process Orchestration Ideal workflow nodes represent high‑level business steps, but designing such abstract nodes is challenging.

5. Convention Over Configuration Consistent front‑end standards for requirements, UI design, and API contracts reduce compatibility work and improve reuse.

6. Scope of the Platform The platform targets roughly 80% of common business scenarios, delivering the remaining 20% via code export or custom business components.

Platform Overview

The "Instant Design Platform" is an on‑demand development environment for C‑end pages. It supports importing Relay design URLs to generate UI‑to‑code, visual front‑end assembly, and one‑sentence ChatGPT‑driven page creation. Generated pages can be published to internal marketplaces such as Tongtian Tower and Columbus.

User Interface Layout

The page consists of a top menu bar and a main body split into four columns: tool selection, tabbed panels (Structure, Floor, Component, My), canvas area, and style/interaction/configuration panel.

Top menu includes page title, canvas operation buttons (undo, redo, clear), and functional entry buttons (Data Source, Relay Import, Preview, Save).

Canvas Toolbox

The left toolbox provides five drawing tools:

Select – choose, move, resize, or delete elements.

Block – draw rectangular containers.

Image – place images.

Text – add text blocks.

List – create list structures.

Configuration Panels

Style Panel

Shows style properties of the selected node (size, position, margin, layout, background, font, border, shadow, opacity, z‑index, etc.) and allows exporting selected styles.

Interaction Panel

Configures click and exposure interactions, including event IDs, pre‑conditions, navigation, API calls, state updates, toast messages, and re‑render triggers.

Binding Panel

Supports data binding for text and image elements, data processing (e.g., integer/decimal formatting), and conditional visibility based on data source, state, or page parameters.

Asset Panel

When a root node is selected, the asset panel lists exported configuration items from data sources or state management for quick editing.

Data Source Configuration

The data source modal contains request list, request details, and response configuration. Requests can be grouped (e.g., direct API, interaction API), edited, duplicated, or deleted. Parameters support strings, numbers, booleans, arrays, and objects, with options to pull values from state or page parameters.

Global state management allows defining reusable data objects of various types.

Additional Features

Ui2Code converts Relay design drafts into canvas content with styles, enabling instant preview and QR‑code generation for mini‑program testing.

ChatGPT Assistant provides a natural‑language interface for one‑sentence page creation and on‑the‑fly adjustments.