小兔鮮兒-小程序采用 UniApp + Vue3 最新技術(shù)棧開發(fā)，涵蓋了微信登錄，微信支付，購物車管理，訂單管理等功能。

小兔鮮兒體系包含五個端：微信小程序端，H5 端，App 端，PC 端，管理后臺。

uni-app?開發(fā)的微信小程序端，通過條件編譯能兼容?H5 端?和?App 端。

二、開源協(xié)議

使用Apache-2.0開源協(xié)議

三、界面展示項目截圖

?

四、功能概述

微信小程序端：該項目包含了從首頁瀏覽商品，到商品詳情，微信登錄，加入購物車，提交訂單，微信支付，訂單管理等功能。

最新技術(shù)棧

基于 uni-app 多端開發(fā)框架，采用 Vue3 + TS + Pinia + UniUI 的最新組合開發(fā)，編碼符合 ESLint + Prettierrc + Git Hooks 團隊規(guī)范。

最佳的實踐

Vue3+TS 組合式 API 最佳實踐，開發(fā)主流微信小程序端并打包上線，同時兼容 H5 端，App 端。

最多的業(yè)務(wù)

涵蓋了猜你喜歡、熱門推薦、商品分類、商品詳情、微信登錄、用戶管理、地址管理、購物車管理、訂單管理等功能。包含微信登錄，微信支付等業(yè)務(wù)。

項目模塊

項目起步

首頁模塊

推薦模塊

分類模塊

詳情模塊

登錄模塊

用戶模塊

地址模塊

SKU 模塊

購物車模塊

訂單模塊

項目打包

來源：小兔鮮兒官方文檔

五、技術(shù)選型

項目架構(gòu)

技術(shù)棧

前端框架：uni-app (Vue3 + TS)

狀態(tài)管理：pinia

組件庫：uni-ui

開發(fā)環(huán)境

Windows 版本：Windows 11 家庭中文版

開發(fā)工具：VS Code 、 HbuilderX 、 微信開發(fā)者工具

Node 版本：v16.15.0

pnpm 版本：v8.6.10

運行程序

1、安裝依賴

# npm npm i --registry=https://registry.npmmirror.com # pnpm pnpm i --registry=https://registry.npmmirror.com

2、運行程序

# 微信小程序端 npm run dev:mp-weixin # H5端 npm run dev:h5 # App端 需 HbuilderX 工具，運行 - 運行到手機或模擬器

3、微信開發(fā)者工具導(dǎo)入?

├── .husky ? ? ? ? ? ? ? ? ? ? # Git Hooks├── .vscode ? ? ? ? ? ? ? ? ? ?# VS Code 插件 + 設(shè)置├── dist ? ? ? ? ? ? ? ? ? ? ? # 打包文件夾（可刪除重新打包├── src ? ? ? ? ? ? ? ? ? ? ? ?# 源代碼│ ? ├── components ? ? ? ? ? ? # 全局組件│ ? ├── composables ? ? ? ? ? ?# 組合式函數(shù)│ ? ├── pages ? ? ? ? ? ? ? ? ?# 主包頁面│ ? ? ? ├── index ? ? ? ? ? ? ? # 首頁│ ? ? ? ├── category ? ? ? ? ? ?# 分類頁│ ? ? ? ├── cart ? ? ? ? ? ? ? ?# 購物車│ ? ? ? ├── my ? ? ? ? ? ? ? ? ?# 我的│ ? ? ? ├── goods ? ? ? ? ? ? ? # 商品詳情│ ? ? ? └── hot ? ? ? ? ? ? ? ? # 熱門推薦│ ? ? ? └── login ? ? ? ? ? ? ? # 登錄頁│ ? ├── pagesMember ? ? ? ? ? ?# 分包頁面(用戶模塊)│ ? ? ? ├── address ? ? ? ? ? ? # 地址管理│ ? ? ? ├── address-form ? ? ? ?# 地址表單│ ? ? ? ├── profile ? ? ? ? ? ? # 用戶信息│ ? ? ? └── settings ? ? ? ? ? ?# 用戶設(shè)置│ ? ├── pagesOrder ? ? ? ? ? ? # 分包頁面(訂單模塊)│ ? ? ? ├── create ? ? ? ? ? ? ?# 創(chuàng)建訂單│ ? ? ? ├── detail ? ? ? ? ? ? ?# 訂單詳情│ ? ? ? ├── list ? ? ? ? ? ? ? ?# 訂單列表│ ? ? ? └── payment ? ? ? ? ? ? # 支付結(jié)果│ ? ├── services ? ? ? ? ? ? ? # 所有請求│ ? ├── static ? ? ? ? ? ? ? ? # 存放應(yīng)用引用的本地靜態(tài)資源的目錄│ ? ? ? ├── images ? ? ? ? ? ? ?# 普通圖片│ ? ? ? └── tabs ? ? ? ? ? ? ? ?# tabBar 圖片│ ? ├── stores ? ? ? ? ? ? ? ? # 全局 pinia store│ ? ? ? ├── modules ? ? ? ? ? ? # 模塊│ ? ? ? └── index.ts ? ? ? ? ? ?# store 入口│ ? ├── styles ? ? ? ? ? ? ? ? # 全局樣式│ ? ? ? └── fonts.scss ? ? ? ? ?# 字體圖標(biāo)│ ? ├── types ? ? ? ? ? ? ? ? ?# 類型聲明文件│ ? ├── utils ? ? ? ? ? ? ? ? ?# 全局方法│ ? ├── App.vue ? ? ? ? ? ? ? ?# 入口頁面│ ? ├── main.ts ? ? ? ? ? ? ? ?# Vue初始化入口文件│ ? ├── pages.json ? ? ? ? ? ? # 配置頁面路由等頁面類信息│ ? ├── manifest.json ? ? ? ? ?# 配置appid等打包信息│ ? └── uni.scss ? ? ? ? ? ? ? # uni-app 內(nèi)置的常用樣式變量├── .eslintrc.cjs ? ? ? ? ? ? ?# eslint 配置├── .prettierrc.json ? ? ? ? ? # prettier 配置├── .gitignore ? ? ? ? ? ? ? ? # git 忽略文件├── index.html ? ? ? ? ? ? ? ? # H5 端首頁├── package.json ? ? ? ? ? ? ? # package.json 依賴├── tsconfig.json ? ? ? ? ? ? ?# typescript 配置└── vite.config.ts ? ? ? ? ? ? # vite 配置

六、源碼地址

https://gitee.com/Megasu/uniapp-shop-vue3-ts?url=jjbxz.cn

[超站]友情鏈接：

四季很好，只要有你，文娛排行榜：https://www.yaopaiming.com/
關(guān)注數(shù)據(jù)與安全，洞悉企業(yè)級服務(wù)市場：https://www.ijiandao.com/