一、项目概述
在数字化阅读时代，将中国古典诗词以微信小程序的形式呈现，可以让更多人便捷地接触和欣赏传统文化。这篇将详细介绍一个古诗词微信小程序的完整项目结构，并附上核心代码及详细注释，帮助开发者快速理解实现原理。
二、项目结构
miniprogram/├── pages/ // 页面目录│ ├── index/ // 首页│ ├── poem/ // 诗词详情页│ ├── search/ // 搜索页│ ├── collection/ // 收藏夹│ └── me/ // 个人中心├── components/ // 自定义组件│ ├── poem-card/ // 诗词卡片组件│ └── author-card/ // 作者卡片组件├── utils/ // 工具函数│ ├── api.js // 接口封装│ └── storage.js // 本地存储封装├── styles/ // 公共样式├── images/ // 图片资源├── app.js // 小程序入口├── app.json // 全局配置└── app.wxss // 全局样式
三、核心代码实现
1. 首页实现 (pages/index/index.js)
// 引入接口封装const api = require('../../utils/api');Page({data: {dailyPoem: {}, // 每日推荐诗词hotPoems: [], // 热门诗词categories: [ // 分类数据{name: '唐诗', icon: 'icon-tang'},{name: '宋词', icon: 'icon-song'},{name: '诗经', icon: 'icon-book'}]},onLoad() {this.loadData();},// 加载首页数据async loadData() {try {// 并发请求多个接口const [dailyRes, hotRes] = await Promise.all([api.getDailyPoem(),api.getHotPoems()]);this.setData({dailyPoem: dailyRes.data,hotPoems: hotRes.data.list});} catch (error) {console.error('首页数据加载失败:', error);wx.showToast({ title: '数据加载失败', icon: 'none' });}},// 跳转到诗词详情navigateToPoem(e) {const poemId = e.currentTarget.dataset.id;wx.navigateTo({url: `/pages/poem/poem?id=${poemId}`});}});
2. 诗词详情页 (pages/poem/poem.js)
const api = require('../../utils/api');Page({data: {poem: null, // 当前诗词author: null, // 作者信息isCollected: false, // 是否已收藏comments: [], // 评论列表showMore: false // 是否显示更多内容},onLoad(options) {this.poemId = options.id; // 获取路由参数中的诗词IDthis.loadPoemData();},// 加载诗词详情数据async loadPoemData() {wx.showLoading({ title: '加载中...' });try {// 并发获取诗词详情、作者信息和评论const [poemRes, authorRes, commentsRes] = await Promise.all([api.getPoemDetail(this.poemId),api.getAuthorInfo(this.poemId),api.getComments(this.poemId)]);this.setData({poem: poemRes.data,author: authorRes.data,comments: commentsRes.data.list});// 检查收藏状态this.checkCollectionStatus();} catch (error) {console.error('诗词详情加载失败:', error);wx.showToast({ title: '加载失败', icon: 'none' });} finally {wx.hideLoading();}},// 检查收藏状态async checkCollectionStatus() {if (!getApp().globalData.userInfo) return;try {const res = await api.checkCollection(this.poemId);this.setData({ isCollected: res.data.collected });} catch (error) {console.error('检查收藏状态失败:', error);}},// 切换收藏状态async toggleCollection() {if (!getApp().globalData.userInfo) {return wx.navigateTo({ url: '/pages/me/login' });}const { isCollected } = this.data;try {if (isCollected) {await api.removeCollection(this.poemId);} else {await api.addCollection(this.poemId);}this.setData({ isCollected: !isCollected });wx.showToast({title: isCollected ? '已取消收藏' : '收藏成功',icon: 'success'});} catch (error) {console.error('收藏操作失败:', error);wx.showToast({ title: '操作失败', icon: 'none' });}}});
3. API封装 (utils/api.js)
const BASE_URL = 'https://your-api-domain.com/api/v1';/*** 封装微信请求方法* @param {string} url - 请求地址* @param {object} options - 请求配置* @returns {Promise} 返回Promise对象*/function request(url, options = {}) {return new Promise((resolve, reject) => {wx.request({url: BASE_URL + url,method: options.method || 'GET',data: options.data || {},header: {'Content-Type': 'application/json','Authorization': getApp().globalData.token || ''},success(res) {if (res.statusCode === 200) {resolve(res.data);} else {reject(res.data);}},fail(error) {reject(error);}});});}// 获取每日推荐诗词export function getDailyPoem() {return request('/poems/daily');}// 获取热门诗词export function getHotPoems(params = {}) {return request('/poems/hot', { data: params });}// 获取诗词详情export function getPoemDetail(id) {return request(`/poems/${id}`);}// 添加收藏export function addCollection(poemId) {return request('/collections', {method: 'POST',data: { poem_id: poemId }});}// 其他API方法...
四、关键实现要点
数据加载优化：
使用Promise.all并发请求多个接口
添加加载状态提示
错误处理机制
状态管理：
使用小程序全局变量管理用户信息
本地缓存收藏状态
性能考虑：
图片懒加载
分页加载长列表
数据缓存策略
用户体验：
收藏状态的即时反馈
未登录状态的友好提示
加载失败的重试机制
五、扩展功能建议
诗词朗诵功能：集成语音合成API，实现诗词朗读
创作功能：允许用户创作并分享自己的诗词作品
社交互动：增加诗词接龙、飞花令等互动游戏
学习计划：制定诗词学习计划，跟踪学习进度
这篇文章通过以上代码结构和详细注释，开发者可以快速搭建一个功能完整的古诗词微信小程序。项目采用模块化设计，便于维护和扩展，同时考虑了性能优化和用户体验。
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
