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

2026-02-04 04:07:41作者：韦蓉瑛

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'
  })
}