QSCamera
——求是潮器材借还系统 By Incas
文章概述：本篇文章共分12部分内容，首先从应用场景、目标用户、实现思路、产品架构、小程序截图、部分核心功能代码展示六个方面对小程序做了大致的介绍，然后给出了小程序的Github地址、详细开发文档地址、详细使用指南地址以及介绍视频地址方便读者对我们的小程序进行进一步的了解。最后我们给出了小程序的体验二维码与Incas团队简介，方便大家对我们的小程序能够上手体验并对我们的团队有所了解。感谢您花费宝贵的时间阅读本篇文章，希望您能够有所收获！
1、应用场景：
该小程序面向浙江大学求是潮校级学生组织的摄影部及视频团队两个部门，用于部门内或跨部门的器材借还登记、借用记录查询、当前器材状态查询等场景。
2、目标用户
浙江大学校级学生组织求是潮摄影部及视频团队部门成员、
3、实现思路
QSCamera利用用户openid识别用户，前端90%以上内容使用组件化开发，相关组件定位明确，便于后续版本迭代更新。同时，二次封装了wx.request请求，使用async和await完美处理了异步调用问题，提高整体程序并发度与性能。同时，拥有全局网络请求异常机制，拥有良好的边界测试结果。另外，UI采用Color-UI组件库以及自写wxss进行样式设计。
后端采用纯云开发，使用云函数与云数据库进行信息存储与查询。
4、产品架构图
5、小程序部分效果截图：
首页 / 器材借用 / 器材查询 / 当前出借记录 （从左至右）
后台管理系统 / 后台记录查询 / 后台用户信息 / 后台器材管理（从左至右）
6、部分核心功能代码展示（具体详见源代码与开发文档）
1）核心网络请求类实现（所有业务模型的父类）
class HTTP {
request({
name,
data = {},
}) {
return new Promise((resolve, reject) => {
this._request(name, resolve, reject, data)
})
}
_request(name, resolve, reject, data = {}) {
wx.cloud.callFunction({
name: name,
data: data,
success: res => {
console.log("CloudFunction_"+name+"_Called Success")
resolve(res)
},
fail: err => {
reject()
console.log("CloudFunction_"+name+"_Called Failed")
wx.showToast({
icon:'none',
title: '很抱歉，出现了一个错误，请重试',
})
}
})
}
}
2）高并发借用器材实现
（大致思路如下：
1、校验用户是否登录
2、校验表单是否符合要求
3、并发向云端请求校验借用器材是否已经被人借用
4、并发向云端更新每一个器材的状态
5、创建借用记录
6、显示成功提示（或已经在以上任一步中失败即会中止并显示失败提示）
）
注：由于正常情况下，器材借用处只会显示当前尚未出借的器材。然而当两个人同时登录小程序借用同一个器材时，容易导致数据库数据不一致的情况发生。 故做上述第三步，从而成功避免了两个人同时借用一个器材时，容易导致某器材被两个人同时借走的问题。
async FormSubmit(e) {
if (!app.globalData.IsLogin) {
wx.showToast({
icon: 'none',
title: '请先登录',
})
return
}
let FormCheck = this.checkEquip() && this.checkTime() && this.checkPurpose() && this.checkEquipCanbeBorrowOut()
if (FormCheck) {
//向云端请求时再一次确认这些器材未被借用
let EquipCheck = true;
let VideoChoosed_listLength = this.data.VideoChoosed_list.length
this.setData({
loadModal: true
})
var temp = []
//视频团队器材校验
for (var i = 0; i < VideoChoosed_listLength; i++) {
temp.push(equipModel.CheckEquip(this.data.VideoChoosed_list[i]._id))
}
//摄影部器材校验
let PhotographyChoosed_listLength = this.data.PhotographyChoosed_list.length
if (PhotographyChoosed_listLength != 0) {
for (var i = 0; i < PhotographyChoosed_listLength; i++) {
temp.push(equipModel.CheckEquip(this.data.PhotographyChoosed_list[i]._id))
}
}
//等待校验完成进行下一步借用：
Promise.all(temp).then(async res => {
for (var i = 0; i < VideoChoosed_listLength + PhotographyChoosed_listLength; i++) {
EquipCheck = EquipCheck && res[i]
}
const BorrowManInfo = wx.getStorageSync('userInfo')
const that = this
//借用器材
if (EquipCheck) {
//借用视频团队器材
for (var i = 0; i < VideoChoosed_listLength; i++) {
equipModel.BorrowEquip(this.data.VideoChoosed_list[i]._id, that.data.EndDate, that.data.EndTime, BorrowManInfo)
}
//借用摄影部器材
for (var i = 0; i < PhotographyChoosed_listLength; i++) {
equipModel.BorrowEquip(this.data.PhotographyChoosed_list[i]._id, that.data.EndDate, that.data.EndTime, BorrowManInfo)
}
this.setData({
Msg1: "创建租借记录中",
})
//创建租借记录
await recordModel.CreateBorrowRecord(this.data.VideoChoosed_list, this.data.PhotographyChoosed_list, this.data.StartDate, this.data.StartTime, this.data.EndDate, this.data.EndTime, this.data.Purpose, BorrowManInfo)
this.setData({
loadModal: false
})
wx.showToast({
title: '租借成功',
})
this.ClearPageInfo()
wx.switchTab({
url: '../myrecord/myrecord',
})
} else {
this.setData({
loadModal: false
})
wx.showToast({
icon: 'none',
title: '有器材已被别人抢先一步借走啦，请下拉刷新后重新进入该页面再进行选择',
duration: 3000
})
that.ClearPageInfo()
}
})
}
},
7、小程序详细开发文档
8、小程序详细使用指南
9、小程序Github源码地址
https://github.com/Fantast416/WxApp_QsCamera
10、小程序介绍视频地址
https://v.qq.com/x/page/l31514ixels.html
11、作品体验二维码
（重要！由于该小程序目前已经上线并投入使用，且仅面向求是潮内部部门同学，所以仅向已注册用户开放功能，所以如需体验，需进行注册，注册时注意如下事项：
1、体验注册时部门请选择“视频团队”，部门内部邀请码为“ZjuQscSptd”。
2、如需进一步体验管理员功能，请注册成功进入首页后，点击中管认证按钮，视频团队中管认证码为：“Admin” ）
（注：由于摄影部和视频团队邀请码不同，所以如果选择”摄影部“，则会显示部门邀请码错误！！目前仅开发视频团队体验权限，以便赛后清除无关人员数据，避免影响正常使用）
12、团队简介
指导老师：陈建海
Incas团队由两名来自浙江大学的本科生组成。团队简介如下：
沈吕可晟：浙江大学数字媒体技术大三学生，求是潮视频团队成员，负责小程序前后端逻辑、数据库开发、与产品设计。
寿佳涵：浙江大学应用生物科学大三学生，负责小程序UI设计。
我们团队想要开发一个小程序，可以合作吗？如可以合作，欢迎加微信：mfj-1991-rsf