简介这份资源是面向微信小程序初学者与前端练手者的原生课程表项目源码基于微信小程序原生框架实现可帮助读者快速理解并搭建一个查看、管理每周课程安排的应用适合学生、教师及想通过完整小项目巩固基础的前端学习者。压缩包为rar格式共12个文件约8KB其中5个json用于项目与页面配置4个js承担数据逻辑与交互2个wxss负责样式布局1个wxml定义页面结构整体轻量、结构清晰。目前已有811人学习下载。项目覆盖开发环境搭建、WXML条件与循环渲染、WXSS盒模型与Flex布局、data数据绑定、bindtap事件、wx.showModal弹窗、本地存储持久化、页面生命周期及响应式适配等知识点读者可据此掌握课程卡片展示、点击查看详情、数据缓存与状态维护等实现思路并借鉴调试发布与体验优化经验将所学迁移到其他小程序项目中。1. 从“手动排课表”到原生小程序一份能直接跑起来的课程表源码每到开学季总有人问我有没有那种不依赖后端、不折腾服务器、打开微信就能看的课程表尤其是做校园工具类开发的同学经常卡在“数据存哪、怎么离线、怎么同步”这三个问题上。这份“微信小程序原生课程表”源码包就是冲着这个场景来的——它用原生小程序框架写了一套完整的课表展示与本地存储逻辑没有云开发依赖没有第三方 UI 库拿到手改改配置就能跑。适合谁一是刚接触小程序、想找一个真实可运行项目练手的新手二是需要快速给班级或社团做一个轻量课表工具的开发者。它解决的核心问题很具体把“周次、节次、课程名、地点、教师”这五类信息用本地缓存 页面渲染的方式管起来不碰后端也能用。2. 原生小程序课程表的结构拆解页面、数据与渲染链路2.1 为什么选原生而不是跨端框架这份源码最值得先看的地方是它没有引入任何跨端方案。原生小程序的Page生命周期、setData更新机制、wx.setStorageSync本地存储在这份课表里被用得很直白。好处是调试链路短——你在开发者工具里改一行data模拟器立刻刷新不用等编译层转换。另一个现实原因是体积原生包体小加载快对课表这种“打开就看”的工具来说首屏速度比框架统一性更重要。常见做法是如果课表只跑在微信端原生足够一旦要同时上支付宝或抖音小程序才考虑跨端。这份源码的定位很清晰单端、轻量、可读性优先。2.2 目录结构与关键文件职责拿到源码后先别急着改代码把目录扫一遍。典型结构如下├── app.js # 全局逻辑初始化本地存储 ├── app.json # 页面路径、窗口样式、tabBar 配置 ├── app.wxss # 全局样式课表网格基础变量 ├── pages/ │ ├── index/ # 课表主页面 │ │ ├── index.js # 周次切换、课程数据组装 │ │ ├── index.wxml # 网格布局与课程卡片渲染 │ │ └── index.wxss # 课表单元格样式 │ └── edit/ # 课程编辑页 │ ├── edit.js # 表单提交、本地存储写入 │ └── edit.wxml └── utils/ └── storage.js # 封装读写缓存统一 key 管理app.js里一般会做一次“首次启动检查”如果本地没有课表数据就写入一个空数组或默认周次配置。utils/storage.js是这份源码里最值得复用的部分它把wx.getStorageSync和wx.setStorageSync包了一层避免每个页面都写重复的 key 字符串。我一般会先看这个文件因为它决定了数据怎么存、怎么取、怎么清。2.3 课表网格的渲染逻辑课表页面的核心是“周次 × 节次”的二维网格。源码里通常用两层wx:for嵌套外层遍历节次比如 1 到 12 节内层遍历星期周一到周日。每个单元格根据当前周次去匹配课程数据。关键代码片段如下// pages/index/index.js Page({ data: { currentWeek: 1, // 当前周次默认第 1 周 sections: 12, // 每天节次数 weekDays: [一, 二, 三, 四, 五, 六, 日], courseMap: {} // 以 周次-星期-节次 为 key 的课程索引 }, onLoad() { this.buildCourseMap(); }, // 把课程数组转成 map避免渲染时反复遍历 buildCourseMap() { const raw wx.getStorageSync(courseList) || []; const map {}; raw.forEach(item { // item.weeks 是数组比如 [1,2,3,4,5] item.weeks.forEach(w { const key ${w}-${item.day}-${item.section}; map[key] item; }); }); this.setData({ courseMap: map }); }, // 切换周次时只更新 currentWeekwxml 里自动重新匹配 switchWeek(e) { const delta Number(e.currentTarget.dataset.delta); const next this.data.currentWeek delta; if (next 1 || next 20) return; // 假设最多 20 周 this.setData({ currentWeek: next }); } });逻辑说明buildCourseMap把扁平的课程数组转成以“周次-星期-节次”为 key 的对象。这样在 WXML 里渲染每个单元格时只需要用courseMap[currentWeek - day - section]就能拿到课程不用在模板里写复杂判断。参数说明currentWeek控制当前显示哪一周sections决定每天渲染多少行weeks数组决定一门课出现在哪些周。注意setData只更新currentWeek不重建整个 map这是性能上的常见优化。2.4 本地存储的读写与边界处理编辑页提交后数据要写回本地。源码里通常这样处理// pages/edit/edit.js const storage require(../../utils/storage.js); Page({ data: { form: { name: , day: 1, section: 1, weeks: [], location: } }, onSubmit() { const { form } this.data; if (!form.name || form.weeks.length 0) { wx.showToast({ title: 课程名和周次不能为空, icon: none }); return; } const list storage.get(courseList) || []; list.push({ ...form, id: Date.now() }); storage.set(courseList, list); wx.navigateBack(); } });逻辑说明提交前先做非空校验避免写入脏数据。id用时间戳生成简单但够用。参数说明weeks是数组对应第几周有课day是 1 到 7section是节次序号。注意storage.set内部一般会做try/catch因为本地存储有 10MB 上限课表数据虽然小但养成异常捕获习惯没坏处。3. 从零跑通课程表环境、配置与真机调试步骤3.1 开发者工具导入与基础配置先把源码包解压到一个没有中文和空格的路径下。打开微信开发者工具选择“导入项目”目录指向解压后的根目录。AppID 如果没有可以选“测试号”但测试号无法真机预览只能模拟器跑。项目名称随意填。导入后工具会自动识别app.json里的页面路径。如果报“未找到 app.json”说明目录选错了要选到包含app.json的那一层。基础配置检查三处app.json里的pages数组第一项必须是pages/index/index否则启动页不对window里的navigationBarTitleText改成你想要的标题tabBar如果源码里有确认list中的pagePath和实际文件路径一致。常见翻车点是 tabBar 图标路径写错工具会直接报错但错误提示不一定指向图标而是说“tabBar 配置错误”这时候优先检查iconPath和selectedIconPath。3.2 周次与节次参数怎么改课表默认 20 周、每天 12 节这两个数字在index.js的data里。改的时候注意联动如果sections改成 10WXML 里的循环也要同步否则会渲染出空行。周次上限在switchWeek里硬编码了20如果学校是 18 周改成 18 即可。另外weeks数组在编辑页是手动勾选的如果嫌麻烦可以加一个“全选”按钮逻辑就是this.setData({ form.weeks: [1,2,...,20] })。提示改完参数后先点“编译”看模拟器再点“预览”扫码真机看。模拟器字体和真机有差异课表单元格在真机上可能换行提前留好min-height。3.3 真机调试与缓存清理真机调试时本地存储是跟着微信账号走的。如果你在模拟器里存了数据真机上不会同步这是正常的。反过来真机上清缓存要在“微信 - 我 - 设置 - 通用 - 存储空间”里清或者在小程序里加一个“重置课表”按钮调用wx.clearStorageSync()。我一般会在utils/storage.js里留一个clear方法方便调试。另外真机上setData的数据量如果超过 1MB会卡顿甚至失败课表数据通常远小于这个值但如果你把整学期课程都塞进一个数组还是注意一下。4. 避坑与排查课程表开发里最容易翻车的五件事4.1 现象切换周次后课程不更新原因courseMap只在onLoad里构建了一次切换周次时没有重新计算WXML 里绑定的还是旧 map。解决把buildCourseMap抽出来在switchWeek里setData之后调用一次或者直接在 WXML 里用courseMap[currentWeek - day - section]做动态取值前提是 map 的 key 包含了所有周次。4.2 现象编辑页保存后返回课表没变化原因课表页的onShow没有重新读取本地存储。小程序的页面返回不会触发onLoad只会触发onShow。解决把数据读取逻辑放在onShow里或者在编辑页保存后调用wx.navigateBack之前通过getCurrentPages拿到上一页实例手动调它的刷新方法。更稳妥的做法是统一在onShow里buildCourseMap。4.3 现象课程卡片文字溢出或错位原因WXML 里用了固定宽度但课程名长度不一。解决给课程名加overflow: hidden; text-overflow: ellipsis; white-space: nowrap;或者用-webkit-line-clamp做两行截断。另外课表网格如果用flex布局注意flex-shrink默认是 1单元格会被压缩改成flex-shrink: 0并配合overflow-x: auto做横向滚动。4.4 现象真机上本地存储读不到原因wx.getStorageSync在真机上如果 key 不存在返回空字符串而不是null代码里用|| []兜底时空字符串会被当成 falsy没问题但如果用if (data null)判断就会漏。解决统一用const list wx.getStorageSync(courseList) || []并且写入时确保是数组。另外真机上存储是异步落盘的连续快速写入可能丢数据编辑页提交后不要立刻navigateBack加一个wx.showToast的success回调再返回。4.5 现象模拟器正常真机白屏原因多半是app.json里用了模拟器支持但真机不支持的配置比如某些window属性或tabBar的position值。解决把app.json精简到最小可用配置逐步加回定位是哪一项。另一个常见原因是wxss里用了本地图片路径但没放到static目录真机上路径解析失败。课表源码一般不带图片但如果你自己加了背景图注意用网络地址或 base64。5. 进阶技巧把课表数据导出成 JSON 并做周次提醒跑通基础功能后我习惯做两件事一是把本地存储的课表导出成 JSON方便备份或迁移到其他设备二是加一个“下周有课提醒”的简单逻辑。导出功能不需要后端用wx.getStorageSync拿到数据JSON.stringify之后通过wx.setClipboardData复制到剪贴板用户自己粘贴保存。代码很短// 导出课表到剪贴板 exportCourse() { const list wx.getStorageSync(courseList) || []; if (list.length 0) { wx.showToast({ title: 课表为空, icon: none }); return; } const json JSON.stringify(list, null, 2); wx.setClipboardData({ data: json, success: () wx.showToast({ title: 已复制到剪贴板, icon: success }) }); }参数说明JSON.stringify的第三个参数2是缩进空格数方便阅读。wx.setClipboardData在真机上会弹系统提示模拟器上直接复制。导入功能反过来用wx.getClipboardData读剪贴板JSON.parse后校验字段再写入存储。注意导入前最好清空旧数据或做去重否则同一门课会重复。周次提醒的思路更简单在app.js的onLaunch里计算当前日期属于第几周然后遍历courseList找出weeks包含下一周且day等于明天的课程用wx.showModal弹一个提示。计算周次需要知道开学日期这个日期让用户在设置页填一次存本地。我一般会把这个逻辑写成utils/week.js输入开学日期和当前日期输出周次序号。注意跨年学期要处理年份变化别用getFullYear直接减用时间戳差值除以 7 天更稳。从那以后我每次拿到类似的小程序源码都先跑一遍“导出-清空-导入”的闭环确认数据链路没有暗坑再动 UI。希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/14 0:34:12 · 阅读 1.2k 微信小程序原生课程表源码：本地存储与离线渲染实战
简介这份资源是面向微信小程序初学者与前端练手者的原生课程表项目源码基于微信小程序原生框架实现可帮助读者快速理解并搭建一个查看、管理每周课程安排的应用适合学生、教师及想通过完整小项目巩固基础的前端学习者。压缩包为rar格式共12个文件约8KB其中5个json用于项目与页面配置4个js承担数据逻辑与交互2个wxss负责样式布局1个wxml定义页面结构整体轻量、结构清晰。目前已有811人学习下载。项目覆盖开发环境搭建、WXML条件与循环渲染、WXSS盒模型与Flex布局、data数据绑定、bindtap事件、wx.showModal弹窗、本地存储持久化、页面生命周期及响应式适配等知识点读者可据此掌握课程卡片展示、点击查看详情、数据缓存与状态维护等实现思路并借鉴调试发布与体验优化经验将所学迁移到其他小程序项目中。1. 从“手动排课表”到原生小程序一份能直接跑起来的课程表源码每到开学季总有人问我有没有那种不依赖后端、不折腾服务器、打开微信就能看的课程表尤其是做校园工具类开发的同学经常卡在“数据存哪、怎么离线、怎么同步”这三个问题上。这份“微信小程序原生课程表”源码包就是冲着这个场景来的——它用原生小程序框架写了一套完整的课表展示与本地存储逻辑没有云开发依赖没有第三方 UI 库拿到手改改配置就能跑。适合谁一是刚接触小程序、想找一个真实可运行项目练手的新手二是需要快速给班级或社团做一个轻量课表工具的开发者。它解决的核心问题很具体把“周次、节次、课程名、地点、教师”这五类信息用本地缓存 页面渲染的方式管起来不碰后端也能用。2. 原生小程序课程表的结构拆解页面、数据与渲染链路2.1 为什么选原生而不是跨端框架这份源码最值得先看的地方是它没有引入任何跨端方案。原生小程序的Page生命周期、setData更新机制、wx.setStorageSync本地存储在这份课表里被用得很直白。好处是调试链路短——你在开发者工具里改一行data模拟器立刻刷新不用等编译层转换。另一个现实原因是体积原生包体小加载快对课表这种“打开就看”的工具来说首屏速度比框架统一性更重要。常见做法是如果课表只跑在微信端原生足够一旦要同时上支付宝或抖音小程序才考虑跨端。这份源码的定位很清晰单端、轻量、可读性优先。2.2 目录结构与关键文件职责拿到源码后先别急着改代码把目录扫一遍。典型结构如下├── app.js # 全局逻辑初始化本地存储 ├── app.json # 页面路径、窗口样式、tabBar 配置 ├── app.wxss # 全局样式课表网格基础变量 ├── pages/ │ ├── index/ # 课表主页面 │ │ ├── index.js # 周次切换、课程数据组装 │ │ ├── index.wxml # 网格布局与课程卡片渲染 │ │ └── index.wxss # 课表单元格样式 │ └── edit/ # 课程编辑页 │ ├── edit.js # 表单提交、本地存储写入 │ └── edit.wxml └── utils/ └── storage.js # 封装读写缓存统一 key 管理app.js里一般会做一次“首次启动检查”如果本地没有课表数据就写入一个空数组或默认周次配置。utils/storage.js是这份源码里最值得复用的部分它把wx.getStorageSync和wx.setStorageSync包了一层避免每个页面都写重复的 key 字符串。我一般会先看这个文件因为它决定了数据怎么存、怎么取、怎么清。2.3 课表网格的渲染逻辑课表页面的核心是“周次 × 节次”的二维网格。源码里通常用两层wx:for嵌套外层遍历节次比如 1 到 12 节内层遍历星期周一到周日。每个单元格根据当前周次去匹配课程数据。关键代码片段如下// pages/index/index.js Page({ data: { currentWeek: 1, // 当前周次默认第 1 周 sections: 12, // 每天节次数 weekDays: [一, 二, 三, 四, 五, 六, 日], courseMap: {} // 以 周次-星期-节次 为 key 的课程索引 }, onLoad() { this.buildCourseMap(); }, // 把课程数组转成 map避免渲染时反复遍历 buildCourseMap() { const raw wx.getStorageSync(courseList) || []; const map {}; raw.forEach(item { // item.weeks 是数组比如 [1,2,3,4,5] item.weeks.forEach(w { const key ${w}-${item.day}-${item.section}; map[key] item; }); }); this.setData({ courseMap: map }); }, // 切换周次时只更新 currentWeekwxml 里自动重新匹配 switchWeek(e) { const delta Number(e.currentTarget.dataset.delta); const next this.data.currentWeek delta; if (next 1 || next 20) return; // 假设最多 20 周 this.setData({ currentWeek: next }); } });逻辑说明buildCourseMap把扁平的课程数组转成以“周次-星期-节次”为 key 的对象。这样在 WXML 里渲染每个单元格时只需要用courseMap[currentWeek - day - section]就能拿到课程不用在模板里写复杂判断。参数说明currentWeek控制当前显示哪一周sections决定每天渲染多少行weeks数组决定一门课出现在哪些周。注意setData只更新currentWeek不重建整个 map这是性能上的常见优化。2.4 本地存储的读写与边界处理编辑页提交后数据要写回本地。源码里通常这样处理// pages/edit/edit.js const storage require(../../utils/storage.js); Page({ data: { form: { name: , day: 1, section: 1, weeks: [], location: } }, onSubmit() { const { form } this.data; if (!form.name || form.weeks.length 0) { wx.showToast({ title: 课程名和周次不能为空, icon: none }); return; } const list storage.get(courseList) || []; list.push({ ...form, id: Date.now() }); storage.set(courseList, list); wx.navigateBack(); } });逻辑说明提交前先做非空校验避免写入脏数据。id用时间戳生成简单但够用。参数说明weeks是数组对应第几周有课day是 1 到 7section是节次序号。注意storage.set内部一般会做try/catch因为本地存储有 10MB 上限课表数据虽然小但养成异常捕获习惯没坏处。3. 从零跑通课程表环境、配置与真机调试步骤3.1 开发者工具导入与基础配置先把源码包解压到一个没有中文和空格的路径下。打开微信开发者工具选择“导入项目”目录指向解压后的根目录。AppID 如果没有可以选“测试号”但测试号无法真机预览只能模拟器跑。项目名称随意填。导入后工具会自动识别app.json里的页面路径。如果报“未找到 app.json”说明目录选错了要选到包含app.json的那一层。基础配置检查三处app.json里的pages数组第一项必须是pages/index/index否则启动页不对window里的navigationBarTitleText改成你想要的标题tabBar如果源码里有确认list中的pagePath和实际文件路径一致。常见翻车点是 tabBar 图标路径写错工具会直接报错但错误提示不一定指向图标而是说“tabBar 配置错误”这时候优先检查iconPath和selectedIconPath。3.2 周次与节次参数怎么改课表默认 20 周、每天 12 节这两个数字在index.js的data里。改的时候注意联动如果sections改成 10WXML 里的循环也要同步否则会渲染出空行。周次上限在switchWeek里硬编码了20如果学校是 18 周改成 18 即可。另外weeks数组在编辑页是手动勾选的如果嫌麻烦可以加一个“全选”按钮逻辑就是this.setData({ form.weeks: [1,2,...,20] })。提示改完参数后先点“编译”看模拟器再点“预览”扫码真机看。模拟器字体和真机有差异课表单元格在真机上可能换行提前留好min-height。3.3 真机调试与缓存清理真机调试时本地存储是跟着微信账号走的。如果你在模拟器里存了数据真机上不会同步这是正常的。反过来真机上清缓存要在“微信 - 我 - 设置 - 通用 - 存储空间”里清或者在小程序里加一个“重置课表”按钮调用wx.clearStorageSync()。我一般会在utils/storage.js里留一个clear方法方便调试。另外真机上setData的数据量如果超过 1MB会卡顿甚至失败课表数据通常远小于这个值但如果你把整学期课程都塞进一个数组还是注意一下。4. 避坑与排查课程表开发里最容易翻车的五件事4.1 现象切换周次后课程不更新原因courseMap只在onLoad里构建了一次切换周次时没有重新计算WXML 里绑定的还是旧 map。解决把buildCourseMap抽出来在switchWeek里setData之后调用一次或者直接在 WXML 里用courseMap[currentWeek - day - section]做动态取值前提是 map 的 key 包含了所有周次。4.2 现象编辑页保存后返回课表没变化原因课表页的onShow没有重新读取本地存储。小程序的页面返回不会触发onLoad只会触发onShow。解决把数据读取逻辑放在onShow里或者在编辑页保存后调用wx.navigateBack之前通过getCurrentPages拿到上一页实例手动调它的刷新方法。更稳妥的做法是统一在onShow里buildCourseMap。4.3 现象课程卡片文字溢出或错位原因WXML 里用了固定宽度但课程名长度不一。解决给课程名加overflow: hidden; text-overflow: ellipsis; white-space: nowrap;或者用-webkit-line-clamp做两行截断。另外课表网格如果用flex布局注意flex-shrink默认是 1单元格会被压缩改成flex-shrink: 0并配合overflow-x: auto做横向滚动。4.4 现象真机上本地存储读不到原因wx.getStorageSync在真机上如果 key 不存在返回空字符串而不是null代码里用|| []兜底时空字符串会被当成 falsy没问题但如果用if (data null)判断就会漏。解决统一用const list wx.getStorageSync(courseList) || []并且写入时确保是数组。另外真机上存储是异步落盘的连续快速写入可能丢数据编辑页提交后不要立刻navigateBack加一个wx.showToast的success回调再返回。4.5 现象模拟器正常真机白屏原因多半是app.json里用了模拟器支持但真机不支持的配置比如某些window属性或tabBar的position值。解决把app.json精简到最小可用配置逐步加回定位是哪一项。另一个常见原因是wxss里用了本地图片路径但没放到static目录真机上路径解析失败。课表源码一般不带图片但如果你自己加了背景图注意用网络地址或 base64。5. 进阶技巧把课表数据导出成 JSON 并做周次提醒跑通基础功能后我习惯做两件事一是把本地存储的课表导出成 JSON方便备份或迁移到其他设备二是加一个“下周有课提醒”的简单逻辑。导出功能不需要后端用wx.getStorageSync拿到数据JSON.stringify之后通过wx.setClipboardData复制到剪贴板用户自己粘贴保存。代码很短// 导出课表到剪贴板 exportCourse() { const list wx.getStorageSync(courseList) || []; if (list.length 0) { wx.showToast({ title: 课表为空, icon: none }); return; } const json JSON.stringify(list, null, 2); wx.setClipboardData({ data: json, success: () wx.showToast({ title: 已复制到剪贴板, icon: success }) }); }参数说明JSON.stringify的第三个参数2是缩进空格数方便阅读。wx.setClipboardData在真机上会弹系统提示模拟器上直接复制。导入功能反过来用wx.getClipboardData读剪贴板JSON.parse后校验字段再写入存储。注意导入前最好清空旧数据或做去重否则同一门课会重复。周次提醒的思路更简单在app.js的onLaunch里计算当前日期属于第几周然后遍历courseList找出weeks包含下一周且day等于明天的课程用wx.showModal弹一个提示。计算周次需要知道开学日期这个日期让用户在设置页填一次存本地。我一般会把这个逻辑写成utils/week.js输入开学日期和当前日期输出周次序号。注意跨年学期要处理年份变化别用getFullYear直接减用时间戳差值除以 7 天更稳。从那以后我每次拿到类似的小程序源码都先跑一遍“导出-清空-导入”的闭环确认数据链路没有暗坑再动 UI。希望帮到你。本文还有配套的精品资源点击获取