Introducing ARES Cross‑Platform Mobile Development Solution and Mini‑Program Conversion Tool

ARES is JD.com's cross‑platform mobile development solution that includes five product modules—ARES Engines, ARES Websites, ARES Studio, ARES Store, and ARES Console—currently powering over 150 business services on the JD mobile client and supporting more than 20 independent apps.

The ARES Mini‑Program Conversion Tool connects ARES Engines with the WeChat mini‑program ecosystem. It consists of two parts: the previously released JDReact‑to‑JDReact tool and the newly launched JDReact‑to‑WeChat‑Mini‑Program tool, enabling seamless interoperability between the two platforms.

Usage

Install the conversion package via the command line:

@jdreact/to-mp-engine

Then run the conversion command, for example:

npm install -g @jdreact/to-mp-engine

and

jdreact-rntomp -i JDReactAPIDemos -o JDReactAPIDemosWP

This generates a JDReactAPIDemosWP directory containing the mini‑program source code.

The tool accepts three parameters:

-v – prints the version.

-i – specifies the React Native source directory.

-o – specifies the output mini‑program directory.

In addition to the command‑line interface, the conversion functionality is integrated into the latest ARES IDE, allowing visual conversion without manual commands.

Principle Overview

The conversion relies on Abstract Syntax Tree (AST) manipulation. By parsing React Native code into an AST, the tool can transform JSX elements such as <Text>{txt}</Text> into mini‑program syntax <text>{{txt}}</text> , modify variable declarations, and regenerate source code from the altered AST.

Because mini‑programs run in a static environment, the conversion also includes a lightweight React‑like runtime (mini‑react) that executes JSX‑derived JavaScript, prepares data, and updates the UI via the mini‑program's setData method.

Component/API Alignment

Core components (View, Text, Button, etc.) are mapped to their mini‑program equivalents, and higher‑level components such as FlatList and ScrollView are provided with compatible implementations.

Third‑party libraries like redux can be used directly, while react‑redux is supported through a provided higher‑order component HocComponent .

Routing and Animation

Routing differences are abstracted by the @areslabs/wx-navigator package, which adapts React Navigation concepts to the built‑in mini‑program router.

Animation capabilities are bridged via @areslabs/wx-animated , a wrapper that mirrors the mini‑program animation API.

Conversion Constraints

Output code must comply with mini‑program limits (e.g., package size < 2 MB, routing depth ≤ 5).

Only ES6 module syntax (import/export) is supported; require is not allowed except for images.

Each source file may contain only one component.

Spread attributes on basic components are unsupported; custom components may use spreads.

Refs must be functions, not strings; onLayout is unavailable.

Keys are mandatory for list rendering and must be explicitly provided.

Developers are encouraged to provide platform‑specific handling using Platform.OS === 'wx' checks.

Finally, the authors invite feedback to improve the tool and provide contact information for business cooperation.