使用统软云 AVM多终端框架开发课程功能

今天，我将介绍一个使用统软云 AVM多终端框架开发课程功能的示例。希望对APP开发的小伙伴有所帮助。

1、 效果显示

2、 功能实现的思路本项目基于统软云的AVM多终端框架，因此我们需要找到构建特定数据的方法，然后更改数据。本项目的核心业务是课程数据的处理，难点是增加课程表。

该项目主要针对大学课程设计。课程的许多地方都存在不确定性，例如课程周数可能是连续的，也可能不是连续的，上课时间可能是1-2天或一整天，教室也可能不同。因此，课程的数据结构如下图所示。

后端需要提供当前周、当前周的课程数据和添加课程等界面。当然，当然，课程数据查询更复杂，所以我们这里不讨论它。前端主要显示指定位置的日程信息，数据相对简单。

1.课程列表页面

（1） 当前每周课程的原始数据结构

这个数据需要重新整理，因为课程需要放在指定的位置，并且必须知道离顶部的距离和它自己的高度。高度和顶部可以通过上课时间的参数获得。

让数据=[{'；名称'；：'；大数据可视化技术'；，'；房间'；：#39；机房C414'；，工作日'；：：'；3'；，sp；'；bg'；：'；2'；，#39；结'；；'；3-4'；，小时八英尺：'；140px“｝”]

有8个水平拷贝，每个拷贝宽12.5%，高70px。默认情况下，可以显示13个类。默认情况下，课程背景有7种样式。还有7种样式的左侧参数对应于星期。有12种样式的顶级参数对应于该类会话。具体css如下：

.bg-1{背景：线性梯度（#facea8，#fe8979）}。bg-2{背景：线性梯度（#dfc3fe，#90c5fb）}。bg-3{背景：线性梯度（#9deef5，#68e1b5）}。bg-4{背景：线性梯度（#eeba93，#dd65c7）}。bg-5{背景：线性梯度（#e6f6c9，#68e1b5）}。bg-6{背景：线性梯度（#dfc3fe，#dd65c7）}。bg-7{背景：线性梯度（#c8e65f，#7abafb）}。第1周{左：12.5%；}。第2周{左：25%；}。第3周{左：37.5%；}。第4周{左：50%；}。第5周{左：62.5%；}。第6周{左：75%；}。0周{左：87.5%；}

每个课程使用相同宽度的绝对定位。高度根据上课时间确定。位置代码如下所示

 ； ； ； ； ； ； ；&书信电报；text class=“课程室”>；｛rs.room｝｝ ； ； ；<；/视图><；/视图>

（2） 本周数据结构

获取当前星期的时间代码，如下所示

这setDate（new Date（））； ； ； ； ；setDate（日期）｛let arr=[]；let week=date.getDay（）-1；date=this.addDate（日期，星期*-1）；this.currentFirstDate=新日期（日期）；for（var i=0；i<7；i++）｛arr[i]=this.formatDate（i==0？date:this.addDate（date，1））｝ nbsp； ； ； ； ；这week_ data=arr ； ； ； ；这当前周（） ； ；}， ； ； ； ；一