一周学会小程序-LeanCloud简单使用

目前小程序使用总人数已达到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: '记录获取失败',
      })
    });