古韵诗词小程序

古韵诗词小程序

项目简介

这是一个古诗词学习与鉴赏的微信小程序，采用纯前端实现，使用本地Mock数据模拟后端接口。项目完整实现了诗词浏览、搜索、收藏、评分、朗读等核心功能，适合作为微信小程序开发学习项目或计算机设计参考。

技术栈

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

项目特点

• 纯前端实现：无需后端服务器，所有数据使用本地Mock模拟
• 数据持久化：收藏、评分、用户信息使用 wx.setStorageSync 本地存储，关闭小程序后数据不丢失
• 完整业务流程：涵盖诗词浏览、搜索、收藏、评分、朗读等完整功能
• UI风格清新：界面风格简洁优雅，绿色主题配色，符合古诗词文化气质
• 音频朗读：支持诗词朗读功能，提升学习体验

功能模块

1. 首页模块 (pages/index)

• 轮播图展示精选诗词
• 分类导航（按朝代、按题材）
• 搜索功能入口
• 专题推荐展示
• 摇一摇随机推荐诗词

2. 诗词列表模块 (pages/list)

• 按朝代筛选（唐代、宋代等）
• 按题材筛选（咏月、爱国等）
• 诗词列表展示
• 点击进入诗词详情

3. 搜索模块 (pages/search)

• 关键词搜索功能
• 支持按标题、作者、内容搜索
• 搜索结果列表展示
• 点击进入诗词详情

4. 诗词详情模块 (pages/poem-detail)

• 展示诗词完整信息（标题、朝代、作者、内容）
• 诗词注释/赏析展示
• 音频朗读功能（播放/暂停）
• 收藏/取消收藏功能
• 五星评分功能
• 诗词动画效果展示

5. 收藏模块 (pages/favorites)

• 展示用户收藏的诗词列表
• 点击进入诗词详情
• 收藏数据本地持久化

6. 我的模块 (pages/my)

• 用户头像展示与更换
• 用户昵称展示
• 个性签名展示
• 我的收藏入口
• 编辑资料入口

7. 编辑资料模块 (pages/edit-info)

• 修改用户昵称
• 修改个性签名
• 保存用户信息

项目结构

shici-min/
├── app.js                    # 小程序入口文件，全局数据管理
├── app.json                  # 小程序全局配置（页面路由、TabBar、窗口样式）
├── app.wxss                  # 全局样式文件
├── weui.wxss                 # WeUI样式库
├── project.config.json       # 项目配置文件
├── sitemap.json              # 小程序索引配置
├── 视频演示.mp4              # 功能演示视频
├── images/                   # 图片资源目录
│   ├── banner/               # 轮播图图片
│   │   ├── banner1.jpg
│   │   ├── banner2.jpg
│   │   └── banner3.jpg
│   ├── icons/                # 功能图标
│   │   ├── 唐.png            # 唐代图标
│   │   ├── 宋.png            # 宋代图标
│   │   ├── 咏.png            # 咏月图标
│   │   ├── 爱国.png          # 爱国图标
│   │   ├── 收藏.png          # 收藏图标
│   │   ├── 收藏_active.png   # 收藏选中图标
│   │   ├── 朗读.png          # 朗读图标
│   │   ├── laba.png          # 喇叭图标
│   │   ├── laba_active.png   # 喇叭选中图标
│   │   ├── star_empty.png    # 空星图标
│   │   ├── star_full.png     # 满星图标
│   │   └── default-avatar.png # 默认头像
│   └── tabbar/               # TabBar图标
│       ├── home.png          # 首页图标
│       ├── home_active.png   # 首页选中图标
│       ├── my.png            # 我的图标
│       └── my_active.png     # 我的选中图标
├── pages/                    # 页面目录
│   ├── index/                # 首页
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── list/                 # 诗词列表页
│   │   ├── list.js
│   │   ├── list.json
│   │   ├── list.wxml
│   │   └── list.wxss
│   ├── search/               # 搜索页
│   │   ├── search.js
│   │   ├── search.json
│   │   ├── search.wxml
│   │   └── search.wxss
│   ├── poem-detail/          # 诗词详情页
│   │   ├── poem-detail.js
│   │   ├── poem-detail.json
│   │   ├── poem-detail.wxml
│   │   └── poem-detail.wxss
│   ├── favorites/            # 收藏页
│   │   ├── favorites.js
│   │   ├── favorites.json
│   │   ├── favorites.wxml
│   │   └── favorites.wxss
│   ├── my/                   # 我的页面
│   │   ├── my.js
│   │   ├── my.json
│   │   ├── my.wxml
│   │   └── my.wxss
│   └── edit-info/            # 编辑资料页
│       ├── edit-info.js
│       ├── edit-info.json
│       ├── edit-info.wxml
│       └── edit-info.wxss
└── utils/                    # 工具类目录
    ├── mockData.js           # Mock数据文件（诗词数据库及查询方法）
    └── util.js               # 工具函数

数据模型

诗词数据 (poemDB)

{
  id: 1,                        // 诗词ID
  title: "静夜思",              // 诗词标题
  dynasty: "唐",                // 朝代
  author: "李白",               // 作者
  content: [                    // 诗词内容（数组形式，每行一个元素）
    "床前明月光，",
    "疑是地上霜。",
    "举头望明月，",
    "低头思故乡。"
  ],
  type: "咏月",                 // 题材类型
  audioUrl: "https://...",      // 朗读音频URL
  annotation: "这首诗描绘了..."  // 注释/赏析
}

用户信息数据 (userInfo)

{
  avatarUrl: "/images/icons/default-avatar.png",  // 用户头像
  nickName: "微信用户",                            // 用户昵称
  signature: ""                                    // 个性签名
}

收藏数据 (favorites)

[1, 4, 5]; // 收藏的诗词ID数组

评分数据 (ratings)

{
  "1": 5,   // 诗词ID: 评分（1-5星）
  "4": 4
}

核心业务逻辑

1. 诗词查询

// mockData.js
// 根据ID获取诗词
getPoemById: function(id) {
  return poemDB.find(p => p.id == id);
}

// 根据朝代筛选
getPoemsByDynasty: function(dynasty) {
  return poemDB.filter(p => p.dynasty === dynasty);
}

// 根据题材筛选
getPoemsByType: function(type) {
  return poemDB.filter(p => p.type === type);
}

// 关键词搜索（支持标题、作者、内容）
searchPoems: function(keyword) {
  if (!keyword) return [];
  return poemDB.filter(p =>
    p.title.includes(keyword) ||
    p.author.includes(keyword) ||
    p.content.join('').includes(keyword)
  );
}

2. 收藏功能

// 切换收藏状态
toggleFavorite: function() {
  const favorites = wx.getStorageSync('favorites') || [];
  const poemId = this.data.poem.id;
  if (this.data.isFavorited) {
    const index = favorites.indexOf(poemId);
    if (index > -1) favorites.splice(index, 1);
  } else {
    favorites.push(poemId);
  }
  wx.setStorageSync('favorites', favorites);
  this.setData({ isFavorited: !this.data.isFavorited });
}

3. 评分功能

// 评分
onRate: function(e) {
  const score = e.currentTarget.dataset.score;
  const poemId = this.data.poem.id;
  const ratings = wx.getStorageSync('ratings') || {};
  ratings[poemId] = score;
  wx.setStorageSync('ratings', ratings);
  this.setData({ rating: score });
}

4. 音频播放

// 创建音频实例
this.innerAudioContext = wx.createInnerAudioContext();
this.innerAudioContext.src = this.data.poem.audioUrl;

// 播放/暂停切换
playAudio: function() {
  if (this.data.isPlaying) {
    this.innerAudioContext.pause();
  } else {
    this.innerAudioContext.play();
  }
}

// 页面卸载时销毁音频实例
onUnload: function() {
  if (this.innerAudioContext) {
    this.innerAudioContext.stop();
    this.innerAudioContext.destroy();
  }
}

5. 数据持久化

// 保存用户信息
wx.setStorageSync('userInfo', userInfo);

// 读取用户信息
const userInfo = wx.getStorageSync('userInfo');

// 保存收藏列表
wx.setStorageSync('favorites', favorites);

// 保存评分数据
wx.setStorageSync('ratings', ratings);

页面路由配置

{
  "pages": [
    "pages/index/index", // 首页（默认启动页）
    "pages/my/my", // 我的
    "pages/poem-detail/poem-detail", // 诗词详情
    "pages/list/list", // 诗词列表
    "pages/search/search", // 搜索结果
    "pages/favorites/favorites", // 我的收藏
    "pages/edit-info/edit-info" // 编辑资料
  ]
}

TabBar配置

{
  "tabBar": {
    "color": "#8a8a8a",
    "selectedColor": "#67BB4D",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tabbar/home.png",
        "selectedIconPath": "images/tabbar/home_active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/tabbar/my.png",
        "selectedIconPath": "images/tabbar/my_active.png"
      }
    ]
  }
}

运行环境要求

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

快速开始

1. 克隆/下载项目

将项目文件夹下载到本地

2. 导入项目

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

3. 运行项目

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

4. 真机调试

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

预置测试数据

诗词数据

标题	朝代	作者	题材
静夜思	唐	李白	咏月
春晓	唐	孟浩然	咏春
登高	唐	杜甫	登高
水调歌头·明月几时有	宋	苏轼	咏月
满江红·写怀	宋	岳飞	爱国

分类导航

分类名称	类型	说明
唐代	朝代	筛选唐代诗词
宋代	朝代	筛选宋代诗词
咏月	题材	筛选咏月诗词
爱国	题材	筛选爱国诗词

界面预览

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

扩展建议

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

1. 接入真实后端：将Mock数据替换为真实API接口
2. 扩充诗词库：增加更多诗词数据，覆盖更多朝代和题材
3. 用户登录系统：接入微信登录，实现云端数据同步
4. 诗词学习功能：增加诗词背诵、默写、测验功能
5. 社交分享：支持分享诗词到朋友圈或好友
6. 每日推荐：每日推送一首诗词
7. 诗词接龙：增加诗词接龙小游戏
8. AI赏析：接入AI生成诗词赏析内容
9. 离线音频：支持音频缓存，离线朗读
10. 主题切换：支持多种主题风格切换

注意事项

1. 本项目为学习演示项目，所有数据均为模拟数据
2. 音频资源来自网络，仅供学习使用
3. 如需发布上线，请替换为自己的AppID并完善相关资质
4. 音频播放需要网络环境支持

许可证

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

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/shici-min