5zu-sbook

听书阅读小程序

项目简介

这是听书阅读系统的微信小程序端，与后端共享数据库，提供电子书阅读和听书功能。

功能模块

用户模块

• 用户登录/注册（普通用户）
• 管理员登录（提示使用Web端）
• 用户信息管理

内容浏览

• 首页：书籍列表、分类筛选、搜索
• 书籍详情：查看简介、开始阅读/听书
• 分类浏览：按分类查看内容

阅读功能

• 电子书阅读
• 字体大小调节
• 背景颜色设置（护眼模式）
• 章节切换
• 目录导航

听书功能

• 音频播放
• 播放进度控制
• 播放速度调节（0.5x - 2.0x）
• 章节切换
• 自动播放下一章

个人中心

• 用户信息展示
• 我的书架
• 阅读历史
• 设置

技术栈

• 微信小程序原生开发
• 小程序API调用
• 本地存储（书架、历史记录）

项目结构

xiao/
├── api/              # API接口封装
│   ├── user.js       # 用户相关API
│   ├── content.js    # 内容相关API
│   ├── category.js   # 分类相关API
│   └── chapter.js    # 章节相关API
├── utils/            # 工具类
│   ├── api.js        # 网络请求封装
│   └── user.js       # 用户工具函数
├── pages/            # 页面
│   ├── index/        # 首页
│   ├── login/        # 登录页
│   ├── register/     # 注册页
│   ├── detail/       # 详情页
│   ├── read/         # 阅读页
│   ├── audio/        # 听书页
│   ├── profile/      # 个人中心
│   ├── bookshelf/    # 书架
│   └── history/      # 历史记录
├── app.js            # 小程序入口
├── app.json          # 小程序配置
└── app.wxss          # 全局样式

配置说明

1. 修改API地址

在 utils/api.js 中修改 BASE_URL：

const BASE_URL = 'http://localhost:8080/api'; // 改为你的后端地址

注意：小程序要求使用HTTPS，本地开发可以使用微信开发者工具的不校验合法域名选项。

2. 配置tabBar图标

在 app.json 中配置了tabBar，需要准备以下图标（放在 images/ 目录下）：

• home.png / home-active.png - 首页图标
• bookshelf.png / bookshelf-active.png - 书架图标
• profile.png / profile-active.png - 个人中心图标

使用说明

开发环境

1. 使用微信开发者工具打开项目
2. 在微信开发者工具中：
   • 设置 -> 项目设置 -> 不校验合法域名（开发阶段）
   • 确保后端服务已启动（默认 http://localhost:8080）

登录说明

• 普通用户：使用 /api/user/login 接口登录
• 管理员：登录后会提示使用Web端管理后台

功能说明

1. 首页：可以浏览书籍列表，支持分类筛选和搜索
2. 详情页：查看书籍详情，可以开始阅读或听书
3. 阅读页：支持字体大小和背景色调节
4. 听书页：支持播放速度调节和进度控制
5. 个人中心：查看用户信息、书架和历史记录

注意事项

1. 登录权限：

   • 浏览内容不需要登录
   • 阅读/听书需要登录
   • 管理员登录后会提示使用Web端

2. 数据存储：

   • 用户信息：使用 wx.setStorageSync 存储
   • 书架和历史：存储在本地，后续可对接后端API

3. 网络请求：

   • 所有API请求都携带token（如果需要）
   • token过期会自动跳转到登录页

4. 图片资源：

   • 需要准备默认封面图片：/images/default-cover.png
   • 需要准备默认头像：/images/default-avatar.png

后续优化

1. 对接后端书架和历史记录API
2. 添加阅读进度同步
3. 添加书签功能
4. 添加评论功能
5. 优化图片加载和缓存
6. 添加离线下载功能