图书商城小程序

图书商城小程序项目简介这是一个图书电商购物的微信小程序采用纯前端实现使用本地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,// 图书IDtitle:边城,// 书名author:沈从文,// 作者price:32.5,// 价格cover:/images/book/边城.jpg,// 封面图description:一代文学大师成长与蜕变之路,// 简介category_id:c001,// 分类IDstock:100,// 库存数量publiser:民主与建设出版社,// 出版社date:2023-09,// 出版日期ISBN:39-1-4-234-3-12// ISBN号}分类数据 (categories){id:c001,// 分类IDname:文学// 分类名称}购物车数据 (cart){book:{// 图书信息id:b001,title:边城,author:沈从文,price:32.5,cover:/images/book/边城.jpg},quantity:1,// 购买数量selected:true// 是否选中}订单数据 (orders){id:ord_1672531200000,// 订单IDorder_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.jsconstmockDatarequire(./utils/mockData.js);App({onLaunch(){mockData.initMockData();// 应用启动时初始化mock数据},});2. 添加到购物车functionaddToCart(bookId,quantity1){letcartItemsgetCartItems();constbookgetBookById(bookId);if(!book||book.stockquantity){wx.showToast({title:库存不足或商品不存在,icon:none});returnfalse;}constexistingItemcartItems.find((item)item.book.idbookId);if(existingItem){existingItem.quantityquantity;}else{cartItems.push({book:book,quantity:quantity,selected:true});}wx.setStorageSync(CART_KEY,cartItems);returntrue;}3. 创建订单functioncreateOrder(orderItems,totalAmount){letordersgetAllOrders();letbooksgetAllBooks();constnewOrder{id:ord_${Date.now()},order_time:Date.now(),total_amount:totalAmount,items:orderItems,status:pending,};// 扣减库存orderItems.forEach((orderItem){constbookIndexbooks.findIndex((b)b.idorderItem.book.id);if(bookIndex-1){books[bookIndex].stock-orderItem.quantity;}});wx.setStorageSync(BOOK_KEY,books);orders.unshift(newOrder);wx.setStorageSync(ORDERS_KEY,orders);returnnewOrder;}4. 用户信息管理functionupdateUserInfo(newInfo){constcurrentInfogetUserInfo();constupdatedInfo{...currentInfo,...newInfo};wx.setStorageSync(USER_INFO_KEY,updatedInfo);returnupdatedInfo;}页面路由配置{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. 导入项目打开微信开发者工具选择导入项目选择项目目录book-mall-pure-mini-program填入AppID可使用测试号或自己的AppID点击导入3. 运行项目导入成功后项目会自动编译运行可在模拟器中预览效果4. 真机调试点击工具栏预览按钮扫码在手机上体验预置测试数据图书分类分类ID分类名称c001文学c002科幻c003历史c004计算机c005儿童c006艺术图书列表书名作者价格分类库存边城沈从文¥32.5文学100北斗地理百科全书张智慧¥68.0科幻50骆驼祥子老舍¥36.0文学80三国演义罗贯中¥78.0历史70C零基础程序设计出版社¥158.0计算机30神秘慧星虫格林¥158.0儿童130默认用户项目值昵称微信用户地址地球村界面预览项目包含演示视频文件演示视频.mp4可查看完整功能演示。扩展建议如需进一步完善项目可考虑以下扩展接入真实后端将Mock数据替换为真实API接口用户登录系统接入微信登录实现真实用户体系在线支付接入微信支付实现真实支付流程收货地址管理添加收货地址的增删改查功能商品评价用户购买后可以评价图书收藏功能添加图书收藏夹功能优惠券系统添加优惠券领取和使用功能推荐系统根据购买历史推荐图书消息通知订单状态变更推送通知分享功能支持分享图书到好友和朋友圈注意事项本项目为学习演示项目所有数据均为模拟数据支付功能为模拟实现不涉及真实交易图书封面图片仅供学习使用如需发布上线请替换为自己的AppID并完善相关资质项目包含视觉美化版本和定制版本的压缩包可根据需要选择使用许可证本项目仅供学习交流使用请勿用于商业用途。本项目详情https://www.aiyuanma.vip/posts/book-mall-pure-mini-program