微信小程序制作高校课程表代码示例

2022-08-04 09:01 微信小程序 85 梁俊威

近期在做某高校的一个项目时,需要为上课的老师制作预约课程、场地等功能;这些功能必要会涉及到课程表的开发。废话不多说,直接开始整体思路。

Tips:本示例使用微信小程序进行讲解。

主要难点是后台数据的存储以及数据应该如何进行展示。

大学的课程,一大节课,会连续持续几小节,所以数据库中,每一节课存大节、还是小节,是个问题。

思考:全部存为大节,每大节两小节,把一天的时间分为五大节,可随之而来的问题就是,如果一节课持续三个小节,该怎么办?

于是,把思路改成存小节,把一节课分成10个小节,课这样有出现了问题:一大节是一个对象,如果存小节,就硬生生的把一个大节拆成了两个或三个对象。或许你认为这样也无伤大雅,但是,试想,一旦需要记录签到状况,三个小节是三个对象。这样,在第二节课的时候,第一节课的签到信息就失效了,如果再想看第二节课的签到信息,就需要重新签到,影响用户体验。

WXML代码:

<view class="controller">
</view>
<view class="course">
    <view class="term">
        <view class="term_info">
            <view class="term_name">2022-2023第一学期</view>
            <view class="week_current">第1周 08.29~09.04</view>
        </view>
        <div class="week_up">上一周</div>
        <div class="week_next">下一周</div>
    </view>
    <view class="week">
        <view class="week_item lh40">课时</view>
        <view class="week_item" wx:for="{{course}}" wx:for-index="k" wx:for-item="v">
            <view class="week_name">{{v.weekWhich}}</view>
            <view class="week_date">{{v.date}}</view>
        </view>
        <view class="clearfix"></view>
    </view>
    <view class="chapter">
        <view class="chapter_item chapter_head">
            <view class="chapter_li">1</view>
            <view class="chapter_li">2</view>
            <view class="chapter_li">3</view>
            <view class="chapter_li">4</view>
            <view class="chapter_li">5</view>
            <view class="chapter_li">6</view>
            <view class="chapter_li">7</view>
            <view class="chapter_li">8</view>
            <view class="chapter_li">9</view>
            <view class="chapter_li">10</view>
        </view>
        <view class="chapter_item" wx:for="{{course}}" wx:for-index="k" wx:for-item="v">
            <block wx:for="{{v.list}}" wx:for-index="key" wx:for-item="val">
            <!--判断当前课程是否存在持续多节,这里使用的是css根据节数进行高度的判断,如果是H5这里使用colspan跨列合并就可以了-->
            <view wx:if="{{val.chapter.length>0}}" class="chapter_li chapter_course chapter_li{{val.chapter.length}}">
                {{val.name}}
            </view>
            <view wx:else class="chapter_li"></view>
            </block>
        </view>
        
        <view class="clearfix"></view>
    </view>
</view>

JS代码

const app = getApp();
Page({
    data: {
        userInfo: null,
        storage_url: app.globalData.storage_url,
        examine: 1,
        // 后台获取当前默认周
        week:1,
        // 后台获取的所有周数据
        weekList:[
            {id:1, term:1, name:"第一周", 'start_time':"2022-08-29", 'end_time':"2022-09-04"},
            {id:2, term:1, name:"第二周", 'start_time':"2022-09-05", 'end_time':"2022-09-11"},
            {id:3, term:1, name:"第三周", 'start_time':"2022-09-12", 'end_time':"2022-09-18"},
        ],
        // 后台获取的课程数据,切换周需要重新调用
        // 因为课程表会涉及到多个小节合并成一个小节,数据库保留起始节数以及持续节数。避免前端在数据过多的处理,一般情况下,要要求后台的同事对数据进行处理。
        course:[
            {
                date:"08.29",
                weekWhich:"一",
                list:[
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:"汽车实验课(发动机)",
                        chapter:[2,3,4]
                    },
                    {
                        name:"实训课(变速箱)",
                        chapter:[5,6]
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                ]
            },
            {
                date:"08.30",
                weekWhich:"二",
                list:[
                    {
                        name:"测试课程",
                        chapter:[1,2]
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:"脑细胞怎么复活?",
                        chapter:[5,6]
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                ]
            },
            {
                date:"08.31",
                weekWhich:"三",
                list:[
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:"敲代码头发都敲白了",
                        chapter:[3,4]
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                ]
            },
            {
                date:"09.01",
                weekWhich:"四",
                list:[ 
                    {
                        name:"实训课1024",
                        chapter:[1,2,3]
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                ]
            },
            {
                date:"09.02",
                weekWhich:"五",
                list:[
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                ]
            },
            {
                date:"09.03",
                weekWhich:"六",
                list:[
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                ]
            },
            {
                date:"09.04",
                weekWhich:"日",
                list:[
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                    {
                        name:null,
                        chapter:null
                    },
                ]
            }
        ]
    },
    get: function (options) {
        wx.setNavigationBarTitle({
            title: '控制台',
        });
    },
    redirect: function (e) {
        var request = app.request(2, e);
        var moudle = request.moudle;
        var path = "";
        switch (moudle) {
        }
        wx.redirectTo({
            url: path,
        })
    },
    onLoad: function (options) {
        var that = this;
        var timer = setInterval(function () {
            var data = app.checkLogin();
            if (data) {
                clearInterval(timer);
                if (data.userInfo.state == 0) {
                    wx.redirectTo({
                        url: '/app/role/blacklist',
                    });
                }
                that.setData(data)
                that.get(options);
            }
        }, 30);
    },
})

WXSS文件:

view{
    box-sizing: border-box;
}

.term{
    width: 100%;
    background:#0080ff;
    height: 60px;
    position: relative;
}

.term_info{
    height: 60px;
}

.term_name{
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
}

.week{
    margin-bottom: 5px;
}

.week_current{
    color: #fff;
    text-align: center;
    font-size: 14px;
}

.week_up{
    position: absolute;
    width: auto;
    height: 50px;
    line-height: 50px;
    left: 10px;
    top: 0;
    color: #fff;
}

.week_next{
    position: absolute;
    width: auto;
    height: 50px;
    line-height: 50px;
    right: 10px;
    top: 0;
    color: #fff;
}

.week{
    background:#0080ff;
    height: 40px;
}

.week_item{
    width: 12.5%;
    float: left;
    text-align:center;
    color:#fff;
}

.lh40{
    line-height: 40px;
}

.week_date{
    font-size: 12px;
}

.chapter{
}

.chapter_item{
    width: 12.5%;
    height: auto;
    float: left;
    border-bottom: 1px solid #f1f1f1;
}

.chapter_li{
    width: 100%;
    height: 100px;
    vertical-align: auto;
    text-align: center;
}

.chapter_li2{
    height: 200px;
}

.chapter_li3{
    height: 300px;
}

.chapter_li4{
    height: 400px;
}

.chapter_li5{
    height: 500px;
}

.chapter_li6{
    height: 600px;
}

.chapter_li7{
    height: 700px;
}

.chapter_li8{
    height: 800px;
}

.chapter_li9{
    height: 900px;
}

.chapter_li10{
    height: 1000px;
}

.chapter_course{
    background-color: #0080ff;
    font-size: 12px;
    color: #fff;
    padding: 5px 0;
    border-radius: 5px;
}

.chapter_head{
    background-color: #f5f5f5;
}

.chapter_head .chapter_li{
    line-height: 100px;
}

.chapter_item:nth-child(n+2){
    border-left: 1px solid #f1f1f1;
}

.chapter_li:nth-child(n+2){
    border-top: 1px solid #f1f1f1;
}

其实课程表对于小白而言,难度是存在的,实现的方式也可能花样百出,这里用最简单的方式去介绍为大家开拓点思路。

若无特殊说明,本站点所有内容均为原创,转载请说明出处!

原文链接:https://www.ljwei.com.cn/read/377.html

QQ客服

QQ客服

微信客服

微信客服

微信客服二维码
意见反馈

意见反馈

一键置顶