<p align="center">
<a href="https://tdesign.tencent.com/" target="_blank">
<img alt="TDesign Logo" width="200" src="https://tdesign.gtimg.com/site/TDesign.png">
</a>
</p>
<p align="center">
<a href="https://img.shields.io/github/stars/Tencent/tdesign-miniprogram-starter-retail">
<img src="https://img.shields.io/github/stars/Tencent/tdesign-miniprogram-starter-retail" alt="License">
</a>
<a href="https://github.com/Tencent/tdesign-miniprogram-starter-retail/issues">
<img src="https://img.shields.io/github/issues/Tencent/tdesign-miniprogram-starter-retail" alt="License">
</a>
<a href="https://github.com/Tencent/tdesign-miniprogram-starter-retail/LICENSE">
<img src="https://img.shields.io/github/license/Tencent/tdesign-miniprogram-starter-retail" alt="License">
</a>
<a href="https://www.npmjs.com/package/tdesign-miniprogram">
<img src="https://img.shields.io/npm/v/tdesign-miniprogram.svg?sanitize=true" alt="Version">
</a>
<a href="https://www.npmjs.com/package/tdesign-miniprogram">
<img src="https://img.shields.io/npm/dw/tdesign-miniprogram" alt="Downloads">
</a>
</p>
# TDesign 零售行业模版示例小程序
TDesign 零售模版示例小程序采用 [TDesign 企业级设计体系小程序解决方案](https://tdesign.tencent.com/miniprogram/overview) 进行搭建,依赖 [TDesign 微信小程序组件库](https://github.com/Tencent/tdesign-miniprogram),涵盖完整的基本零售场景需求。
## :high_brightness: 预览
<p>请使用微信扫描以下二维码:</p>
<img src="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-mp/common/qrcode.jpeg" width = "200" height = "200" alt="模版小程序二维码" align=center />
## :pushpin: 项目介绍
### 1. 业务介绍
零售行业模版小程序是个经典的单店版电商小程序,涵盖了电商的黄金链路流程,从商品->购物车->结算->订单等。小程序总共包含 28 个完整的页面,涵盖首页,商品详情页,个人中心,售后流程等基础页面。采用 mock 数据进行展示,提供了完整的零售商品展示、交易与售后流程。页面详情:
<img src="https://cdn-we-retail.ym.tencent.com/tsr/tdesign-starter-readmeV1.png" width = "650" height = "900" alt="模版小程序页面详情" align=center />
主要页面截图如下:
<p align="center">
<img alt="example-home" width="200" src="https://cdn-we-retail.ym.tencent.com/tsr/example/v1/home.png" />
<img alt="example-sort" width="200" src="https://cdn-we-retail.ym.tencent.com/tsr/example/v2/sort.png" />
<img alt="example-cart" width="200" src="https://cdn-we-retail.ym.tencent.com/tsr/example/v1/cart.png" />
<img alt="example-user-center" width="200" src="https://cdn-we-retail.ym.tencent.com/tsr/example/v1/user-center.png" />
<img alt="example-goods-detail" width="200" src="https://cdn-we-retail.ym.tencent.com/tsr/example/v1/goods-detail.png" />
<img alt="example-pay" width="200" src="https://cdn-we-retail.ym.tencent.com/tsr/example/v1/pay.png" />
<img alt="example-order" width="200" src="https://cdn-we-retail.ym.tencent.com/tsr/example/v1/order.png" />
<img alt="example-order-detail" width="200" src="https://cdn-we-retail.ym.tencent.com/tsr/example/v2/order.png" />
</p>
### 2. 项目构成
零售行业模版小程序采用基础的 JavaScript + WXSS + ESLint 进行构建,降低了使用门槛。
项目目录结构如下:
```
|-- 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. 数据模拟
零售小程序采用真实的接口数据,模拟后端返回逻辑,在小程序展示完整的购物场景与购物体验逻辑。
### 4. 添加新页面
1. 在 `pages `目录下创建对应的页面文件夹
2. 在 `app.json` 文件中的 ` "pages"` 数组中加上页面路径
3. [可选] 在 `project.config.json` 文件的 `"miniprogram-list"` 下添加页面配置
## :hammer: 构建运行
1. `npm install`
2. 小程序开发工具中引入工程
3. 构建 npm
## :art: 代码风格控制
`eslint` `prettier`
## :iphone: 基础库版本
最低基础库版本`^2.6.5`
## :dart: 反馈&合作
本开源项目是由[腾讯云Mall团队](https://ym.qq.com/)核心贡献。项目也在[github](https://github.com/Tencent/tdesign-miniprogram-starter-retail)上做了开源,有任何问题或者建议都欢迎在issue上留言反馈, 或者加入TD小程序开发者群进行反馈:star2::star2::star2:
<img src="https://cdn.qa.ym.qq.com/officical-site/assets/logo.png?auto=format&fit=max&w=384" width = "100" height = "30" alt="模版小程序页面详情" align=center />
[云Mall](https://ym.qq.com/)是基于微信小程序的电商SaaS产品,致力于提供全面、可靠的小程序商城经营服务,助力商家成功。支持标准化和定开类型商家入驻。
企业微信群
TDesign 团队会及时在企业微信大群中同步发布版本、问题修复信息,也会有一些关于组件库建设的讨论,欢迎微信或企业微信扫码入群交流:
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/TDesign%20IM.png" width = "200" height = "200" alt="模版小程序页面详情" align=center />
邮件联系:[email protected]
## :link: TDesign 其他技术栈实现
- 移动端 小程序 实现:[mobile-miniprogram](https://github.com/Tencent/tdesign-miniprogram)
- 桌面端 Vue 2 实现:[web-vue](https://github.com/Tencent/tdesign-vue)
- 桌面端 Vue 3 实现:[web-vue-next](https://github.com/Tencent/tdesign-vue-next)
- 桌面端 React 实现:[web-react](https://github.com/Tencent/tdesign-react)
## :page_with_curl: 开源协议
TDesign 遵循 [MIT 协议](https://github.com/Tencent/tdesign-miniprogram-starter-retail/LICENSE)。
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
【项目资源】: 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】: 所有源码都经过严格测试,可以直接运行。 功能在确认正常工作后才上传。 【适用人群】: 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】: 项目具有较高的学习借鉴价值,也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】: 有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 鼓励下载和使用,并欢迎大家互相学习,共同进步。
资源推荐
资源详情
资源评论
收起资源包目录
基于Tdesign电商模版的微信小程序.zip (414个子文件)
commit-msg 91B
._.DS_Store 120B
._.DS_Store 120B
._.DS_Store 120B
._.DS_Store 120B
._.DS_Store 120B
._.DS_Store 120B
._.DS_Store 120B
._.DS_Store 120B
.gitignore 241B
WechatIMG5.jpeg 1.97MB
WechatIMG9.jpeg 796KB
WechatIMG1451.jpeg 450KB
WechatIMG1452.jpeg 212KB
WechatIMG162.jpeg 76KB
WechatIMG161.jpeg 51KB
WechatIMG1461.jpeg 31KB
WechatIMG1469.jpeg 24KB
images.jpeg 2KB
index.js 445KB
api.js 41KB
orderDetail.js 34KB
orderList.js 32KB
good.js 24KB
index.js 16KB
index.js 12KB
comments.js 12KB
index.js 11KB
cart.js 11KB
index.js 9KB
index.js 9KB
index.js 9KB
index.js 8KB
applyService.js 7KB
index.js 6KB
category.js 6KB
index.js 6KB
index.js 6KB
index.js 6KB
index.js 6KB
index.js 6KB
index.js 5KB
index.js 5KB
index.js 5KB
index.js 5KB
index.js 5KB
index.js 5KB
index.js 5KB
index.js 4KB
selectCoupons.js 4KB
.eslintrc.js 4KB
orderConfirm.js 4KB
pay.js 4KB
index.js 4KB
util.js 3KB
index.js 3KB
index.js 3KB
index.js 3KB
index.js 3KB
config.js 3KB
home.js 3KB
index.js 2KB
index.js 2KB
index.js 2KB
eslintCheck.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
applyService.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
orderConfirm.js 1KB
index.js 1KB
index.js 1KB
noGoods.js 1KB
submitComment.js 1KB
queryDetail.js 1KB
index.js 1KB
index.js 1KB
api.js 1KB
getPermission.js 1KB
fetchAddress.js 1KB
index.js 1KB
index.js 1KB
index.js 1KB
index.js 1KB
index.js 1KB
index.js 1KB
index.js 1KB
fetchGoodsDetailsComments.js 1KB
coupon.js 1KB
search.js 1KB
index.js 1KB
index.js 1024B
fetchGoodsList.js 978B
orderDetail.js 972B
共 414 条
- 1
- 2
- 3
- 4
- 5
资源评论
妄北y
- 粉丝: 1w+
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于opencv+yolov8实现目标追踪及驻留时长统计源码.zip
- 水稻病害基于Yolov8算法优化目标检测识别与AI辅助决策python源码+模型+使用说明.zip
- 海尔618算价表_七海5.20_16.00xlsx(1)(2).xlsx
- WebCrawler.scr
- 【计算机专业毕业设计】大学生就业信息管理系统设计源码.zip
- YOLO 数据集:8种路面缺陷病害检测【包含划分好的数据集、类别class文件、数据可视化脚本】
- JAVA实现Modbus RTU或Modbus TCPIP案例.zip
- 基于YOLOv8的FPS TPS AI自动锁定源码+使用步骤说明.zip
- JAVA实现Modbus RTU或Modbus TCPIP案例.zip
- 基于yolov8+streamlit的火灾检测部署源码+模型.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功