目前小程序使用总人数已达到5000+，所以是时候为该程序增加一个后台支持了！目前我所了解的一体化的后端服务平台主要有两个：一个是Bmob，另一个是LeanCloud。本次开发使用后端是LeanCloud。本次开发选择的后端是LeanCloud，我是随意选择了一个，因为哪个都没有用过！
前期准备：
-
价格对比
LeanCloud价格
Bmob价格
价格方面肯定是选择免费的开发版本了，能用到的也只有数据API和数据存储。相对来说同是开发版的Bmob数据API（100万次/月）要大于LeanCloud的API请求（3万次/天即90万次/月）。LeanCloud的免费数据存储空间是1GB，Bmob的没有说明。基本上都差不太多！
- 文档对比
个人感觉Bmob的文档写的要详细一点，LeanCloud的文档比较简略。最后我还是选择了它，这就是爱？
开发阶段
项目：小程序「比赛记分器」
功能：
1. 登录功能
2. 本地比赛记录一键上传、一键删除和查看功能
1. 登录功能
微信用户授权弹窗
首先使用微信获取用户信息接口，必须弹窗提示用户授权，用户允许后调用LeanCloud用户登录AV.User.loginWithMiniApp()。此时用户信息为LeanCloud用户信息，并没有同步微信用户的信息，需要再调用更新用户接口currentUser.set(wx.getStorageSync(util.wechatUserKey)).save()，将微信用户信息同步到leancloud用户中，此时才算完成登录。
登录成功
登录成功后，列表中多了一个「比赛记录」和「查看附近球馆」。具体js代码为
// leancloud用户登录
AV.User.loginWithMiniApp().then(user => {
this.data.leanCloudUser = user;
wx.setStorageSync(util.wechatUserKey, res.userInfo);
wx.setStorageSync(util.userIdKey, user.id);
// 第一次使用微信登陆 leancloud用户没有同步微信用户
// 假设已经通过 AV.User.loginWithMiniApp() 登录
// 获得当前登录用户
const currentUser = AV.User.current();
// 更新当前用户的信息
currentUser.set(wx.getStorageSync(util.wechatUserKey)).save().then(updateUser => {
// 成功，此时可在控制台中看到更新后的用户信息
this.data.leanCloudUser = updateUser;
wx.setStorageSync(util.leanCloudUserKey, updateUser)
}).catch(error => {
console.log(error);
});
}).catch(error => {
wx.showToast({
title: '登录失败',
})
});
2. 本地比赛记录一键上传、一键删除和查看功能（增删查）
（1）一键上传
登录之后本地有数据才有本地记录按钮
本地比赛记录页面显示一键上传按钮
先获取数据表RecordList，新建对象new RecordList()，使用方法recordList.save()进行单个数据上传。
全部上传成功标志：单个数据上传成功后object添加到一个新建数组里，然后判断本地数组长度和新建数组长度比较 相当于就是上传完成了，显示上传完成。
const RecordList = AV.Object.extend(util.recordListTableKey);
// 将对象保存到云端
wx.showLoading({
title: '正在上传数据',
})
var localArray = []; // 上传成功添加数据
this.data.dataArray.forEach(element => {
// 构建对象
const recordList = new RecordList();
// 为属性赋值
recordList.set('redName', element.redName);
recordList.set('blueName', element.blueName);
recordList.set('redScore', element.redScore);
recordList.set('blueScore', element.blueScore);
recordList.set('littleRecordList', element.littleRecordList);
recordList.set('gameEndTime', element.gameEndTime);
recordList.set('gameType', element.gameType);
recordList.set(util.userIdKey, wx.getStorageSync(util.userIdKey));
recordList.save().then((todo) => {
// 上传成功一个添加一个
localArray.push(todo);
if (localArray.length == that.data.dataArray.length) {
wx.hideNavigationBarLoading()
wx.hideLoading();
wx.showToast({
title: '上传成功',
})
wx.removeStorageSync(util.recordListKey);
this.setData({
dataArray:[]
});
}
// 成功保存之后，执行其他逻辑
console.log(`保存成功。objectId：${recordList.id}`);
}, (error) => {
wx.hideNavigationBarLoading()
wx.hideLoading()
wx.showToast({
title: '上传失败',
})
// 异常处理
console.log(error);
});
});
之前不知道怎么用多数据上传的，后来才知道是这个方法。优化后为
// 创建一个保存所有 AV.Object 的数组
var localArray = []; // 上传成功添加数据
that.data.dataArray.forEach(element => {
const recordList = new AV.Object(util.recordListTableKey);
recordList.set('redName', element.redName);
recordList.set('blueName', element.blueName);
recordList.set('redScore', element.redScore);
recordList.set('blueScore', element.blueScore);
recordList.set('littleRecordList', element.littleRecordList);
recordList.set('gameEndTime', element.gameEndTime);
recordList.set('gameType', element.gameType);
recordList.set(util.userIdKey, wx.getStorageSync(util.userIdKey));
localArray.push(recordList);
});
// 批量构建和更新
AV.Object.saveAll(localArray).then(function(savedObjects) {
wx.hideNavigationBarLoading()
wx.hideLoading();
wx.showToast({
title: '上传成功',
})
wx.removeStorageSync(util.recordListKey);
that.setData({
dataArray:[]
});
// 成功保存所有对象时进入此 resolve 函数，savedObjects 是包含所有 AV.Object 的数组
}, function(error) {
wx.hideNavigationBarLoading()
wx.hideLoading()
wx.showToast({
title: '上传失败',
})
console.log(error);
// 只要有一个对象保存错误就会进入此 reject 函数
});
（2）一键删除
AV.Object.destroyAll(that.recordList)
.then(function(list) {
// 成功删除所有对象时进入此 resolve 函数，list 是包含所有的 AV.Object 的数组
that.setData({
dataArray: []
});
wx.showToast({
title: '删除成功',
});
}, function(error) {
// 只要有一个对象保存错误就会进入此 reject 函数
wx.showToast({
title: '删除失败',
})
});
（3）查看
查询到的比赛列表
这个分页我不太懂怎么设置的，所以设置了最大的查询数量query.limit(1000);，通过用户id查询当前用户的比赛记录query.equalTo(util.userIdKey, wx.getStorageSync(util.userIdKey));，具体js代码如下
var query = new AV.Query(util.recordListTableKey)
query.limit(1000); // 最大值1000
query.equalTo(util.userIdKey, wx.getStorageSync(util.userIdKey));
query.find()
.then(recordList => {
wx.hideNavigationBarLoading();
that.recordList = recordList;
var localRecordList = [];
recordList.forEach(element => {
localRecordList.push(element.attributes);
});
that.setData({
dataArray: localRecordList.reverse()
})
}).catch(error => {
wx.hideNavigationBarLoading();
console.log(err);
wx.showToast({
title: '记录获取失败',
})
});
网友评论