前端介绍

前端项目开发负责人：MMMMMMaxuan

借软件工程课程项目的机会，这学期第一次和微信小程序正式打交道，从4月15日到5月24日，一个多月的充实丰富忙碌（焦头烂额）的体验，从中我也收获了不少实战经验。

前端主要以css、js和ts为主要开发语言；使用微信小程序原生的开发框架（App Service和View）；利用canvas和echarts来实现对数据的视图呈现；同时利用websocket协议与后端建立连接，实时动态地获取其他用户填写表单的记录和数据；使用虚拟列表的思想实现表单记录的呈现，实现表单分页请求并且在表单数量庞大的情况下保证页面渲染顺滑

环境准备建议

😊 开发工具准备：建议是微信开发者工具

😊需要在微信公众平台获取自己的AppID进行替换

😊项目绝大部分图片资源使用CDN加速，因此建议在有网络的情况下运行和二次开发

😊app.js设置了全局变量apiServer、imgServer、qiniupRequest、qiniupDomain等，分别代表请求后端服务器地址、cdn图片服务器地址、七牛云地区上传地址和七牛云空间域名等服务器地址，需要自定义配置

技术栈

• 主语言：css、JavaScript、Typescript
• 开发框架：微信小程序框架（App Service和View）
• 使用组件库：Vant-Weapp、Animate、echarts
• 代码规范：ESLint、Prettier
• 其他：Websocket、虚拟列表

项目亮点

• 使用插件实现表单各元素：利用插件实现表单元素，在创建表单、编辑表单、填写表单等各个涉及表单的场景都可以复用，实现了高复用性
• 判断是否支持webp图片函数的封装：微信小程序的话，在Android端和ios系统上有区别，特定版本的ios才可以显示webp图片，所以封装了个模块判断设备的系统和版本，可以渲染webp的设备就渲染webp图片，否则就渲染png图片格式
• 使用WebSocket获取填表记录：在填表记录页面利用websocket协议与后端建立连接，实时动态地获取其他用户填写表单的记录和数据
• 使用虚拟列表展示我的表单：分页请求我的表单，尽可能减小表单渲染压力
• 封装节流函数：对onPageScroll页面滑动函数进行节流，降低浏览器的压力

未来工作

• 数据展示：提供excel文件导出和下载功能
• 数据报表分析：提供更多样化的展示
• 表单展示：直接题目本身进行编辑，增加题目排序等功能