{"id":19965596,"url":"https://github.com/tencent/tdesign-miniprogram-starter-retail","last_synced_at":"2025-10-08T12:47:57.001Z","repository":{"id":37042536,"uuid":"475860324","full_name":"Tencent/tdesign-miniprogram-starter-retail","owner":"Tencent","description":"TDesign - 微信小程序 - 零售行业模板","archived":false,"fork":false,"pushed_at":"2025-03-01T02:26:44.000Z","size":3053,"stargazers_count":687,"open_issues_count":7,"forks_count":169,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-03-28T10:04:22.216Z","etag":null,"topics":["miniprogram","retail","tdesign","template","tencent","wechat"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tencent.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-30T12:05:01.000Z","updated_at":"2025-03-26T04:45:02.000Z","dependencies_parsed_at":"2025-01-26T03:01:19.493Z","dependency_job_id":"6856cf69-2d44-4665-a9c8-db5678820525","html_url":"https://github.com/Tencent/tdesign-miniprogram-starter-retail","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Ftdesign-miniprogram-starter-retail","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Ftdesign-miniprogram-starter-retail/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Ftdesign-miniprogram-starter-retail/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Ftdesign-miniprogram-starter-retail/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tencent","download_url":"https://codeload.github.com/Tencent/tdesign-miniprogram-starter-retail/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247166157,"owners_count":20894652,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["miniprogram","retail","tdesign","template","tencent","wechat"],"created_at":"2024-11-13T02:29:42.343Z","updated_at":"2025-10-08T12:47:56.996Z","avatar_url":"https://github.com/Tencent.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://tdesign.tencent.com/\" target=\"_blank\"\u003e\n    \u003cimg alt=\"TDesign Logo\" width=\"200\" src=\"https://tdesign.gtimg.com/site/TDesign.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://img.shields.io/github/stars/Tencent/tdesign-miniprogram-starter-retail\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/Tencent/tdesign-miniprogram-starter-retail\" alt=\"License\"\u003e\n  \u003c/a\u003e  \n  \u003ca href=\"https://github.com/Tencent/tdesign-miniprogram-starter-retail/issues\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/issues/Tencent/tdesign-miniprogram-starter-retail\" alt=\"License\"\u003e\n  \u003c/a\u003e  \n  \u003ca href=\"https://github.com/Tencent/tdesign-miniprogram-starter-retail/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/Tencent/tdesign-miniprogram-starter-retail\" alt=\"License\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/tdesign-miniprogram\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/tdesign-miniprogram.svg?sanitize=true\" alt=\"Version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/tdesign-miniprogram\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dw/tdesign-miniprogram\" alt=\"Downloads\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# TDesign 零售行业模版示例小程序\n\nTDesign 零售模版示例小程序采用 [TDesign 企业级设计体系小程序解决方案](https://tdesign.tencent.com/miniprogram/overview) 进行搭建，依赖 [TDesign 微信小程序组件库](https://github.com/Tencent/tdesign-miniprogram)，涵盖完整的基本零售场景需求。\n\n## :high_brightness: 预览\n\n\u003cp\u003e请使用微信扫描以下二维码：\u003c/p\u003e\n\n \u003cimg src=\"https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-mp/common/qrcode.jpeg\" width = \"200\" height = \"200\" alt=\"模版小程序二维码\" align=center /\u003e\n\n## :pushpin: 项目介绍\n\n### 1. 业务介绍\n\n零售行业模版小程序是个经典的单店版电商小程序，涵盖了电商的黄金链路流程，从商品-\u003e购物车-\u003e结算-\u003e订单等。小程序总共包含 28 个完整的页面，涵盖首页，商品详情页，个人中心，售后流程等基础页面。采用 mock 数据进行展示，提供了完整的零售商品展示、交易与售后流程。页面详情：\n\n\u003cimg src=\"https://tdesign.gtimg.com/miniprogram/template/retail/tdesign-starter-readmeV1.png\" width = \"650\" height = \"900\" alt=\"模版小程序页面详情\" align=center /\u003e\n\n主要页面截图如下：\n\n\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"example-home\" width=\"200\" src=\"https://tdesign.gtimg.com/miniprogram/template/retail/example/v1/home.png\" /\u003e\n    \u003cimg alt=\"example-sort\" width=\"200\" src=\"https://tdesign.gtimg.com/miniprogram/template/retail/example/v2/sort.png\" /\u003e\n    \u003cimg alt=\"example-cart\" width=\"200\" src=\"https://tdesign.gtimg.com/miniprogram/template/retail/example/v1/cart.png\" /\u003e\n    \u003cimg alt=\"example-user-center\" width=\"200\" src=\"https://tdesign.gtimg.com/miniprogram/template/retail/example/v1/user-center.png\" /\u003e\n    \u003cimg alt=\"example-goods-detail\" width=\"200\" src=\"https://tdesign.gtimg.com/miniprogram/template/retail/example/v1/goods-detail.png\" /\u003e\n    \u003cimg alt=\"example-pay\" width=\"200\" src=\"https://tdesign.gtimg.com/miniprogram/template/retail/example/v1/pay.png\" /\u003e\n    \u003cimg alt=\"example-order\" width=\"200\" src=\"https://tdesign.gtimg.com/miniprogram/template/retail/example/v1/order.png\" /\u003e\n    \u003cimg alt=\"example-order-detail\" width=\"200\" src=\"https://tdesign.gtimg.com/miniprogram/template/retail/example/v2/order.png\" /\u003e\n\u003c/p\u003e\n\n### 2. 项目构成\n\n零售行业模版小程序采用基础的 JavaScript + WXSS + ESLint 进行构建，降低了使用门槛。\n\n项目目录结构如下：\n\n```\n|-- tdesign-miniprogram-starter\n    |-- README.md\n    |-- app.js\n    |-- app.json\n    |-- app.wxss\n    |-- components\t//\t公共组件库\n    |-- config\t//\t基础配置\n    |-- custom-tab-bar\t//\t自定义 tabbar\n    |-- model\t//\tmock 数据\n    |-- pages\n    |   |-- cart\t//\t购物车相关页面\n    |   |-- coupon\t//\t优惠券相关页面\n    |   |-- goods\t//\t商品相关页面\n    |   |-- home\t//\t首页\n    |   |-- order\t//\t订单售后相关页面\n    |   |-- promotion-detail\t//\t营销活动页面\n    |   |-- usercenter\t//\t个人中心及收货地址相关页面\n    |-- services\t//\t请求接口\n    |-- style\t//\t公共样式与iconfont\n    |-- utils\t//\t工具库\n```\n\n### 3. 数据模拟\n\n零售小程序采用真实的接口数据，模拟后端返回逻辑，在小程序展示完整的购物场景与购物体验逻辑。\n\n### 4. 添加新页面\n\n1. 在 `pages `目录下创建对应的页面文件夹\n2. 在 `app.json` 文件中的 ` \"pages\"` 数组中加上页面路径\n3. [可选] 在 `project.config.json` 文件的 `\"miniprogram-list\"` 下添加页面配置\n\n## :hammer: 构建运行\n\n1. `npm install`\n2. 小程序开发工具中引入工程\n3. 构建 npm\n\n## :art: 代码风格控制\n\n`eslint` `prettier`\n\n## :iphone: 基础库版本\n\n最低基础库版本`^2.6.5`\n\n## :dart: 反馈\n\n企业微信群\nTDesign 团队会及时在企业微信大群中同步发布版本、问题修复信息，也会有一些关于组件库建设的讨论，欢迎微信或企业微信扫码入群交流：\n\n\u003cimg src=\"https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/TDesign%20IM.png\" width = \"200\" height = \"200\" alt=\"模版小程序页面详情\" align=center /\u003e\n\n邮件联系：tdesign@tencent.com\n\n## :link: TDesign 其他技术栈实现\n\n- 移动端 小程序 实现：[mobile-miniprogram](https://github.com/Tencent/tdesign-miniprogram)\n- 桌面端 Vue 2 实现：[web-vue](https://github.com/Tencent/tdesign-vue)\n- 桌面端 Vue 3 实现：[web-vue-next](https://github.com/Tencent/tdesign-vue-next)\n- 桌面端 React 实现：[web-react](https://github.com/Tencent/tdesign-react)\n\n## :page_with_curl: 开源协议\n\nTDesign 遵循 [MIT 协议](https://github.com/Tencent/tdesign-miniprogram-starter-retail/LICENSE)。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencent%2Ftdesign-miniprogram-starter-retail","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftencent%2Ftdesign-miniprogram-starter-retail","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencent%2Ftdesign-miniprogram-starter-retail/lists"}