做一个课程表小程序：微信里就能用

为什么要做课程表小程序？

大学生每学期都要记课程表。纸质的容易丢，拍照的不方便查看。如果有一个微信小程序，打开微信就能看课程表，是不是很方便？

今天就教你做一个。

准备工作

项目结构

创建新项目后，你会看到几个文件夹。我们主要改 pages 文件夹里的内容。

小程序的每个页面由4个文件组成：

做课程表页面

打开 pages/index/index.wxml，写入页面结构：

我的课程表

时间
{{item}}


{{item.time}}
wx:key="*this" style="background:{{course.color}}">
{{course.name}}
{{course.room}}

打开 pages/index/index.wxss，写样式代码让课程表好看：

.container { padding: 10px; }
.header {
text-align: center;
font-size: 20px;
font-weight: bold;
padding: 15px;
}
.week-bar { display: flex; background: #4a90d9; color: white; }
.week-bar .day { flex: 1; text-align: center; padding: 8px 0; font-size: 13px; }
.time-slot { width: 50px; text-align: center; padding: 8px 2px; font-size: 11px; }
.row { display: flex; border-bottom: 1px solid #eee; }
.cell {
flex: 1;
min-height: 60px;
padding: 3px;
font-size: 11px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-right: 1px solid #eee;
}
.room { font-size: 10px; color: #666; margin-top: 2px; }

打开 pages/index/index.js，写数据和逻辑：

Page({
data: {
days: ['周一','周二','周三','周四','周五'],
timeSlots: [
{
time: '8:00',
courses: [
{name:'高数', room:'A101', color:'#e8f5e9'},
{name:'', room:'', color:''},
{name:'英语', room:'B203', color:'#e3f2fd'},
{name:'', room:'', color:''},
{name:'高数', room:'A101', color:'#e8f5e9'}
]
},
{
time: '10:00',
courses: [
{name:'', room:'', color:''},
{name:'物理', room:'C305', color:'#fff3e0'},
{name:'', room:'', color:''},
{name:'编程', room:'D102', color:'#fce4ec'},
{name:'', room:'', color:''}
]
},
{
time: '14:00',
courses: [
{name:'体育', room:'操场', color:'#f3e5f5'},
{name:'', room:'', color:''},
{name:'物理', room:'C305', color:'#fff3e0'},
{name:'', room:'', color:''},
{name:'英语', room:'B203', color:'#e3f2fd'}
]
}
]
}
})

预览和发布

在开发者工具里点「编译」，就能在模拟器里看到效果了。一个简洁的课程表会展示在屏幕上，不同课程有不同的颜色背景。

想分享给同学用？点「上传」提交审核，审核通过后就能在微信里搜到了。

可以继续加的功能

这些功能都可以让AI帮你写代码，把现有代码发给AI说明你要什么功能就行。