图书商城小程序

项目简介

这是一个图书电商购物的微信小程序，采用纯前端实现，使用本地Mock数据模拟后端接口。项目完整实现了图书浏览、分类筛选、搜索查询、购物车管理、订单管理、用户信息管理等核心电商功能，适合作为微信小程序开发学习项目或计算机设计参考。

技术栈

技术	版本/说明
开发框架	微信小程序原生框架
基础库版本	v2 (最新稳定版)
开发语言	JavaScript (ES6+)
样式语言	WXSS (微信小程序样式)
模板语言	WXML (微信小程序模板)
数据存储	本地Storage持久化
数据模拟	Mock Data (本地模拟数据)
组件框架	glass-easel

项目特点

• 纯前端实现：无需后端服务器，所有数据使用本地Mock模拟
• 数据持久化：图书、购物车、订单数据使用 wx.setStorageSync 本地存储，关闭小程序后数据不丢失
• 完整电商流程：涵盖图书浏览、分类筛选、搜索、购物车、下单结算等完整购物流程
• UI设计简洁：界面风格清新简约，蓝色主题配色，符合图书类应用调性
• 库存管理：支持图书库存实时扣减和校验

功能模块

1. 首页模块 (pages/index)

• 轮播图展示精选图书和活动
• 热门图书推荐列表
• 搜索入口
• 图书封面、书名、作者、价格展示
• 点击图书进入详情页

2. 分类模块 (pages/category)

• 左侧分类导航栏（文学、科幻、历史、计算机、儿童、艺术）
• 右侧分类图书列表
• 图书封面、书名、作者、价格展示
• 支持分类切换筛选
• 点击进入图书详情

3. 搜索模块 (pages/search)

• 关键词搜索图书
• 搜索结果列表展示
• 支持按书名、作者搜索
• 无结果提示
• 点击进入图书详情

4. 图书详情模块 (pages/productDetail)

• 图书封面大图展示
• 图书名称、作者、价格
• 出版社、出版日期、ISBN信息
• 图书详细介绍
• 库存数量显示
• 加入购物车功能
• 立即购买功能

5. 购物车模块 (pages/cart)

• 购物车商品列表展示
• 图书封面、书名、作者、价格
• 商品数量增减
• 单选/全选功能
• 合计金额实时计算
• 移除商品功能
• 结算下单功能

6. 订单列表模块 (pages/orderList)

• 历史订单列表展示
• 订单编号、时间、金额
• 订单状态展示（待支付/已支付/已取消/已完成）
• 点击进入订单详情

7. 订单详情模块 (pages/orderDetail)

• 订单完整信息展示
• 订单编号、下单时间
• 购买图书明细
• 订单总金额
• 订单状态
• 模拟支付功能

8. 我的模块 (pages/my)

• 用户头像、昵称展示
• 我的订单入口
• 个人信息设置入口
• 关于我们入口

9. 个人信息模块 (pages/userInfo)

• 修改头像
• 修改昵称
• 修改手机号
• 修改地址
• 保存个人信息

项目结构

book-mall-pure-mini-program/
├── app.js                    # 小程序入口文件，初始化Mock数据
├── app.json                  # 小程序全局配置（页面路由、TabBar、窗口样式）
├── app.wxss                  # 全局样式文件
├── project.config.json       # 项目配置文件
├── project.private.config.json # 项目私有配置
├── sitemap.json              # 小程序索引配置
├── images/                   # 图片资源目录
│   ├── tabbar/               # TabBar图标
│   │   ├── home.png          # 首页图标
│   │   ├── home_selected.png # 首页选中图标
│   │   ├── category.png      # 分类图标
│   │   ├── category_selected.png # 分类选中图标
│   │   ├── cart.png          # 购物车图标
│   │   ├── cart_selected.png # 购物车选中图标
│   │   ├── profile.png       # 我的图标
│   │   └── profile_selected.png # 我的选中图标
│   ├── banner/               # 轮播图
│   │   ├── banner-1.jpg
│   │   ├── banner-2.jpg
│   │   ├── banner-3.jpg
│   │   └── banner-4.jpg
│   ├── book/                 # 图书封面图
│   │   ├── 边城.jpg
│   │   ├── 北斗地理百科全书.jpg
│   │   ├── 骆驼祥子.jpg
│   │   ├── 三国演义.jpg
│   │   ├── C++零基础程序设计.jpg
│   │   └── 叮当响的大街.jpg
│   ├── default_avatar.png    # 默认头像
│   ├── empty-cart.png        # 空购物车图
│   ├── no-search-result.png  # 无搜索结果图
│   ├── order.png             # 订单图标
│   └── about.png             # 关于图标
├── pages/                    # 页面目录
│   ├── index/                # 首页
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── category/             # 分类页
│   │   ├── category.js
│   │   ├── category.json
│   │   ├── category.wxml
│   │   └── category.wxss
│   ├── search/               # 搜索页
│   │   ├── search.js
│   │   ├── search.json
│   │   ├── search.wxml
│   │   └── search.wxss
│   ├── productDetail/        # 图书详情页
│   │   ├── productDetail.js
│   │   ├── productDetail.json
│   │   ├── productDetail.wxml
│   │   └── productDetail.wxss
│   ├── cart/                 # 购物车页
│   │   ├── cart.js
│   │   ├── cart.json
│   │   ├── cart.wxml
│   │   └── cart.wxss
│   ├── orderList/            # 订单列表页
│   │   ├── orderList.js
│   │   ├── orderList.json
│   │   ├── orderList.wxml
│   │   └── orderList.wxss
│   ├── orderDetail/          # 订单详情页
│   │   ├── orderDetail.js
│   │   ├── orderDetail.json
│   │   ├── orderDetail.wxml
│   │   └── orderDetail.wxss
│   ├── my/                   # 我的页面
│   │   ├── my.js
│   │   ├── my.json
│   │   ├── my.wxml
│   │   └── my.wxss
│   └── userInfo/             # 个人信息页
│       ├── userInfo.js
│       ├── userInfo.json
│       ├── userInfo.wxml
│       └── userInfo.wxss
└── utils/                    # 工具类目录
    └── mockData.js           # Mock数据文件（图书、分类、购物车、订单数据）

数据模型

图书数据 (books)

{
  id: 'b001',                    // 图书ID
  title: '边城',                 // 书名
  author: '沈从文',              // 作者
  price: 32.5,                   // 价格
  cover: '/images/book/边城.jpg', // 封面图
  description: '一代文学大师成长与蜕变之路', // 简介
  category_id: 'c001',           // 分类ID
  stock: 100,                    // 库存数量
  publiser: '民主与建设出版社',  // 出版社
  date: '2023-09',               // 出版日期
  ISBN: '39-1-4-234-3-12'        // ISBN号
}

分类数据 (categories)

{
  id: 'c001',                    // 分类ID
  name: '文学'                   // 分类名称
}

购物车数据 (cart)

{
  book: {                        // 图书信息
    id: 'b001',
    title: '边城',
    author: '沈从文',
    price: 32.5,
    cover: '/images/book/边城.jpg'
  },
  quantity: 1,                   // 购买数量
  selected: true                 // 是否选中
}

订单数据 (orders)

{
  id: 'ord_1672531200000',       // 订单ID
  order_time: 1672531200000,     // 下单时间戳
  total_amount: 100.5,           // 订单总金额
  items: [{                      // 订单商品列表
    book: { id: 'b001', title: '边城', ... },
    quantity: 1
  }],
  status: 'completed'            // 订单状态：pending/paid/cancelled/completed
}

用户数据 (userInfo)

{
  nickname: '微信用户',          // 昵称
  avatarUrl: '/images/default_avatar.png', // 头像
  phone: '',                     // 手机号
  address: '地球村'              // 地址
}

核心业务逻辑

1. 数据初始化

// app.js
const mockData = require('./utils/mockData.js');

App({
  onLaunch() {
    mockData.initMockData(); // 应用启动时初始化mock数据
  },
});

2. 添加到购物车

function addToCart(bookId, quantity = 1) {
  let cartItems = getCartItems();
  const book = getBookById(bookId);

  if (!book || book.stock < quantity) {
    wx.showToast({ title: '库存不足或商品不存在', icon: 'none' });
    return false;
  }

  const existingItem = cartItems.find((item) => item.book.id === bookId);
  if (existingItem) {
    existingItem.quantity += quantity;
  } else {
    cartItems.push({ book: book, quantity: quantity, selected: true });
  }
  wx.setStorageSync(CART_KEY, cartItems);
  return true;
}

3. 创建订单

function createOrder(orderItems, totalAmount) {
  let orders = getAllOrders();
  let books = getAllBooks();

  const newOrder = {
    id: `ord_${Date.now()}`,
    order_time: Date.now(),
    total_amount: totalAmount,
    items: orderItems,
    status: 'pending',
  };

  // 扣减库存
  orderItems.forEach((orderItem) => {
    const bookIndex = books.findIndex((b) => b.id === orderItem.book.id);
    if (bookIndex > -1) {
      books[bookIndex].stock -= orderItem.quantity;
    }
  });

  wx.setStorageSync(BOOK_KEY, books);
  orders.unshift(newOrder);
  wx.setStorageSync(ORDERS_KEY, orders);
  return newOrder;
}

4. 用户信息管理

function updateUserInfo(newInfo) {
  const currentInfo = getUserInfo();
  const updatedInfo = { ...currentInfo, ...newInfo };
  wx.setStorageSync(USER_INFO_KEY, updatedInfo);
  return updatedInfo;
}

页面路由配置

{
  "pages": [
    "pages/index/index", // 首页（默认启动页）
    "pages/category/category", // 分类页
    "pages/cart/cart", // 购物车页
    "pages/my/my", // 我的页面
    "pages/productDetail/productDetail", // 图书详情页
    "pages/orderList/orderList", // 订单列表页
    "pages/orderDetail/orderDetail", // 订单详情页
    "pages/userInfo/userInfo", // 个人信息页
    "pages/search/search" // 搜索页
  ]
}

TabBar配置

{
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#1296db",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tabbar/home.png",
        "selectedIconPath": "images/tabbar/home_selected.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "images/tabbar/category.png",
        "selectedIconPath": "images/tabbar/category_selected.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "images/tabbar/cart.png",
        "selectedIconPath": "images/tabbar/cart_selected.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/tabbar/profile.png",
        "selectedIconPath": "images/tabbar/profile_selected.png"
      }
    ]
  }
}

运行环境要求

• 微信开发者工具：建议使用最新稳定版
• 基础库版本：2.19.0 及以上
• AppID：需替换为自己的AppID

快速开始

1. 克隆/下载项目

将项目文件夹下载到本地

2. 导入项目

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择项目目录 book-mall-pure-mini-program
4. 填入AppID（可使用测试号或自己的AppID）
5. 点击"导入"

3. 运行项目

导入成功后，项目会自动编译运行，可在模拟器中预览效果

4. 真机调试

点击工具栏"预览"按钮，扫码在手机上体验

预置测试数据

图书分类

分类ID	分类名称
c001	文学
c002	科幻
c003	历史
c004	计算机
c005	儿童
c006	艺术

图书列表

书名	作者	价格	分类	库存
边城	沈从文	¥32.5	文学	100
北斗地理百科全书	张智慧	¥68.0	科幻	50
骆驼祥子	老舍	¥36.0	文学	80
三国演义	罗贯中	¥78.0	历史	70
C++零基础程序设计	出版社	¥158.0	计算机	30
神秘慧星虫	格林	¥158.0	儿童	130

默认用户

项目	值
昵称	微信用户
地址	地球村

界面预览

项目包含演示视频文件 演示视频.mp4，可查看完整功能演示。

扩展建议

如需进一步完善项目，可考虑以下扩展：

1. 接入真实后端：将Mock数据替换为真实API接口
2. 用户登录系统：接入微信登录，实现真实用户体系
3. 在线支付：接入微信支付，实现真实支付流程
4. 收货地址管理：添加收货地址的增删改查功能
5. 商品评价：用户购买后可以评价图书
6. 收藏功能：添加图书收藏夹功能
7. 优惠券系统：添加优惠券领取和使用功能
8. 推荐系统：根据购买历史推荐图书
9. 消息通知：订单状态变更推送通知
10. 分享功能：支持分享图书到好友和朋友圈

注意事项

1. 本项目为学习演示项目，所有数据均为模拟数据
2. 支付功能为模拟实现，不涉及真实交易
3. 图书封面图片仅供学习使用
4. 如需发布上线，请替换为自己的AppID并完善相关资质
5. 项目包含视觉美化版本和定制版本的压缩包，可根据需要选择使用

许可证

本项目仅供学习交流使用，请勿用于商业用途。