Leopard 图书馆预约抢座小程序项目-总结1

Leopard 图书馆预约抢座小程序项目

预约部分负责人报告

一、负责工作

1. 完成小程序预约功能模块
2. 完善小程序的界面美化
3. 完善TabBar的六种图标设计
4. 修复了相关一些bug，包括其他模块的bug
5. 完成一部分的GitHub文档Readme说明的编写

二、工作细节介绍 主体工作：预约界面的设计和编码

1. 使用到的抓包接口(具体返回的数据不再列出，见WebRequest)

获取座位总体分布信息

Request：https://seat.lib.whu.edu.cn:8443/rest/v2/free/filters&token=CQZE5BWJFM11125527

通过该接口提供的场馆、房间、楼层信息规划页面,让用户进行选择。

token:登录时获取的令牌信息，保存在微信小程序本地。

获取具体每个馆信息

在用户选取场馆后刷新该场馆所有房间的信息，最重要的是可用座位有多少

Request：https://seat.lib.whu.edu.cn:8443/rest/v2/room/stats2/ 1oken=CQZE5BWJFM11125527

参数说明：加黑1代表信息馆，可以更换为2 3 4，token参数不可以少

Response：可以获得其中的所有楼层的所有房间的具体信息。

所有座位信息只代表当前此刻的信息，想根据时间来看必须看 3

使用时间信息进行座位筛选可用座位

要求提供开始时间、结束时间（要求半小时为间隔）

Request：https://seat.lib.whu.edu.cn:8443/rest/v2/searchSeats/ 2019-11-12/570/1320

method:POST,必须使用POST，因此服务器端也必须更改为POST方式不能用get请求

data参数：token=CQZE5BWJFM11125527&t=1&roomId=15&buildingId=1&batch=9999&page=1&t2=2

后面三个数据2019-11-12代表日期，570代表从0点开始到用户输入的开始时间的分钟数(30的倍数)

获取可用开始时间

Request：http://seat.lib.whu.edu.cn/rest/v2/startTimesForSeat/ 2508/2019-11-12oken=J8PM1O4QZN11122226

加黑参数：座位的id ，日期 ，token

选择结束时间（会根据开始时间的不同进行刷新）

Request: http://seat.lib.whu.edu.cn/rest/v2/endTimesForSeat/ 2778/2019-11-12/1200oken=J8PM1O4QZN11122226

参数：座位id，日期，开始时间id（对应分钟数），token

强调返回的数据中，条目换成endTimes了,与开始时间列表不太一样

预约(自由预约)

Request: http://seat.lib.whu.edu.cn/rest/v2/freeBooktoken=J8PM1O4QZN11122226&startTime=1110&endTime=1320&seat=2778&date=2019-11-12

参数：token，开始时间、结束时间、日期

返回该预约单的信息。

提交方式POST

以上是依赖于抓包获取的接口信息。

由于后端做了非常不错的转发支持，所以可以发送给自己的服务器的数据和内容跟直接向图书馆服务器差别不大。

2. 页面设计

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PxSB437I-1576854008686)(imagesP3xmz5.jpg)]

上图为迭代后的小程序截图效果。

主要部件：武大动漫风图片、日期下拉框、场馆、房间、开始事件、结束时间、搜索和预约按钮、备选位置、位置。

上述下拉框还根据功能的不同有不同的设计效果。由于使用的组件的功能不够强大，

还特别进行了自主设计，强化了下拉框的功能。(此部分将在第三部分详细谈)

座位信息细节：提示是否有电源和窗户

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oL2W4xbc-1576854008687)(imagesP3xmz6.jpg)]

房间信息细节：提示可用座位数和所在楼层

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UlvjX0TM-1576854008688)(imagesP3xmz3.jpg)]

时间细节：从8点开始的，每半小时为单位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t67IM0Iz-1576854008689)(imagesP3xmz4.jpg)]

3. 实现细节

1. 使用原生微信小程序设计，使用wxml、wss、js

2. 使用Vant-Weapp、IView-Weapp程序组件同一UI开发

3. 使用自有服务器绕开微信小程序防盗链设计

4. 使用抓包获取的数据进行伪装

5. 抓包获取图书馆的所有场馆、房间分布，并动态渲染至小程序界面中。

6. 当用户选择好场馆时，更新房间的具体信息，显示座位可用数目和楼层

7. 当用户选择好开始时间、结束时间并搜索时，回显可用座位的信息。

8. 预约抢座

9. 提供备选项

10. 处理预约和备选之间的关系

11. 根据不同的时间段（晚上10：45图书馆开放第二天的座位预约），处理逻辑

4. 实现的重点难点和解决方案

1. 小程序的操作逻辑

   在询问了许多同学的实际使用的圆碗，根据他们希望的方式，最终选择了现有方案

   先选择日期、场馆、房间、时间

   然后根据开始时间和结束时间

   返回所有可用的座位和座位信息。

   提供备选座位。

   通过上述的方案，能够让用户免去像自习助手一般，打开无数绿色座位，却找不到可用座位的问题。

   极大的提升了用户搜索座位的效率（可以从应用商店下载·自习助手·实际对比）

2. 由于信息显示的要求，原有的下拉框组件不足以支撑需要

   房间需要可用座位数、楼层信息，座位需要电源、窗户信息

   原有的各种组件库的显示能力不足，不能够增加多个label来显示信息

   最终选择实现方案：改写原有组件库和API，自行设计了下拉框组件

3. 备选项的逻辑处理

? 备选项加上时间段问题，将整个预约抢座的处理逻辑复杂化，分为许多情况

解决方案：重构函数，不断优化

4. 界面的布局和网络延迟的优化

? 网络延迟问题和界面布局紧密相关，因为界面信息需要网络请求的渲染，由于微信官方设计的setData方法使

用js进行渲染，效率没有特别好。所以设计者必须根据网络情况合理布局界面和渲染操作。

方案：不断通过手机端实际测试，，改变布局，在不影响用户操作的情况下，优化网络请求，尽量降低渲染的频率

5. 重复提交导致封号问题

   用户在网络不佳情况下多次点击抢座，导致被图书馆识别异常行为而封禁

   通过增加提交时间间隔，限制住用户的行为，对用户进行提示，避免出现问题。

三、工作细节–其他工作

1. 参与一部分的代码测试和修改，不仅限于自己的模块
2. 美化界面，将按钮椭圆化，优化配色
3. 美化TabBar,增加图标，选中状态和非选中状态的不同，在切换时会变化图标，优化了用户的体验。
4. 书写了相当一部分的GitHub的Readme文档。

四、收获和不足

收获：

1. 了解小程序开发的框架和技术，能够独立完成页面设计和动作交互，能良好的处理网络请求和界面渲染的问题。
2. 掌握相关的网络抓包模拟的技能。
3. 了解如何通过http或https的GET和POST获取网络JSON数据。
4. 了解快速开发迭代，如何在短暂时间内通过迭代更新软件。
5. 掌握git的使用，代码的commit和pull request。

不足：

界面UI的美化程度还有进一步改进的程度。

文章知识点与官方知识档案匹配，可进一步学习相关知识小程序技能树page.json配置globalStyle全局样式配置3680 人正在系统学习中

来源：叶十一time