tdesign miniprogram starter retail

TDesign retail industry template sample applet

The TDesign retail template sample applet is built using the TDesign enterprise-level design system applet solution and relies on the TDesign WeChat applet component library to cover complete basic retail scenario requirements.

? Preview

Please use WeChat to scan the following QR code:

? Project introduction

1. Business introduction

The retail industry template applet is a classic single-store e-commerce applet, covering the golden link process of e-commerce, from products -> shopping cart -> settlement -> orders, etc. The mini program contains a total of 28 complete pages, covering basic pages such as homepage, product details page, personal center, and after-sales process. Using mock data for display, it provides a complete retail product display, transaction and after-sales process. Page details:

Screenshots of the main pages are as follows:

2. Project composition

The retail industry template applet is built using basic JavaScript + WXSS + ESLint, which lowers the threshold for use.

The project directory structure is as follows:

 |-- tdesign-miniprogram-starter
    |-- README.md
    |-- app.js
    |-- app.json
    |-- app.wxss
    |-- components	//	公共组件库
    |-- config	//	基础配置
    |-- custom-tab-bar	//	自定义 tabbar
    |-- model	//	mock 数据
    |-- pages
    |   |-- cart	//	购物车相关页面
    |   |-- coupon	//	优惠券相关页面
    |   |-- goods	//	商品相关页面
    |   |-- home	//	首页
    |   |-- order	//	订单售后相关页面
    |   |-- promotion-detail	//	营销活动页面
    |   |-- usercenter	//	个人中心及收货地址相关页面
    |-- services	//	请求接口
    |-- style	//	公共样式与iconfont
    |-- utils	//	工具库

3. Data simulation

The retail mini program uses real interface data to simulate back-end return logic, and displays complete shopping scenarios and shopping experience logic in the mini program.

4. Add new page

1. Create the corresponding page folder in the pages directory
2. Add the page path to the "pages" array in the app.json file
3. [Optional] Add page configuration under "miniprogram-list" in the project.config.json file

? Build and run

1. npm install
2. Introducing projects into small program development tools
3. Build npm

? Code style control

eslint prettier

Base library version

Minimum base library version ^2.6.5

feedback

Enterprise WeChat Group TDesign team will promptly release versions and problem fix information in the enterprise WeChat group, and there will also be some discussions on the construction of component libraries. Welcome to scan the QR code on WeChat or Enterprise WeChat to join the group for communication:

Email: [email protected]

? TDesign other technology stack implementations

• Mobile mini program implementation: mobile-miniprogram
• Desktop Vue 2 implementation: web-vue
• Desktop Vue 3 implementation: web-vue-next
• Desktop React implementation: web-react

? Open source agreement

TDesign follows the MIT license.