tdesign miniprogram starter retail

TDesign 零售業模版範例小程序

TDesign 零售模版範例小程式採用TDesign 企業級設計體系小程式解決方案進行搭建，依賴TDesign 微信小程式元件庫，涵蓋完整的基本零售場景需求。

?預覽

請使用微信掃描以下二維碼：

? 項目介紹

1. 業務介紹

零售業模版小程序是個經典的單店版電商小程序，涵蓋了電商的黃金鏈路流程，從商品->購物車->結算->訂單等。小程式總共包含28 個完整的頁面，涵蓋首頁，商品詳情頁，個人中心，售後流程等基礎頁面。採用mock 資料進行展示，提供了完整的零售商品展示、交易與售後流程。頁面詳情：

主要頁面截圖如下：

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"下新增頁面配置

? 建置運行

1. npm install
2. 小程式開發工具中引進工程
3. 建構npm

?程式碼風格控制

eslint prettier

基礎庫版本

最低基礎庫版本^2.6.5

回饋

企業微信群TDesign 團隊會及時在企業微信大群中同步發布版本、問題修復訊息，也會有一些關於元件庫建置的討論，歡迎微信或企業微信掃碼入群交流：

電子郵件聯絡：[email protected]

? TDesign 其他技術堆疊實現

• 行動端小程式實作：mobile-miniprogram
• 桌面端Vue 2 實作：web-vue
• 桌面端Vue 3 實作：web-vue-next
• 桌面端React 實作：web-react

? 開源協議

TDesign 遵循MIT 協議。