uniapp 课程表
使用 UniApp 开发课程表应用
页面结构与布局
创建一个课程表页面，通常采用网格布局展示每周课程。可使用 uni-grid 组件或自定义 flex 布局实现。
示例布局代码
<template>
<view class="timetable">
<view class="header">
<view v-for="(day, index) in days" :key="index">{{ day }}</view>
</view>
<view class="body">
<view v-for="(course, i) in courses" :key="i" class="course">
{{ course.name }}<br>{{ course.time }}
</view>
</view>
</view>
</template>数据绑定与动态渲染
课程数据通常存储在 data 中，通过 v-for 动态渲染。
示例数据与样式
export default {
data() {
return {
days: ['周一', '周二', '周三', '周四', '周五'],
courses: [
{ name: '数学', time: '8:00-9:40' },
{ name: '英语', time: '10:00-11:40' }
]
}
}
}.timetable {
display: flex;
flex-direction: column;
}
.header, .body {
display: flex;
justify-content: space-around;
}
.course {
border: 1px solid #eee;
padding: 10px;
margin: 5px;
}数据持久化
使用 uni.setStorageSync 保存课程数据，避免每次打开应用重新输入。
保存与读取数据
// 保存课程表
saveCourses() {
uni.setStorageSync('courses', this.courses);
}
// 读取课程表
onLoad() {
const saved = uni.getStorageSync('courses');
if (saved) this.courses = saved;
}交互功能增强
- 添加课程：通过表单弹窗或新页面实现课程添加功能。
- 拖拽调整：引入第三方库（如
sortablejs）实现课程顺序调整。
示例添加课程方法
methods: {
addCourse() {
this.courses.push({ name: '新课程', time: '未设置' });
this.saveCourses();
}
}多端适配
UniApp 支持编译到微信小程序、H5 等平台，需测试不同平台的样式兼容性。通过条件编译调整布局差异。
平台特定代码
// #ifdef H5
console.log('仅在H5平台生效');
// #endif通过以上步骤，可快速实现一个功能完整的 UniApp 课程表应用。
