美文网首页
支付宝小程序入门指南

支付宝小程序入门指南

作者: 红色火苗 | 来源:发表于2019-08-05 18:17 被阅读0次

    支付宝小程序云开发 basement

    后端云服务(Basement)的数据存储服务提供了大量接口。通过这些接口,您可以对集合进行数据读取、写入、更新、删除。

    关于此任务

    以下步骤介绍如何将数据插入到集合中。所有数据的组织结构跟 JSON 一致。基于 管理集合 的示例,对文档数据进行相关操作。

    要了解 Basement 支持的数据存储 API, 查看 数据存储 API

    读取数据

    读取数据包含以下不同场景:

    • 从集合中读取所有数据。例如,查询所有的图片:
    basement.db.collection('images').find();
    
    
    • 从集合中读取数据,并附带查询条件。例如,查询特定用户添加的图片:
    basement.db.collection('images').find({ 'userId': userId });
    
    
    • 对数据进行排序。例如,将最新添加的图片排在后面。
    basement.db.collection('images').find({ 'userId': userId }, { 'uploadTime': -1 });
    
    
    • 回到图片画廊小程序的示例,从 Basement 的数据存储中读取用户的图片列表,并显示出来。

      // client/index/index.js
      
      // 显示指定当前用户的图片列表
      onShow() {
        basement.user.getInfo().then((user) => {
          this._getImages(user);
        }).catch(console.log);
      },
      
      // 获取特定用户的图片列表
      _getImages(user) {
        basement.db.collection('images')
        .find({ userId: user.userId }, { uploadTime: -1 })
        .then(({ result: images }) => {
          images.map((item) => {
            item.uploadTime = new Date(item.uploadTime).toDateString();
            return item;
          });
          this.setData({ images });
        })
        .catch(console.log);
      },
      
      

    其中,_getImages(user) 是封装好的方法,用来获取用户对应的图片列表,并更新小程序中的数据,此时页面内容也会刷新。在 onShow() 方法中,当用户信息获取成功,便去获取用户的图片列表并显示到页面上。

    写入数据

    写入数据有以下处理方式:

    • 通过 insertOne() 方法逐条向集合写入数据。
    • 通过 insertMany() 方法批量写入数据。

    例如,使用 insertOne() 方法为用户添加一个文档:

    basement.db.collection('images').insertOne({
      text: inputText,
      url: imageUrl,
    });
    
    

    在图片画廊小程序的示例中,当您添加图片的时候,需要往集合写入一个文档:

    // client/add-image/add-image.js
    
    // 将新的任务添加到当前用户的图片列表中
    add() {
      basement.user.getInfo().then((user) => {
        basement.db.collection('images').insertOne({
          text: this.data.inputValue,
          url: this.data.imageUrl ? this.data.imageUrl : false,
          userId: user.userId,
          uploadTime: new Date(),
        }).then(() => {
          my.navigateBack();
        }).catch(console.log);
      }).catch(console.log);
    },
    
    

    更新数据

    更新数据有以下处理方式:

    • 通过 updateOne() 方法更新符合条件的第一条数据。
    • 通过 updateMany() 方法更新符合条件的所有数据。

    例如,更新一个文档的内容,用 updateOne() 来更新这条数据:

    basement.db.collection('images').updateOne(
      { _id: imageId },
      {
        $set: {
          text: result.inputValue,
        }
      }
    );
    
    

    其中, $set 是更新记录的处理方式。要了解更多更新方式,查看 数据存储 API

    在图片画廊的小程序例子中,用户触发重命名图片名称操作时,显示对话框让用户输入新的图片名称,执行更新文档中的名称字段:

    // client/index/index.js
    
    // 变更图片名称的事件处理
    rename(e) {
      const dataset = e.target.dataset;
    
      my.prompt({
        title: '修改名称',
        message: '请输入新的图片名称:',
        placeholder: '',
        okButtonText: '确定',
        cancelButtonText: '取消',
        success: (result) => {
          if (result.ok) {
            basement.db.collection('images').updateOne(
              { _id: dataset.itemId },
              {
                $set: {
                  text: result.inputValue,
                }
              }
            ).then(() => {
              this._getImages(this.data.user);
            }).catch(console.log);
          }
        },
      });
    },
    
    

    删除数据

    找到对应的数据条目进行删除。删除数据有以下处理方式:

    • 通过 deleteOne() 方法删除第一个符合条件的数据。
    • 通过 deleteMany() 方法删除所有符合条件的数据。

    例如,删除掉其中一个文档,使用 deleteOne() 操作:

    basement.db.collection('image').deleteOne({ _id: imageId });
    
    

    当点击示例小程序图片删除按钮时,唤起删除对话框,确认后执行删除和刷新图片列表:

    // client/index/index.js
    
    // 删除图片的事件处理
    delete(e) {
      const dataset = e.target.dataset;
    
      // 确认和删除图片
      my.confirm({
        title: '删除图片',
        content: '是否确认删除该图片?',
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        success: (result) => {
          if (result.confirm) {
            basement.db.collection('images').deleteOne({
              '_id': dataset.itemId,
              'userId': this.data.user.userId,
            }).then(() => {
              // 刷新任务列表
              this._getImages(this.data.user);
            }).catch(console.log);
          }
        },
      });
    },
    
    

    相关文章

      网友评论

          本文标题:支付宝小程序入门指南

          本文链接:https://www.haomeiwen.com/subject/zxhvdctx.html