# TDesign retail starter: a 28-page WeChat mini program you can read in an afternoon > Tencent's TDesign retail starter is a single-store e-commerce mini program for WeChat, built with plain JavaScript and WXSS on top of the TDesign component library, and it covers the whole shopping path from product to cart to checkout to order to after-sales with mock data. It is a reference implementation to copy structure from rather than a product to deploy. **Tencent/tdesign-miniprogram-starter-retail** — TDesign - 微信小程序 - 零售行业模板 - Repository: https://github.com/Tencent/tdesign-miniprogram-starter-retail - Stars: 869 · Forks: 215 - Language: JavaScript - License: MIT - Published: 2026-10-20 · Updated: 2026-10-20 · Language: en - Canonical page: https://hysenlabs.com/projects/tencent-tdesign-miniprogram-starter-retail ## A single-store shop with the whole golden path The project is a classic single-store e-commerce mini program, and the README describes it as covering the golden path of e-commerce from product to cart to checkout to order. There are 28 complete pages in total, including the home page, product detail pages, the user center and the after-sales flow. The data is mock data, and the point is that it presents a complete retail product display, transaction and after-sales flow so you can see the shape of the whole thing rather than one screen. That framing matters because the alternative to a template like this is not writing the pages, it is inventing the navigation between them, and the navigation is where the design decisions live. ## The design system is the dependency The starter is built on the TDesign enterprise design system mini program solution and depends on the TDesign WeChat mini program component library. The npm dependency is pinned to a specific version of tdesign-miniprogram, 1.9.5, alongside dayjs for date handling and tslib. So most of the visual work is done by the library rather than by the template, and the template's job is to show how the pieces fit together. The screenshots the README presents, of the home, sort, cart, user center, goods detail, payment, order and order detail pages, are therefore a catalogue of the component library in a retail context as much as a catalogue of the template. ## Why it is JavaScript and WXSS rather than TypeScript The README states the project is built with basic JavaScript, WXSS and ESLint, and gives the reason: to lower the barrier to using it. That is a deliberate trade-off and it cuts both ways. On the side in favour, anyone who has written a mini program can read the whole project without learning a build-time type pipeline, and there is no compile step between editing a file and seeing the result. Against it, the package manifest carries an ESLint 6, Prettier 2 and a commitizen conventional changelog setup, which are tools from an earlier era, and the lint-staged configuration lists both js and ts file patterns even though the project has no TypeScript sources. The project is meant to be read and adapted by a broad audience of mini program developers, not to be a reference for a typed stack. ## How the directory structure is organised The README prints the tree, and it is worth reading because it shows where you will work. The root holds the standard mini program entry files, app.js, app.json and app.wxss. The pages directory is split by domain rather than by screen, with subdirectories for cart, coupon, goods, home, order, promotion-detail and usercenter. That grouping is the useful part, because adding a page means choosing a domain folder rather than inventing a new one. Alongside the pages sit the components directory for the shared component library, config for base configuration, custom-tab-bar for a custom tab bar, model for the mock data, services for the request interfaces, style for shared styles and icon fonts, and utils for the utility library. So the boundaries between presentation, data and transport are already drawn. ## Adding a page is three steps The README documents how to add a new page, and the steps are short enough to state exactly. Create the matching page folder under the pages directory. Add the page path to the pages array in app.json. Optionally add the page configuration under the miniprogram-list entry in project.config.json. The third step being optional is the detail worth knowing, because it means the minimum path to a working page is the first two, and project.config.json is where you configure how the mini program developer tool treats individual pages. The pages array in app.json is what determines the page order and the entry point of the application, so that is the file that has to be correct for the new page to be reachable. ## Building and running it in the WeChat developer tool The build and run instructions are three steps: install the npm dependencies, import the project into the mini program developer tool, and build the npm. ```bash npm install ``` The npm step exists because the TDesign component library is delivered as an npm package, and the developer tool needs to build it into the format the mini program runtime consumes. The minimum base library version is ^2.6.5, which is the floor for the client runtime the project targets. On code style there are two tools, ESLint and Prettier, and the package manifest wires them into the commit hooks through husky with a prepare script that installs the hooks, plus a lint-staged configuration that runs ESLint on js and ts files and Prettier on the wider set of wxml, html, json, css and less files. ## Where the data seam is, and what that means for you The README says the retail mini program uses real interface data and simulates the backend response logic, so that the mini program presents a complete shopping scenario and shopping experience logic. That is the seam you care about when you adopt it. The services directory holds the request interfaces and the model directory holds the mock data, so the transport layer is already isolated from the pages, and replacing mock responses with a real backend is a change to one directory rather than to twenty-eight pages. The repository also carries a mock.md at the root describing the mock setup, and a common directory that sits alongside the components directory, which suggests shared request helpers live outside the component library. ## Where this starter is the wrong choice Four limits apply. It is a single-store template, so a multi-tenant or multi-merchant model is not what it demonstrates. It is WeChat only, with no equivalent for the other mini program platforms, though the README points at sibling TDesign implementations for Vue 2, Vue 3 and React on the desktop. The library versions are old, with ESLint 6 and Prettier 2, so the tooling will not match a current project without an upgrade. And the licence field on the repository carries no standard identifier while the package manifest records ISC and the README points at the MIT licence of the TDesign project itself, so which terms cover which part of this repository is worth confirming before you ship it in a commercial product. ## Conclusion Use this starter when you are building a WeChat mini program for a retail business and want a working page structure, a design system already applied and the whole customer journey wired together before you write any product code. Do not deploy it as is, because every screen is backed by mock data and the service layer is a seam rather than a backend. Verify first that your WeChat base library version is at least ^2.6.5, that you are willing to work in plain JavaScript and WXSS rather than TypeScript, since the project was built that way to lower the barrier to adoption, and that the components directory is where you will spend most of your time, since the pages themselves are mostly layout and the library underneath does the design work. ## FAQ ### What does the TDesign retail starter contain? A WeChat mini program with 28 complete pages covering the classic single-store e-commerce path from product to cart to checkout to order, including the home page, product details, the user center and the after-sales flow, displayed with mock data. ### What is the TDesign retail starter built with? Basic JavaScript, WXSS and ESLint, chosen to lower the barrier to adoption, on top of the TDesign WeChat mini program component library, which the package manifest pins to version 1.9.5. ### How do I add a new page to the TDesign retail starter? Create the page folder under the pages directory, add the page path to the pages array in app.json, and optionally add the page configuration under the miniprogram-list entry in project.config.json. ### How do I build and run the project? Run npm install, import the project into the mini program developer tool, and build the npm there. The minimum base library version the project targets is ^2.6.5. ### Where does the mock data live in the TDesign retail starter? The model directory holds the mock data and the services directory holds the request interfaces, with the transport layer isolated from the pages. There is also a mock.md document at the repository root describing the mock setup. ## Sources - [Issues](https://github.com/Tencent/tdesign-miniprogram-starter-retail/issues) - [License: MIT](https://github.com/Tencent/tdesign-miniprogram-starter-retail/blob/main/LICENSE) - [README](https://github.com/Tencent/tdesign-miniprogram-starter-retail/blob/main/README.md) - [Tencent/tdesign-miniprogram-starter-retail on GitHub](https://github.com/Tencent/tdesign-miniprogram-starter-retail) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/tencent-tdesign-miniprogram-starter-retail