小兔鲜儿微信小程序技术文档

1. 安装指南

1.1 环境准备

系统要求：

• Windows 11 家庭中文版或 MacOS 15.0 及以上版本

开发工具：

• VS Code (推荐安装Volar插件)
• HbuilderX (用于App端开发)
• 微信开发者工具(小程序端必备)

运行环境：

• Node.js v16.15.0 或 v22.15.0
• pnpm v8.6.10 或 v9.15.3

1.2 项目克隆

git clone https://gitcode.com/Megasu/uniapp-shop-vue3-ts.git
cd uniapp-shop-vue3-ts

1.3 依赖安装

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

# 或使用pnpm
pnpm i --registry=https://registry.npmmirror.com

2. 项目使用说明

2.1 运行项目

微信小程序端：

npm run dev:mp-weixin

运行后，使用微信开发者工具导入/dist/dev/mp-weixin目录

H5端：

npm run dev:h5

App端： 需使用HbuilderX工具，选择"运行-运行到手机或模拟器"

2.2 项目结构说明

src/
├── components/       # 全局公共组件
├── composables/      # 组合式函数
├── pages/            # 主包页面(首页/分类/购物车等)
├── pagesMember/      # 用户模块分包
├── pagesOrder/       # 订单模块分包
├── services/         # API请求封装
├── stores/           # Pinia状态管理
├── utils/            # 工具函数
└── types/            # TypeScript类型定义

3. API使用文档

3.1 请求基础配置

所有API请求需在header中添加：

headers: {
  'source-client': 'miniapp' // 标识小程序端
}

3.2 主要API模块

首页模块：

• 获取广告区域: GET /home/banner
• 获取前台分类: GET /home/category/mutli
• 获取热门推荐: GET /home/hot/mutli

商品模块：

• 商品搜索: POST /goods/search
• 商品详情: GET /goods/:id
• 同类推荐: GET /goods/:id/relevant

用户模块：

• 小程序登录: POST /login/wxMin
• 获取用户信息: GET /member/profile
• 修改用户信息: PUT /member/profile

订单模块：

• 创建订单: POST /member/order
• 订单列表: GET /member/order
• 订单详情: GET /member/order/:id

3.3 请求示例

import { http } from '@/utils/http'

// 获取首页轮播图
export const getHomeBannerAPI = () => {
  return http<BannerItem[]>({
    method: 'GET',
    url: '/home/banner'
  })
}

4. 项目安装方式

4.1 开发环境安装

1. 安装Node.js (推荐使用nvm管理多版本)
2. 安装pnpm包管理器:

npm install -g pnpm

4.2 项目配置

1. 复制.env.example文件为.env并配置环境变量
2. 修改manifest.json中的微信小程序appid
3. 配置vite.config.ts中的代理设置(如需)

4.3 生产构建

小程序端：

npm run build:mp-weixin

H5端：

npm run build:h5

App端： 需使用HbuilderX进行云端打包

4.4 常见问题解决

1. 依赖安装失败：切换npm镜像源或使用pnpm
2. 小程序编译错误：检查微信开发者工具版本
3. 类型错误：确保VS Code已安装Volar插件并启用Take Over模式