尧图网站开发 
简介这是一套仿网易蜗牛读书风格的微信小程序阅读类项目源码适合小程序初学者或希望快速搭建读书类应用的开发者参考与二次开发。项目参考了网易蜗牛读书的交互与视觉风格实现书架、书籍列表、阅读页、个人中心等主要模块整体简洁清爽。压缩包共包含88个文件以png/jpg图片、wxml页面结构、wxss样式、js业务逻辑和json配置为主辅以gif动图和md说明文档包体约9.19MB目录结构清晰便于按模块对照学习。页面组件与工具函数均已封装可直接在微信开发者工具中导入运行搭配项目截图与说明文档可帮助理解小程序项目结构、页面生命周期、数据绑定及组件化开发等核心知识点。目前已有654人学习下载适合用于课程设计、毕业设计或学习练手。1. 拿到仿网易蜗牛读书的源码后先分清主次再动手改一个标题里同时出现「阅读读书」「仿网易蜗牛读书」和「源代码截图」意味着这个微信小程序项目实例的重点不在书城而在阅读器本身。蜗牛读书的产品逻辑是「每天免费一小时 整本书沉浸式阅读」跟按本售卖的书城完全两个思路书架是入口阅读页是核心书城和分类只是导流。所以从源代码里最先要读的不是列表页写得多花哨而是章节文件怎么组织、进度怎么存、字号怎么换。这篇博文面向两类人一类是拿这个源码做毕业设计或作品集需要把每个页面讲清楚另一类是打算自己从零复刻一个阅读读书小程序想找一个可靠的结构做底子。我会按页面骨架、数据模型、书城筛选、阅读器、持久化这条线往下拆最后落到怎么把源码改成你自己的 demo。所有代码都是微信小程序原生语法不依赖第三方框架拿到源码后可以直接对着改。2. 阅读小程序页面骨架与本地 JSON 数据模型2.1 tabBar 三页加三个业务页页面设计先从职责分界开始仿蜗牛读书的页面设计通常不复杂常见的做法是拆六个页面其中三个挂在 tabBar 上三个用wx.navigateTo跳转。这个划分直接决定源码里pages/目录下有哪些文件夹也决定你改代码时先在哪个文件下手。tabBar 三页分工明确书城页负责展示分类、搜索和书籍列表书架页从本地缓存读取已加入的书展示在读与未读状态我的页放阅读时长统计和设置入口。非 tab 三页里详情页负责书籍信息与加入书架分类页是书城列表的横向扩展阅读器页是全文最核心的一个页面。拿着源代码时先打开app.json看pages数组和tabBar配置。如果源码里的页面结构和上面说的不一致比如把分类页做成了 tabBar我一般会先改成三加三的结构理由是蜗牛系产品的核心操作路径是「书城 → 详情 → 阅读」分类不该跟书城平级否则用户每次筛选都要切 tab路径变长。2.2 用 book.json 组织书城数据章节文件按 id 单独拆阅读类小程序的数据组织和普通商城不同书籍是静态的章节是长文本如果把整本书塞进一个 JSON页面渲染会非常吃力。常见的做法是两层结构——书籍元信息放一个data/book.json章节内容按书籍 id 拆成独立文件。[ { id: book_001, title: 人间失格, author: 太宰治, category: 文学, cover: /images/covers/book_001.png, desc: 太宰治的代表作描写主角从沉沦到自我毁灭的过程。, totalChapters: 12, isFinished: 0 }, { id: book_002, title: 小王子, author: 圣埃克苏佩里, category: 童话, cover: /images/covers/book_002.png, desc: 一部写给大人的童话关于爱与责任。, totalChapters: 27, isFinished: 0 } ]下面是这份数据里每个字段的作用id是书籍唯一标识详情页和阅读器页都靠它从缓存或文件里取数据category用于书城页的分类 tab 筛选totalChapters用于进度条计算因为进度 已读章节数 / 总章节数isFinished标记是否读完书架页要用它区分在读和已读完的视觉状态。封面图建议用本地路径而不是网络 URL原因下面讲。章节文件单独放在data/chapters/{bookId}.js里每个文件导出一个数组数组里每一项是一章的内容。这样设计的好处是阅读器页只在用户点开某本书时按需加载对应文件而不是在 app 启动阶段就把所有书的大段文字读进内存。微信小程序对包体积有 2MB 主包限制书籍文本量一大必须靠分包或按需 require 来缓解。2.3 为什么章节内容不能放全局 data很多第一次写阅读小程序的开发者习惯把整本书的章节塞进app.globalData或者首页的data里理由是切换页面时数据不用重新加载。这个做法在原型阶段看不出问题书一多就会卡。微信小程序的setData是一次完整的 diff 过程数据越大单次更新的开销越高。阅读器页每滚动一屏就要更新一次进度和当前章节号如果把整本书 27 章十几万字放在 data 里每次 setData 都要带着这么大一坨数据做 diff帧率会明显下降。所以源码里如果看到data里只放当前章节的内容数组、onLoad时才去 require 对应章节文件这个设计是对的。章节文件本身的加载是同步的但体积远小于整本书首屏时间可以接受。需要优化的点反而是图片封面书城列表一次渲染十几本书封面图如果都用几百 KB 的本地图首屏会白屏很久——这是后面排错章节要专门提的坑。书籍元信息字段表字段类型用途idstring书籍唯一标识关联章节文件和书架缓存categorystring书城分类筛选的依据totalChaptersnumber阅读进度百分比计算的分母isFinishednumber0 在读1 已读完书架页排序用coverstring封面路径建议压缩到 50KB 内3. 书城分类筛选与详情页跳转的实现3.1 分类 tab 用 wx:if 渲染筛选逻辑一层 filter 就够了书城页的顶部通常是一排横向可滚动的分类标签源码里对应一个scroll-view加上wx:for渲染。常见的实现是页面 data 里维护一个categories数组和一个activeCategory字符串点击标签时更新activeCategory然后对全部书籍数据做一次 filter。Page({ data: { categories: [推荐, 文学, 科幻, 历史, 童话], activeCategory: 推荐, allBooks: [], bookList: [] }, onLoad() { const bookData require(../../data/book.js); this.setData({ allBooks: bookData, bookList: bookData }); }, changeCategory(e) { const category e.currentTarget.dataset.category; let list this.data.allBooks; if (category ! 推荐) { list list.filter(item item.category category); } this.setData({ activeCategory: category, bookList: list }); } });逻辑说明filter每次都基于allBooks重新筛而不是在bookList上反复筛选避免连续点击分类时筛选条件叠加导致列表越滤越少。「推荐」在这里做特殊处理等同于不筛选这是蜗牛读书的交互习惯——推荐位是运营位不是真实分类。dataset.category的值来自 WXML 里>handleSearch(e) { const keyword e.detail.value.trim().toLowerCase(); if (!keyword) { this.setData({ bookList: this.data.allBooks }); return; } const result this.data.allBooks.filter(item { return item.title.toLowerCase().includes(keyword) || item.author.toLowerCase().includes(keyword); }); this.setData({ bookList: result }); }参数说明e.detail.value是输入框当前值trim()去掉首尾空格防止用户只敲空格时把列表清空toLowerCase()是为了匹配英文书名时大小写不敏感。匹配字段只有标题和作者不匹配分类和简介因为分类一般就几个固定词简介匹配容易命中无关书。如果源码里还匹配了desc字段建议删掉简介里带「历史」两个字就把所有书都搜出来了用户会以为搜索坏了。3.3 详情页 onLoad 接收 id组装按钮状态书城列表每一项点击后用wx.navigateTo跳详情页URL 上带书籍 id。详情页的onLoad从options里取出 id再从书籍数据里找到这本书。onLoad(options) { const bookData require(../../data/book.js); const shelf wx.getStorageSync(shelf) || []; const book bookData.find(item item.id options.id); if (!book) { wx.showToast({ title: 书籍不存在, icon: none }); return; } this.setData({ book, inShelf: shelf.some(item item.id options.id) }); }这里的shelf.some是判断当前书是否已在书架缓存里返回值决定底部按钮显示「加入书架」还是「开始阅读」。require在 Page 生命周期里执行没问题微信开发者工具会把它当作普通模块处理。注意book是一个对象引用直接放进setData是安全的因为后面不会对这本书做局部修改只做页面展示。如果截图上详情页有「加入书架」按钮但点完没有反馈最常见的原因是shelf里存的对象结构对不上比如源码里存的是{ bookId: id }而这里读的是item.id取出来永远是undefinedsome永远返回 false。这个问题的排查方法放在最后一章统一说。4. 阅读进度、字号切换与蜗牛式时长统计4.1 用 scroll-view 做纵向滚动翻页进度靠滚动高度算蜗牛读书的阅读器是纵向连续滚动和起点那种按页点击翻页不同。纵向滚动在微信小程序里最稳妥的实现是scroll-view设置scroll-y为 true内容区放整章文本然后用bindscroll监听滚动位置。进度百分比不靠章节数算而是靠滚动高度和总高度的比值。scroll-view scroll-y classreader-scroll bindscrollhandleScroll scroll-top{{scrollTop}} view classchapter-content stylefont-size: {{fontSize}}rpx; line-height: {{lineHeight}}rpx; view wx:for{{chapterList}} wx:keyindex{{item}}/view /view /scroll-viewhandleScroll(e) { const scrollTop e.detail.scrollTop; const query wx.createSelectorQuery(); query.select(.chapter-content).boundingClientRect(rect { const totalHeight rect.height; const viewportHeight this.data.viewportHeight; const maxScroll totalHeight - viewportHeight; const progress maxScroll 0 ? Math.min(100, Math.round(scrollTop / maxScroll * 100)) : 0; if (Math.abs(progress - this.data.progress) 1) { this.setData({ progress }); } }).exec(); }逻辑说明scrollTop是当前滚动距离totalHeight是整章内容的高度viewportHeight是可视区域高度两者相减得到最大可滚动距离。进度就是「当前滚动距离 / 最大可滚动距离」。Math.abs 1这个判断做了节流滚动过程中进度每变化超过 1% 才触发一次setData否则每帧都在更新进度条会卡顿。真实项目中这个查询每次滚动都执行性能上略重更优做法是用wx.createSelectorQuery().in(this)配合scroll-view的bindscroll节流但源码里写成这样也能跑初学者更容易看懂。4.2 字号设置用 rpx切换时同步调整行高阅读器页至少要有三档字号蜗牛原版的字号档位更多仿写时做三档就够了小、标准、大。这里的核心坑是不能只改font-size不改line-height否则字号变大行距被压缩阅读体验很差。源码里如果字号和行高是分开两个字段就要把档位表做成一组一组的数据结构。const FONT_LEVELS [ { label: 小, fontSize: 28, lineHeight: 44 }, { label: 标准, fontSize: 30, lineHeight: 48 }, { label: 大, fontSize: 32, lineHeight: 52 } ]; setFontLevel(e) { const index e.currentTarget.dataset.index; const level FONT_LEVELS[index]; this.setData({ fontSize: level.fontSize, lineHeight: level.lineHeight, fontLevelIndex: index }); }参数说明单位是 rpx不是 px。rpx 是微信小程序的响应式单位屏幕宽度固定 750rpx不同设备上会自动换算。例子里的 28rpx 在 375px 宽度的 iPhone 上约等于 14px这就是正文常用字号。行高用 44~52rpx保持 1.5 倍左右的舒适行距。如果你在源码里看到字号用 px 写死真机在全面屏上会显得特别小这就是为什么模拟器看着正常、到手机上字变小的原因。>onShow() { this.startTime Date.now(); } onHide() { if (this.startTime) { const elapsed Math.floor((Date.now() - this.startTime) / 1000); const total wx.getStorageSync(readSeconds) || 0; wx.setStorageSync(readSeconds, total elapsed); this.startTime 0; } }逻辑说明onShow在页面每次显示时触发包括从后台切回来onHide在页面隐藏时触发包括切到其他小程序、按 Home 键、跳转别的页面。startTime设为 0 是为了防止onHide重复累加——页面隐藏后如果没有重置下次onHide会再算一次时长就翻倍了。wx.getStorageSync(readSeconds)读取的是累计秒数展示时再转成「小时:分钟」格式。这个时长统计有一个天然缺陷用户挂着不动也算时间真实产品里要配合前台计时器和滚屏事件做但本地 demo 阶段没必要上那套复杂度。4.4 书架数据用 Storage 持久化跨页面自动同步书架是阅读类小程序的第二个核心数据。仿蜗牛读书的源码里书架页的数据源是wx.getStorageSync(shelf)每次从详情页加入书架都要先读缓存再写缓存。这里有个容易写错的点很多人直接wx.setStorageSync(shelf, newBook)把数组覆盖成了一个对象书架页一读就崩。addToShelf() { const shelf wx.getStorageSync(shelf) || []; const exists shelf.some(item item.id this.data.book.id); if (exists) { wx.showToast({ title: 已在书架中, icon: none }); return; } shelf.push({ id: this.data.book.id, time: Date.now() }); wx.setStorageSync(shelf, shelf); this.setData({ inShelf: true }); wx.showToast({ title: 已加入书架 }); }参数说明shelf数组里存的是对象而不是只存书籍 id 字符串。多存一个time字段可以在书架页做排序——按加入时间倒序新加的书排前面。Date.now()返回毫秒时间戳不是可读字符串书架页展示时再格式化。exists判断用的是item.id this.data.book.id保证同一本书不会重复加入。源码里如果书架存的是完整书籍对象也能跑但书籍数据更新后缓存里的旧对象不会跟着变所以我一般只存 id 和时间戳书籍信息到书架页再根据 id 从 book.json 里查。这个方案的边界是书籍的总量级在几十本以内时每次都全量读改写缓存没有性能问题如果以后接入后端、书架可能有几百本就要改成只更新变化的字段。5. 把源代码改成自己的 demo换书、换皮肤、验证持久化5.1 替换书籍数据先改 book.json 再改章节文件拿到源代码后最直接的做法是把data/book.json里的书籍换成你准备的公版书或自己写的文本。替换时注意保持结构一致每本书的 id 要唯一章节文件名必须和book.json里的关联方式对应。如果源码里阅读器页是通过require(../../data/chapters/ bookId .js)加载章节的那新增书的章节文件命名必须精确匹配。改完数据用微信开发者工具重新编译书城页如果能出现新书说明数据结构没破坏。此时截图里对应的应该是书城列表出现新书名列表封面可以先用一张本地占位图。5.2 阅读器背景三档切换用主题 map 一次 setData阅读器通常提供白色、米黄、夜间三种背景。源码里如果只有单一背景色可以自己加。定义一个主题映射表把背景色、文字色、状态栏颜色都放进去。setTheme(e) { const theme e.currentTarget.dataset.theme; const THEME_MAP { white: { bg: #ffffff, color: #333333 }, sepia: { bg: #f3e9d0, color: #5a4a3a }, dark: { bg: #1c1c1c, color: #9a9a9a } }; const config THEME_MAP[theme]; this.setData({ bgColor: config.bg, textColor: config.color }); wx.setNavigationBarColor({ frontColor: theme dark ? #ffffff : #000000, backgroundColor: config.bg }); }参数说明THEME_MAP的 key 对应 WXML 按钮上的style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" /> 
简介这是一套仿网易蜗牛读书风格的微信小程序阅读类项目源码适合小程序初学者或希望快速搭建读书类应用的开发者参考与二次开发。项目参考了网易蜗牛读书的交互与视觉风格实现书架、书籍列表、阅读页、个人中心等主要模块整体简洁清爽。压缩包共包含88个文件以png/jpg图片、wxml页面结构、wxss样式、js业务逻辑和json配置为主辅以gif动图和md说明文档包体约9.19MB目录结构清晰便于按模块对照学习。页面组件与工具函数均已封装可直接在微信开发者工具中导入运行搭配项目截图与说明文档可帮助理解小程序项目结构、页面生命周期、数据绑定及组件化开发等核心知识点。目前已有654人学习下载适合用于课程设计、毕业设计或学习练手。1. 拿到仿网易蜗牛读书的源码后先分清主次再动手改一个标题里同时出现「阅读读书」「仿网易蜗牛读书」和「源代码截图」意味着这个微信小程序项目实例的重点不在书城而在阅读器本身。蜗牛读书的产品逻辑是「每天免费一小时 整本书沉浸式阅读」跟按本售卖的书城完全两个思路书架是入口阅读页是核心书城和分类只是导流。所以从源代码里最先要读的不是列表页写得多花哨而是章节文件怎么组织、进度怎么存、字号怎么换。这篇博文面向两类人一类是拿这个源码做毕业设计或作品集需要把每个页面讲清楚另一类是打算自己从零复刻一个阅读读书小程序想找一个可靠的结构做底子。我会按页面骨架、数据模型、书城筛选、阅读器、持久化这条线往下拆最后落到怎么把源码改成你自己的 demo。所有代码都是微信小程序原生语法不依赖第三方框架拿到源码后可以直接对着改。2. 阅读小程序页面骨架与本地 JSON 数据模型2.1 tabBar 三页加三个业务页页面设计先从职责分界开始仿蜗牛读书的页面设计通常不复杂常见的做法是拆六个页面其中三个挂在 tabBar 上三个用wx.navigateTo跳转。这个划分直接决定源码里pages/目录下有哪些文件夹也决定你改代码时先在哪个文件下手。tabBar 三页分工明确书城页负责展示分类、搜索和书籍列表书架页从本地缓存读取已加入的书展示在读与未读状态我的页放阅读时长统计和设置入口。非 tab 三页里详情页负责书籍信息与加入书架分类页是书城列表的横向扩展阅读器页是全文最核心的一个页面。拿着源代码时先打开app.json看pages数组和tabBar配置。如果源码里的页面结构和上面说的不一致比如把分类页做成了 tabBar我一般会先改成三加三的结构理由是蜗牛系产品的核心操作路径是「书城 → 详情 → 阅读」分类不该跟书城平级否则用户每次筛选都要切 tab路径变长。2.2 用 book.json 组织书城数据章节文件按 id 单独拆阅读类小程序的数据组织和普通商城不同书籍是静态的章节是长文本如果把整本书塞进一个 JSON页面渲染会非常吃力。常见的做法是两层结构——书籍元信息放一个data/book.json章节内容按书籍 id 拆成独立文件。[ { id: book_001, title: 人间失格, author: 太宰治, category: 文学, cover: /images/covers/book_001.png, desc: 太宰治的代表作描写主角从沉沦到自我毁灭的过程。, totalChapters: 12, isFinished: 0 }, { id: book_002, title: 小王子, author: 圣埃克苏佩里, category: 童话, cover: /images/covers/book_002.png, desc: 一部写给大人的童话关于爱与责任。, totalChapters: 27, isFinished: 0 } ]下面是这份数据里每个字段的作用id是书籍唯一标识详情页和阅读器页都靠它从缓存或文件里取数据category用于书城页的分类 tab 筛选totalChapters用于进度条计算因为进度 已读章节数 / 总章节数isFinished标记是否读完书架页要用它区分在读和已读完的视觉状态。封面图建议用本地路径而不是网络 URL原因下面讲。章节文件单独放在data/chapters/{bookId}.js里每个文件导出一个数组数组里每一项是一章的内容。这样设计的好处是阅读器页只在用户点开某本书时按需加载对应文件而不是在 app 启动阶段就把所有书的大段文字读进内存。微信小程序对包体积有 2MB 主包限制书籍文本量一大必须靠分包或按需 require 来缓解。2.3 为什么章节内容不能放全局 data很多第一次写阅读小程序的开发者习惯把整本书的章节塞进app.globalData或者首页的data里理由是切换页面时数据不用重新加载。这个做法在原型阶段看不出问题书一多就会卡。微信小程序的setData是一次完整的 diff 过程数据越大单次更新的开销越高。阅读器页每滚动一屏就要更新一次进度和当前章节号如果把整本书 27 章十几万字放在 data 里每次 setData 都要带着这么大一坨数据做 diff帧率会明显下降。所以源码里如果看到data里只放当前章节的内容数组、onLoad时才去 require 对应章节文件这个设计是对的。章节文件本身的加载是同步的但体积远小于整本书首屏时间可以接受。需要优化的点反而是图片封面书城列表一次渲染十几本书封面图如果都用几百 KB 的本地图首屏会白屏很久——这是后面排错章节要专门提的坑。书籍元信息字段表字段类型用途idstring书籍唯一标识关联章节文件和书架缓存categorystring书城分类筛选的依据totalChaptersnumber阅读进度百分比计算的分母isFinishednumber0 在读1 已读完书架页排序用coverstring封面路径建议压缩到 50KB 内3. 书城分类筛选与详情页跳转的实现3.1 分类 tab 用 wx:if 渲染筛选逻辑一层 filter 就够了书城页的顶部通常是一排横向可滚动的分类标签源码里对应一个scroll-view加上wx:for渲染。常见的实现是页面 data 里维护一个categories数组和一个activeCategory字符串点击标签时更新activeCategory然后对全部书籍数据做一次 filter。Page({ data: { categories: [推荐, 文学, 科幻, 历史, 童话], activeCategory: 推荐, allBooks: [], bookList: [] }, onLoad() { const bookData require(../../data/book.js); this.setData({ allBooks: bookData, bookList: bookData }); }, changeCategory(e) { const category e.currentTarget.dataset.category; let list this.data.allBooks; if (category ! 推荐) { list list.filter(item item.category category); } this.setData({ activeCategory: category, bookList: list }); } });逻辑说明filter每次都基于allBooks重新筛而不是在bookList上反复筛选避免连续点击分类时筛选条件叠加导致列表越滤越少。「推荐」在这里做特殊处理等同于不筛选这是蜗牛读书的交互习惯——推荐位是运营位不是真实分类。dataset.category的值来自 WXML 里>handleSearch(e) { const keyword e.detail.value.trim().toLowerCase(); if (!keyword) { this.setData({ bookList: this.data.allBooks }); return; } const result this.data.allBooks.filter(item { return item.title.toLowerCase().includes(keyword) || item.author.toLowerCase().includes(keyword); }); this.setData({ bookList: result }); }参数说明e.detail.value是输入框当前值trim()去掉首尾空格防止用户只敲空格时把列表清空toLowerCase()是为了匹配英文书名时大小写不敏感。匹配字段只有标题和作者不匹配分类和简介因为分类一般就几个固定词简介匹配容易命中无关书。如果源码里还匹配了desc字段建议删掉简介里带「历史」两个字就把所有书都搜出来了用户会以为搜索坏了。3.3 详情页 onLoad 接收 id组装按钮状态书城列表每一项点击后用wx.navigateTo跳详情页URL 上带书籍 id。详情页的onLoad从options里取出 id再从书籍数据里找到这本书。onLoad(options) { const bookData require(../../data/book.js); const shelf wx.getStorageSync(shelf) || []; const book bookData.find(item item.id options.id); if (!book) { wx.showToast({ title: 书籍不存在, icon: none }); return; } this.setData({ book, inShelf: shelf.some(item item.id options.id) }); }这里的shelf.some是判断当前书是否已在书架缓存里返回值决定底部按钮显示「加入书架」还是「开始阅读」。require在 Page 生命周期里执行没问题微信开发者工具会把它当作普通模块处理。注意book是一个对象引用直接放进setData是安全的因为后面不会对这本书做局部修改只做页面展示。如果截图上详情页有「加入书架」按钮但点完没有反馈最常见的原因是shelf里存的对象结构对不上比如源码里存的是{ bookId: id }而这里读的是item.id取出来永远是undefinedsome永远返回 false。这个问题的排查方法放在最后一章统一说。4. 阅读进度、字号切换与蜗牛式时长统计4.1 用 scroll-view 做纵向滚动翻页进度靠滚动高度算蜗牛读书的阅读器是纵向连续滚动和起点那种按页点击翻页不同。纵向滚动在微信小程序里最稳妥的实现是scroll-view设置scroll-y为 true内容区放整章文本然后用bindscroll监听滚动位置。进度百分比不靠章节数算而是靠滚动高度和总高度的比值。scroll-view scroll-y classreader-scroll bindscrollhandleScroll scroll-top{{scrollTop}} view classchapter-content stylefont-size: {{fontSize}}rpx; line-height: {{lineHeight}}rpx; view wx:for{{chapterList}} wx:keyindex{{item}}/view /view /scroll-viewhandleScroll(e) { const scrollTop e.detail.scrollTop; const query wx.createSelectorQuery(); query.select(.chapter-content).boundingClientRect(rect { const totalHeight rect.height; const viewportHeight this.data.viewportHeight; const maxScroll totalHeight - viewportHeight; const progress maxScroll 0 ? Math.min(100, Math.round(scrollTop / maxScroll * 100)) : 0; if (Math.abs(progress - this.data.progress) 1) { this.setData({ progress }); } }).exec(); }逻辑说明scrollTop是当前滚动距离totalHeight是整章内容的高度viewportHeight是可视区域高度两者相减得到最大可滚动距离。进度就是「当前滚动距离 / 最大可滚动距离」。Math.abs 1这个判断做了节流滚动过程中进度每变化超过 1% 才触发一次setData否则每帧都在更新进度条会卡顿。真实项目中这个查询每次滚动都执行性能上略重更优做法是用wx.createSelectorQuery().in(this)配合scroll-view的bindscroll节流但源码里写成这样也能跑初学者更容易看懂。4.2 字号设置用 rpx切换时同步调整行高阅读器页至少要有三档字号蜗牛原版的字号档位更多仿写时做三档就够了小、标准、大。这里的核心坑是不能只改font-size不改line-height否则字号变大行距被压缩阅读体验很差。源码里如果字号和行高是分开两个字段就要把档位表做成一组一组的数据结构。const FONT_LEVELS [ { label: 小, fontSize: 28, lineHeight: 44 }, { label: 标准, fontSize: 30, lineHeight: 48 }, { label: 大, fontSize: 32, lineHeight: 52 } ]; setFontLevel(e) { const index e.currentTarget.dataset.index; const level FONT_LEVELS[index]; this.setData({ fontSize: level.fontSize, lineHeight: level.lineHeight, fontLevelIndex: index }); }参数说明单位是 rpx不是 px。rpx 是微信小程序的响应式单位屏幕宽度固定 750rpx不同设备上会自动换算。例子里的 28rpx 在 375px 宽度的 iPhone 上约等于 14px这就是正文常用字号。行高用 44~52rpx保持 1.5 倍左右的舒适行距。如果你在源码里看到字号用 px 写死真机在全面屏上会显得特别小这就是为什么模拟器看着正常、到手机上字变小的原因。>onShow() { this.startTime Date.now(); } onHide() { if (this.startTime) { const elapsed Math.floor((Date.now() - this.startTime) / 1000); const total wx.getStorageSync(readSeconds) || 0; wx.setStorageSync(readSeconds, total elapsed); this.startTime 0; } }逻辑说明onShow在页面每次显示时触发包括从后台切回来onHide在页面隐藏时触发包括切到其他小程序、按 Home 键、跳转别的页面。startTime设为 0 是为了防止onHide重复累加——页面隐藏后如果没有重置下次onHide会再算一次时长就翻倍了。wx.getStorageSync(readSeconds)读取的是累计秒数展示时再转成「小时:分钟」格式。这个时长统计有一个天然缺陷用户挂着不动也算时间真实产品里要配合前台计时器和滚屏事件做但本地 demo 阶段没必要上那套复杂度。4.4 书架数据用 Storage 持久化跨页面自动同步书架是阅读类小程序的第二个核心数据。仿蜗牛读书的源码里书架页的数据源是wx.getStorageSync(shelf)每次从详情页加入书架都要先读缓存再写缓存。这里有个容易写错的点很多人直接wx.setStorageSync(shelf, newBook)把数组覆盖成了一个对象书架页一读就崩。addToShelf() { const shelf wx.getStorageSync(shelf) || []; const exists shelf.some(item item.id this.data.book.id); if (exists) { wx.showToast({ title: 已在书架中, icon: none }); return; } shelf.push({ id: this.data.book.id, time: Date.now() }); wx.setStorageSync(shelf, shelf); this.setData({ inShelf: true }); wx.showToast({ title: 已加入书架 }); }参数说明shelf数组里存的是对象而不是只存书籍 id 字符串。多存一个time字段可以在书架页做排序——按加入时间倒序新加的书排前面。Date.now()返回毫秒时间戳不是可读字符串书架页展示时再格式化。exists判断用的是item.id this.data.book.id保证同一本书不会重复加入。源码里如果书架存的是完整书籍对象也能跑但书籍数据更新后缓存里的旧对象不会跟着变所以我一般只存 id 和时间戳书籍信息到书架页再根据 id 从 book.json 里查。这个方案的边界是书籍的总量级在几十本以内时每次都全量读改写缓存没有性能问题如果以后接入后端、书架可能有几百本就要改成只更新变化的字段。5. 把源代码改成自己的 demo换书、换皮肤、验证持久化5.1 替换书籍数据先改 book.json 再改章节文件拿到源代码后最直接的做法是把data/book.json里的书籍换成你准备的公版书或自己写的文本。替换时注意保持结构一致每本书的 id 要唯一章节文件名必须和book.json里的关联方式对应。如果源码里阅读器页是通过require(../../data/chapters/ bookId .js)加载章节的那新增书的章节文件命名必须精确匹配。改完数据用微信开发者工具重新编译书城页如果能出现新书说明数据结构没破坏。此时截图里对应的应该是书城列表出现新书名列表封面可以先用一张本地占位图。5.2 阅读器背景三档切换用主题 map 一次 setData阅读器通常提供白色、米黄、夜间三种背景。源码里如果只有单一背景色可以自己加。定义一个主题映射表把背景色、文字色、状态栏颜色都放进去。setTheme(e) { const theme e.currentTarget.dataset.theme; const THEME_MAP { white: { bg: #ffffff, color: #333333 }, sepia: { bg: #f3e9d0, color: #5a4a3a }, dark: { bg: #1c1c1c, color: #9a9a9a } }; const config THEME_MAP[theme]; this.setData({ bgColor: config.bg, textColor: config.color }); wx.setNavigationBarColor({ frontColor: theme dark ? #ffffff : #000000, backgroundColor: config.bg }); }参数说明THEME_MAP的 key 对应 WXML 按钮上的style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" />