上次做了一個課程表小程序并開源了代碼，但總感覺周課表不大方便
有時候早上睡醒了都不知道現在是周幾
還不知道今天有沒有課，痛定思痛 決定加上今日課表的功能

特性（底部附開源地址）： 1、超簡約，僅顯示今天上課的課程
2、三種上課狀態：已結束、正在上課、即將開始
3、準確顯示課程上課時間，不再錯過精彩課程

先放一個沒有課的界面

添加課程表之后的界面

怎么樣效果不錯吧

.js代碼 /* eslint-disable no-undef */ // +---------------------------------------------------------------------- // | 本插件基于GPL-3.0開源協議 // +---------------------------------------------------------------------- // | Copyright (c) 2020~2021 https://www.lianshoulab.com/ All rights reserved. // +---------------------------------------------------------------------- // | Licensed ( https://www.gnu.org/licenses/gpl-3.0.html ) // +---------------------------------------------------------------------- // | Author: liutu <17053613@qq.com> // +---------------------------------------------------------------------- //index.js import config from "../../config"; import {serializePathQuery } from "../../utils/api/http"; import {couplesMsgList,couplesInfoAdd,couplesInfoDel,couplesAdd, } from "../../utils/api/user"; import {wxShowToast,wxShowMaskLoading } from "../../utils/promisify"; import dayjs from "../../utils/dayjs/dayjs.min";//獲取應用實例 const app = getApp(); Page({data: {StatusBar: app.globalData.StatusBar,CustomBar: app.globalData.CustomBar,displayArea: app.globalData.displayArea,ImgUrl: app.globalData.ImgUrl,colorList: config.colorList, // 色彩列表userInfo: null, //用戶數據newMessage: false, // 給情侶發消息messageValue: "", //消息輸入框的值editMessage: false, // 編輯信息sendTime: "現在", // 信息發送時間classTime: null, //上課時間showAllMsg: false, // 顯示所有信息message: null, // 我收到的消息messageList: [], // 我要發送的消息列表editMessageId: null, // 正在編輯的信息的IDScheduleId: 0, // 自己(0) & 情侶(1)課表切換courseInfo: null, //課表信息loginTimesDescribed: "", //登錄次數描述},/*** 計算課程表是否符合當前周* @param {*} week 顯示周* @param {*} userInfo 數據*/weekCourseInfo(week, userInfo) {if (!userInfo) {return null;} else {let courseInfo = userInfo.map((v) => {let attend = v.attend.split(",").filter((e) => e == week);if (attend[0]) {return v;}}).filter((v) => v);return courseInfo.length > 0 ? courseInfo : [];}},/*** 處理當天課程信息*/courseInfoSet(info, classTime = wx.getStorageSync("classTime")) {if (!(typeof info === "string" && info && classTime)) {return null;}let _info = JSON.parse(info);// 獲取當前周let week = wx.getStorageSync("currentWeek");// 篩選當周_info = this.weekCourseInfo(week, _info);if (_info.length == 0) {// 如果本周沒有課程就 return掉return null;}// 篩選當天let today = dayjs().day() ? dayjs().day() : 7;_info = _info.filter((v) => v.days == today);if (_info.length == 0) {// 如果今天沒有課程就 return掉return null;}console.log(today, _info, classTime, "info");// 對比時間let checkdate = (t1, t2) => {let t11 = t1.split(":");let t21 = t2.split(":");let sj1 = parseInt(t11[0] * 12 + t11[1]);let sj2 = parseInt(t21[0] * 12 + t21[1]);return sj1 > sj2 ? false : true;};// 計算課程狀態let Remind = (data) => {let now = dayjs().format("HH:mm");let tipEvent = dayjs().subtract(30, "minute").format("HH:mm");let stime = classTime[data.nums - 1].s_time;let etime = classTime[data.enum - 1].e_time;if (checkdate(etime, now)) {return 3; // 已結束} else if (checkdate(stime, now)) {return 2; // 進行中} else if (!checkdate(stime, tipEvent)) {return 1; // 即將開始} else {return 0; //不顯示}};let courseTime = (data) => {let stime = classTime[data.nums - 1].s_time;let etime = classTime[data.enum - 1].e_time;return `${stime}-${etime}`;};let courseInfo = _info.map((v) => {return {courseTime: courseTime(v),courseRemind: Remind(v), // 0,1,2,3分別代表不顯示,即將開始,進行中,已結束sname: v.sname,classroom: v.classroom,};});console.log(courseInfo);return courseInfo;},// 初始化用戶信息initUserInfo(userInfo) {console.warn(userInfo, "getInfogetInfogetInfo");let courseInfo = this.courseInfoSet(userInfo.my_course_info,JSON.parse(userInfo.class_time));let loverCourse = this.courseInfoSet(userInfo.lover_course_info,JSON.parse(userInfo.class_time));let tid = userInfo.lovers_id; // 獲取情侶idlet message = null;let couplesBG = null;if (userInfo.loversinfo && userInfo.loversinfo.length > 0) {message = userInfo.loversinfo.filter((v) => v.love_sort == "0")[0];couplesBG = userInfo.loversinfo.filter((v) => v.love_sort == "1")[0];}userInfo.courseInfo = userInfo.my_course_info ?JSON.parse(userInfo.my_course_info) :null;userInfo.loverCourseInfo = userInfo.lover_course_info ?JSON.parse(userInfo.lover_course_info) :null;if (message) {message.time = dayjs.unix(message.starttime).format("MM月DD日 HH:mm");}this.setData({userInfo: userInfo,haveCouple: tid,courseInfo,loverCourse,message: message ? message : null,couplesBG: couplesBG ? couplesBG : null,});if (tid) {this.getMessage(tid);}},/*** 顯示所有信息*/showAllMsg() {let {showAllMsg} = this.data;showAllMsg = !showAllMsg;this.setData({showAllMsg,});},/*** 登錄次數描述處理* @param {*} number 登錄次數* @return {*}*/loginTime(number = 0) {let loginTimesDescribed = ''if (number <= 1) {loginTimesDescribed = '千里之行，始于足下'} else if (number == 2) {loginTimesDescribed = "砥礪前行，不負韶華"} else if (number <= 4) {loginTimesDescribed = "業精于勤荒于嬉"} else if (number <= 6) {loginTimesDescribed = "知識永遠戰勝愚昧"} else {loginTimesDescribed = "少之好學如日出之陽"}this.setData({loginTimesDescribed,})},

.wxml代碼

<!-- * @Author: EvilStorm* @Date: 2020-10-26 10:44:42* @LastEditTime: 2020-10-26 13:12:01* @LastEditors: EvStorm 17053613@qq.com* @WebSite: https://www.lianshoulab.com/* @Description: 當日課程表* @FilePath: /timetable/src/pages/index/index.html --> <view style="height:{{CustomBar}}px;"><view class="CustomBar" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;"><view class="action" style="color:#FFF">練手課程表</view></view> </view> <image class="backgroundTexture" mode="scaleToFill" style="height:{{CustomBar + 130}}px" src="/images/mainBG.png" /> <view class="ev-mainBody"><view wx:if="{{!haveCouple}}"><view class="ev-fr-start padding-tb-sm"><image class="todayCourse" mode="heightFix" src="/images/todayCourse.png" /><text class="padding-xs todaytitle" style="color:#FFF">今日課程</text></view><view wx:if="{{courseInfo.length === 0}}" class="todaytips">今天沒有課,好好休息吧~</view><view wx:else class="todaytips">今日共{{courseInfo.length}}堂課，請注意上課時間～</view></view><view wx:if="{{haveCouple}}" class="messageBox" style="margin-top:50px;"><image class="messageImg" mode="heightFix" src="/images/messageImg.png" /><view class="messageData padding-bottom" wx:if="{{message}}"><view class="data margin-bottom-sm" style="-webkit-line-clamp: {{showAllMsg ? 0 : 2}};">{{message.contents}}</view><view class="ev-fr"><view class="text-gray ev-fr-start" style="font-size: 12px;"><view class="text-blue padding-right-sm" bind:tap="showAllMsg">{{showAllMsg ? "收起消息":"展開全部"}}</view>{{" " + message.time}}</view><view class="text-blue" bind:tap="newMessage" style="font-size: 12px;">給ta留言</view></view></view><view class="ev-fr messageData padding-bottom" wx:else bind:tap="newMessage"><text class="messageText">點擊這里可以給對方留言哦～</text><view class="messageButton ev-fc-center"><image style="width: 50%;height: 50%;" mode="heightFix" src="/images/messageIndex.png" /></view></view></view> </view> <block wx:if="{{!haveCouple}}"><view class="topBar"></view><view class="topBarShadow"></view><view class="courseBox" style="height: {{displayArea.windowHeight - CustomBar - 120}}px;background:{{userInfo.index_bgimage ? 'none':'#FFFFFF'}}"><view wx:if="{{!userInfo}}" style="width:100%"><button class="loginButton" bindgetuserinfo="bindGetUserInfo" open-type="getUserInfo" style="width:100%;height:100%"><image class="loginnull" mode="scaleToFill" src="/images/loginnull.png" /></button></view><block wx:else><image class="customBG" mode="aspectFill" style="width:686rpx;height: {{displayArea.windowHeight - CustomBar - 120}}px" src="{{userInfo.index_bgimage ? ImgUrl + userInfo.index_bgimage:''}}" /><view class="courseInfoBox"><view class="cu-timeline" style="background:none"><view wx:if="{{!courseInfo}}" class="loginnull" bind:tap="entryCoure"><image style="width:100%;height:100%" mode="scaleToFill" src="/images/coursenull.png" /><text wx:if="{{!userInfo.courseInfo || userInfo.courseInfo.length == 0}}" class="todaytips">還沒錄入課程哦~</text><text wx:else>今日無課程，好好放松吧～</text></view><block wx:else><view class="cu-item text-blue ev-cuItem" wx:for="{{courseInfo}}" wx:key="index"><view class="scheduleinfo ev-fr-start"><text class="scheduleTime">{{item.courseTime}}</text><view class="scheduleRemind" style="background: {{['','#E2FFF9','#EAF5FF','#f6f6f9'][item.courseRemind]}};color:{{['','#08d8d1','#5e99fb','#92979d'][item.courseRemind]}}" wx:if="{{item.courseRemind}}">{{['','即將開始','進行中','已結束'][item.courseRemind]}}</view></view><view class="bg-blue scheduleinfoBox" style="background-color: {{colorList[index % 8]}};"><view class="padding-sm"><view>{{item.sname}}</view><text>@{{item.classroom}}</text></view><image class="timelineIcon" mode="scaleToFill" src="/images/timelineIcon.png" /></view></view></block></view></view></block></view> </block> <block wx:if="{{haveCouple}}"><view class="ev-fr ev-mainBody"><view class="ev-fr"><view class="courseTitle {{ScheduleId == '0' ? '':'noSelected'}}" data-id="0" bind:tap="switchSchedule">我的課程</view><view class="courseTitle padding-lr-sm {{ScheduleId == '1' ? '':'noSelected'}}" data-id="1" bind:tap="switchSchedule">ta的課程</view></view><view class="ev-fr" bind:tap="couplesBG"><image class="BGicon" mode="scaleToFill" src="/images/BGicon.png" /><text class="BGiconText padding-lr-sm">給Ta設置背景</text></view></view><view class="ev-fr ev-mainBody" bind:touchstart="touchstart" bind:touchend="touchend"><view class="haveCoupleBox {{ScheduleId == 0? 'animation-switch-out':'animation-switch-in'}}" data-id="0" bind:tap="switchSchedule" style="height: {{displayArea.windowHeight - CustomBar - 240}}px;margin-top:20px;"><image class="customBG" mode="aspectFill" style="width:100%;height:100%" src="{{couplesBG ? ImgUrl + couplesBG.contents : ImgUrl +userInfo.index_bgimage}}" /><view class="courseInfoBox"><view class="cu-timeline" style="background:none"><view wx:if="{{!courseInfo}}" class="coursenull" bind:tap="entryCoure"><image style="width:100%;height:100%" mode="scaleToFill" src="/images/coursenull.png" /><text wx:if="{{userInfo.courseInfo.length === 0}}" class="todaytips">去錄入你的課程吧</text><text wx:else>今日無課程，好好放松吧～</text></view><block wx:else><view class="cu-item text-blue ev-cuItem" wx:for="{{courseInfo}}" wx:key="index"><view class="scheduleinfo ev-fr-start"><text class="scheduleTime">{{item.courseTime}}</text><view class="scheduleRemind" style="background: {{['','#E2FFF9','#EAF5FF','#f6f6f9'][item.courseRemind]}};color:{{['','#08d8d1','#5e99fb','#92979d'][item.courseRemind]}}" wx:if="{{item.courseRemind}}">{{['','即將開始','進行中','已結束'][item.courseRemind]}}</view></view><view class="bg-blue scheduleinfoBox" style="background-color: {{colorList[index % 8]}};"><view class="padding-sm"><view>{{item.sname}}</view><text>@{{item.classroom}}</text></view><image class="timelineIcon" mode="scaleToFill" src="/images/timelineIcon.png" /></view></view></block></view></view></view><view class="haveCoupleBox {{ScheduleId == 1? 'animation-switch-in':'animation-switch-out'}}" data-id="1" bind:tap="switchSchedule" style="height: {{displayArea.windowHeight - CustomBar - 240}}px;margin-top:20px"><image class="customBG" mode="aspectFill" style="width:100%;height:100%" src="{{userInfo.loversbg ? ImgUrl + userInfo.loversbg:''}}" /><view class="courseInfoBox"><view class="cu-timeline" style="background:none"><view wx:if="{{!loverCourse}}" class="coursenull"><image style="width:100%;height:100%" mode="scaleToFill" src="/images/coursenull.png" /><text wx:if="{{userInfo.loverCourseInfo.length === 0}}" class="todaytips">快去提醒ta錄入課程吧</text><text wx:else>Ta今天沒有課哦～</text></view><block wx:else><view class="cu-item text-blue ev-cuItem" wx:for="{{loverCourse}}" wx:key="index"><view class="scheduleinfo ev-fr-start"><text class="scheduleTime">{{item.courseTime}}</text><view class="scheduleRemind" style="background: {{['','#E2FFF9','#EAF5FF','#f6f6f9'][item.courseRemind]}};color:{{['','#08d8d1','#5e99fb','#92979d'][item.courseRemind]}}" wx:if="{{item.courseRemind}}">{{['','即將開始','進行中','已結束'][item.courseRemind]}}</view></view><view class="bg-blue scheduleinfoBox" style="background-color: {{colorList[index % 8]}};"><view class="padding-sm"><view>{{item.sname}}</view><text>@{{item.classroom}}</text></view><image class="timelineIcon" mode="scaleToFill" src="/images/timelineIcon.png" /></view></view></block></view></view></view></view> </block> <view class="cu-modal {{couplesInvite ?'show':''}}" bind:tap="hideCouplesInvite"><view class="cu-dialog couplesInvite"><image class="messageImg" mode="heightFix" src="/images/messageImg.png" /><image class="loveImg" mode="heightFix" src="/images/love.png" /></view> </view> <view class="cu-modal bottom-modal {{newMessage?'show':''}} newMessage" bind:tap="cancelMessage"><view class="cu-dialog newMessageBox" catch:tap style="border-radius: 40rpx 40rpx 0 0"><view class="cu-bar bg-white ev-fr-start padding"><view class="MessageIcon ev-fc-center"><image style="width: 100%;height: 100%;" mode="heightFix" src="/images/messageIcon.png" /></view><text class="padding-lr title">給Ta留言</text></view><view class="ev-fc bg-white"><block wx:if="{{!messageList || editMessage}}"><textarea placeholder="輸入留言內容，建議100字以內…" value="{{messageValue}}" bindblur="messageChange" bindconfirm="messageChange" class="messageContent"></textarea><view><view class="ev-fr-start"><text class="title">留言發送時間</text><text class="tips padding-lr">內容會在對方留言板顯示一天時間</text></view><dateTimePicker type="minute" bind:change="TimePicker"><view class="sendTimeBox ev-fr"><input type="text" class="sendTime padding-lr" disabled="{{true}}" value="{{sendTime}}" /><text style="font-size:24px;color:#92979D" class="cuIcon-triangledownfill padding-lr-sm"></text></view></dateTimePicker></view><view class="ev-fr padding-tb"><button bind:tap="cancelMessage" class="cu-btn cancel" type="">取消</button><button bind:tap="saveMessage" class="cu-btn confirm margin-left" disabled="{{!messageValue}}" type="">保存</button></view></block><block wx:if="{{messageList && !editMessage}}"><view class="addMessage ev-fc-center" bind:tap="editMessage"><text class="cuIcon-roundadd" style="color:#5E99FB"></text><text class="padding-xs" style="color:#5E99FB">添加新的留言</text></view><view wx:for="{{messageList}}" wx:key="index" class="messageBox cardBox"><view class="ev-fr padding"><text class="title">{{item.contents}}</text><view class="state" style="color:{{['#5E99FB','#92979D'][item.state]}}">{{['未發送','已發送'][item.state]}}</view></view><view class="padding-lr"><text class="cuIcon-time" style="color:#5E99FB"></text><text class="padding-lr-sm">{{item.time}}</text></view><view class="padding ev-fr"><view class="editButton" data-index="{{index}}" data-lid="{{item.lid}}" data-type="{{true}}" bind:tap="editMessage">重新編輯</view><text class="cuIcon-delete" data-lid="{{item.lid}}" data-type="{{true}}" bind:tap="delMessage" style="color:#5E99FB"></text></view></view></block></view></view> </view>

*** 開源地址： ** gitee開源: **https://gitee.com/chengdu-gengzixin_liu-jiyuan/timetable#%E7%89%88%E6%9C%AC%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%BB%8D

什么？你覺得還是有點過于簡陋了？ 后續俺會繼續做這個練手項目，有什么意見都可以評論區提

本文由博客一文多發平臺 OpenWrite 發布！

總結

以上是生活随笔為你收集整理的【课程表小程序源码】增加今日课表功能|开源代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。