大四马上实习,刚入坑互联网,想着先做一个简单练手项目 ,充实一下自己的简历,思来想去就**“课程表小程序“**相对我们这个群体更合适
再加上因为现在市面上已经有很多面向学生的课程表,但要么是功能繁多过于臃肿,要么充斥着大量的广告,并且总感觉总有一两个点不适合自己的功能,自己动手丰衣足食。
下定决心就开干!
成品演示(项目已开源,见文末):
看到自己制作的第一个小程序,自豪感直接拉满好吧
部分实现代码:
<wxs class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./timetable.wxs" module="tools" /> <view class="headBox"> <view style="height:{{CustomBar}}px"> <view class="cu-bar" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;"> <view class="action" bindtap="weeksSwitch"> <view class="ev-fc-cstart"> <view class="weeks ev-fr-start"> 第{{showWeek}}周 <text wx:if="{{currentWeek == showWeek}}">(本周)</text> <text class="cuIcon-unfold" style="color: #1a1b1c;" /> <view wx:if="{{currentWeek !== showWeek}}" class="text-blue margin-left-xs" catch:tap="backToCurrent" style="font-size: 24rpx;"> 回到当前周 </view> </view> <view class="switchCouples"> {{gradeList[userInfo.grade].label}} 第{{semester}}学期 </view> </view> </view> </view> </view> </view> <view class="ev-relative" style="height: {{displayArea.windowWidth / 3.75}}px"> <view class="flex solid-bottom padding align-center bg-white" bind:tap="switchCouples"> </view> <view class="ev-fr-start" style="box-shadow: 10px 1px 1px #e3e3e3;"> <view class="monthBox ev-fc-center"> 10 <view class="tipsText">月</view> </view> <view class="flex solid-bottom justify-between align-center"> <view wx:for="{{['一','二','三','四','五','六','日']}}" wx:key="index" class="ev-fc calendarDate {{index == todayWeek && showWeek == currentWeek ? 'selectedDate':''}}"> <text>周{{item}}</text> <text class="tipsText">{{weeksList[index]}}</text> </view> </view> </view> </view> <view> <view style="height:{{displayArea.windowHeight - CustomBar - (displayArea.windowWidth / 3.75)}}px;overflow: auto;" class="flex solid-bottom justify-start bg-white {{showcouples?'showcouplesOn':'showcouplesOut'}}"> <image class="customBG" mode="aspectFill" style="width:100%;height:100%" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{userInfo.table_bgimage ? ImgUrl + userInfo.table_bgimage:''}}" /> <block wx:if="{{!userInfo}}"> <view class="loginnull"> <view bindgetuserinfo="bindGetUserInfo" open-type="getUserInfo" style="width:100%;height:100%"> <image style="width:100%;height:100%" mode="scaleToFill" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/images/loginnull.png" /> </view> </view> </block> <view wx:elif="{{!courseInfo}}" class="coursenull" bind:tap="addTable"> <image style="width:100%;height:100%" mode="scaleToFill" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/images/coursenull.png" /> <view class="ev-fc-start" style="margin-top:-20px"> <view>没有课程或还未添加课程哦~</view> <view class="text-blue">去添加</view> </view> </view> <block wx:else> <view class="margin-top-sm"> <view wx:for="{{classTime}}" wx:key="index" style="width:750rpx;margin-top:{{6 +(index)*50}}px;position:absolute;border-bottom:1px dashed #DFE4EA;z-index:-1"></view> <view wx:for="{{classTime}}" wx:key="index" class="ev-fc-start" style="height: 50px; width: 32px;z-index:10"> <text class="classTimeText">{{item.s_time}}</text> </view> </view> <view class="margin-top-sm" style="width:100%;margin-top:16px"> <table-view dataSource="{{courseInfo}}" colorList="{{colorList}}" bind:onAdd="addTable" bind:onEdit="editTable"></table-view> <!-- <block> <view wx:for="{{courseInfo}}" wx:key="index" class="flex-item kcb-item {{editTableId == item.subject_id ? 'kcb-selected':''}}" catch:tap="editTable" data-statu="open" data-id="{{item.subject_id}}" style="margin-left:{{(item.days-1)*98}}rpx;margin-top:{{(item.nums-1)*50+8}}px;height:{{(item.enum - item.nums + 1)*50-4}}px;background-color:{{colorList[item.subject_id%8]}};border: 1px solid {{colorList[item.subject_id%8]}};box-shadow:0px 3px 6px {{tools.hexToRgbA(colorList[item.subject_id%8])}};"> <view class="smalltext">{{item.sname}}</view> <view class="room">@{{item.classroom}}</view> </view> </block> --> </view> </block> </view> <block wx:if="{{showcouples}}"> <view style="height:{{displayArea.windowHeight - CustomBar - (displayArea.windowWidth / 3.75)}}px;overflow: auto;margin-top:-{{displayArea.windowHeight - CustomBar - (displayArea.windowWidth / 3.75)}}px;width:100%;" class="flex solid-bottom justify-start bg-white {{showcouples?'showcouplesOut':'showcouplesOn'}}"> <view wx:if="{{!loverCourse}}" class="coursenull"> <image style="width:100%;height:100%" mode="scaleToFill" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/images/coursenull.png" /> <text>ta还没有课程~</text> </view> <block wx:else> <view class="margin-top-sm"> <view wx:for="{{classTime}}" wx:key="index" style="width:750rpx;margin-top:{{6 +(index)*50}}px;position:absolute;border-bottom:1px dashed #DFE4EA;"></view> <view wx:for="{{classTime}}" wx:key="index" class="ev-fc-start" style="height: 50px; width: 32px;z-index:10"> <text class="classTimeText">{{item.s_time}}</text> </view> </view> <view class="margin-top-sm" style="width:100%;margin-top:16px"> <table-view dataSource="{{loverCourse}}" disabled colorList="{{colorList}}"></table-view> <!-- <view wx:for="{{loverCourse}}" wx:key="index" class="flex-item kcb-item" data-statu="open" data-id="{{item.subject_id}}" style="margin-left:{{(item.days-1)*98}}rpx;margin-top:{{(item.nums-1)*50+8}}px;height:{{(item.enum - item.nums + 1)*50-4}}px;background-color:{{colorList[item.subject_id%8]}};border: 1px solid {{colorList[item.subject_id%8]}};box-shadow:0px 3px 6px {{tools.hexToRgbA(colorList[item.subject_id%8])}};"> <view class="smalltext">{{item.sname}}</view> <view class="room">@{{item.classroom}}</view> </view> --> </view> </block> </view> </block> </view>
实现代码:
<view class="cu-modal top-modal weeksSwitch {{weeksSwitch ?'show':''}}" style="margin-top:{{CustomBar}}px" bind:tap="hideweeksSwitch"> <view class="cu-dialog"> <view class="grid col-5 padding-sm bg-white solid-top solid-bottom"> <view wx:for="{{checkbox}}" class="padding-xs" wx:key="index"> <button class="cu-btn bg-white WeekCheck tips {{showWeek == item.value?'WeekChecked':''}}" bindtap="ChooseCheckbox" data-value="{{item.value}}"> 第 <view class="WeekNum">{{item.value}}</view> 周 <view class="thisWeek" style="color:{{showWeek == item.value ?'':'#92979D'}}" wx:if="{{currentWeek== item.value}}"> 本周 </view> </button> </view> </view> </view> </view>
前后端代码太多,直接附加上开源地址:
**gitee开源:**https://gitee.com/chengdu-gengzixin_liu-jiyuan/timetable#版本功能介绍
什么?你觉得有点过于简陋了?
后续俺会继续做这个练手项目,有什么意见都可以评论区提