Introducing NutUI for JD Mini-Program: Features, H5 Comparison, and Quick Start Guide
This article introduces NutUI, JD's lightweight mobile component library now supporting JD mini-programs, compares H5 and mini-program development, and provides a step‑by‑step guide using Taro to quickly set up and run a NutUI‑based JD mini‑program project.
NutUI is a JD‑styled lightweight mobile component library with over 70 high‑quality components covering mainstream mobile scenarios; version 3.1 adds multi‑platform mini‑program adaptation, now supporting JD mini‑program development.
The JD mini‑program platform offers an open ecosystem with high‑quality users, billions of traffic, and rich channels, providing capabilities such as transactions, marketing, advertising, customer service, membership, payment, and logistics, and hosts over 17,000 applications.
NutUI, as JD’s open‑source mobile UI library, supports Vue and React, offers detailed documentation and examples, and enables rapid UI development, theme customization, and multi‑platform deployment via Taro, allowing a single codebase to run on H5, JD mini‑program, and WeChat mini‑program.
H5 vs. Mini‑Program Comparison
1. Use Cases & User Experience – H5 pages are accessed via links and suitable for simple, shareable scenarios, while mini‑programs provide native‑like experience, better for complex business logic, login, and payment flows.
2. Runtime Environment & System Permissions – H5 runs in browsers/WebView with limited permissions; mini‑programs run within the JD client, granting access to camera, location, recording, and other system features.
3. Development Experience – Mini‑program development has platform‑specific syntax and compatibility concerns, whereas H5 has broad compatibility; Taro bridges this gap, allowing Vue/React code to target both H5 and mini‑programs, and NutUI supports both environments.
Quick Start with NutUI for JD Mini‑Program
1. Install the Taro CLI:
npm install -g @tarojs/cli
2. Initialize a project using the Vue3‑NutUI template:
taro init nutui-jdmp
3. Start the JD mini‑program project:
npm run dev:jd
For any issues, reach out via the NutUI GitHub community, the JD developer group (82957939), or email [email protected] . Contributions and stars on the GitHub repository are welcomed.
Relevant links: NutUI GitHub – https://github.com/jdf2e/nutui; NutUI website – https://nutui.jd.com; JD Mini‑Program site – https://mp.jd.com.
JD Retail Technology
Official platform of JD Retail Technology, delivering insightful R&D news and a deep look into the lives and work of technologists.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.