图书借阅小程序

项目简介

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

技术栈

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

项目特点

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

功能模块

1. 首页模块 (pages/index)

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

2. 分类模块 (pages/category)

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

3. 搜索模块 (pages/search)

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

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

• 图书封面大图展示
• 图书名称、作者、价格
• 图书详细介绍
• 库存数量显示
• 加入收藏夹功能
• 立即借阅功能

5. 收藏夹模块 (pages/cart)

• 收藏图书列表展示
• 图书封面、书名、作者、价格
• 借阅数量增减
• 单选/全选功能
• 合计金额实时计算
• 移除收藏功能
• 结算跳转订单确认

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

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

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

• 订单完整信息展示
• 订单编号、下单时间
• 借阅图书明细
• 订单总金额
• 订单状态

8. 我的模块 (pages/my)

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

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

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

项目结构

book-rent-min/
├── 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
│   │   └── 算法导论.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: '《小王子》是法国作家圣埃克苏佩里于1942年写成的著名儿童文学短篇小说。', // 简介
  category_id: 'c001',           // 分类ID
  stock: 100                     // 库存数量
}

分类数据 (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: 'completed',
  };

  // 扣减库存
  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": "首页"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "收藏夹"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的"
      }
    ]
  }
}

运行环境要求

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

快速开始

1. 克隆/下载项目

将项目文件夹下载到本地

2. 导入项目

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择项目目录 book-rent-min
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
算法导论	Thomas H. Cormen	¥158.0	计算机	30

默认用户

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

界面预览

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

扩展建议

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

1. 接入真实后端：将Mock数据替换为真实API接口
2. 用户登录系统：接入微信登录，实现真实用户体系
3. 在线支付：接入微信支付，实现真实支付流程
4. 借阅期限管理：添加借阅时长、到期提醒功能
5. 逾期罚款：超期自动计算罚款
6. 预约功能：图书无库存时支持预约
7. 评价系统：用户可以评价图书
8. 推荐系统：根据借阅历史推荐图书
9. 消息通知：借阅到期提醒、新书上架通知
10. 扫码借书：支持扫描图书条码快速借阅

注意事项

1. 本项目为学习演示项目，所有数据均为模拟数据
2. 支付功能为模拟实现，不涉及真实交易
3. 图书封面图片仅供学习使用
4. 如需发布上线，请替换为自己的AppID并完善相关资质

许可证

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