小程序云开发入门（5）- 基础能力体验

不是Null
804 阅读5分钟

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战

云开发提供了多个基础能力，包括数据库、存储、云函数、云调用以及HTTP API。这里主要讲述三个基础能力：云数据库、云存储和云函数。

体验云数据库

云数据库： 云开发提供了一个 JSON 数据库，顾名思义，数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合（相当于关系型数据中的表），集合可看做一个 JSON 数组，数组中的每个对象就是一条记录，记录的格式是 JSON 对象。这样的话，数据库的存储也不用考虑了，直接提供了一个类似于 MongoDB一样的数据库，而且免费的存储空间达到了 2G，一般的项目足够使用了

首先在云开发控制台>云数据库添加一个集合user。

1.png

初始化

通过调用 const db = wx.cloud.database(); 方法完成云数据库的初始化。

数据的增、删、改、查

  • 新增：可以通过在集合对象上调用 add 方法往集合中插入一条记录。
  • 修改：使用 update 方法可以局部更新一个记录或一个集合中的记录，局部更新意味着只有指定的字段会得到更新，其他字段不受影响。
  • 查找：在记录和集合上都有提供 get 方法用于获取单个记录或集合中多个记录的数据。
  • 删除：对记录使用 remove 方法可以删除该条记录。
// 新增
insert() {
    db.collection('user').add({
      data: {
        name: 'jack',
        age: 20
      }
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  },
  // 更新
  update() {
    db.collection('user').doc('14139e126111ea2b042c5a45248db648').update({  // doc()为某个_id元素
      data: {
        name: 'rose'  // 需要修改的属性
      }
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  },
  // 查询
  search() {
    db.collection('user').doc('8937eaa96111efc403ce13e215188f56').get().then( res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  },
  // 删除
  delete() {
    db.collection('user').doc('8937eaa96111efc403ce13e215188f56').remove().then( res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  },

体验云函数的调用

求和函数

云函数定义： 以定义一个将两个数字相加的函数作为第一个例子。我们在云函数根目录cloudfunctions上右键，在右键菜单中，可以选择创建一个新的 Node.js 云函数，我们将该云函数命名为 sum。可以看到云函数目录和入口 index.js 文件。我们将其改造为sum 的返回值

// 云函数入口函数
// 将传入的 a 和 b 相加并作为 sum 字段返回给调用端
exports.main = async (event, context) => {
  return {
    sum:  event.a + event.b
  }
}

云函数的传入参数有两个，一个是 event 对象，一个是 context 对象。event 指的是触发云函数的事件，当小程序端调用云函数时，event 就是小程序端调用云函数时传入的参数，外加后端自动注入的小程序用户的 openid 和小程序的 appid。context 对象包含了此处调用的调用信息和运行状态，可以用它来了解服务运行的情况。在模板中也默认 require 了 wx-server-sdk，这是一个帮助我们在云函数中操作数据库、存储以及调用其他云函数的微信提供的库。

云函数调用： 先将该云函数部署到云端。在云函数目录上右键，在右键菜单中，我们可以将云函数整体打包上传并部署到线上环境中 。

1.png

部署完成后，我们可以在小程序中通过wx.cloud.callFunction()调用该云函数：

sum: function () {
    wx.cloud.callFunction({
      name: 'sum',
      data: {
        a: 1,
        b: 2
      }
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  }

最终得到的结果在调试器中查看如下图：

1.png

体验云存储的能力

云开发提供了一块存储空间，提供了上传文件到云端、带权限管理的云端下载能力，开发者可以在小程序端和云函数端通过 API 使用云存储功能。 在小程序端可以分别调用 wx.cloud.uploadFile 和 wx.cloud.downloadFile 完成上传和下载云文件操作。下面通过wx.cloud.uploadFile 实现在小程序内上传图片，然后上传到云端管理的功能，主要原理如下图：

2.png

实现步骤：

  • 点击按钮，获取本地图片；
  • 将本地图片上传到云存储；
  • 将图片信息存储到云数据库。
// 文件上传
upload: function() {

  // 选择图片&上传图片
  wx.chooseMessageFile({
    count: 10,
    type: 'image',
    success (res) {
      const tempFilePaths = res.tempFiles // tempFilePath可以作为img标签的src属性显示图片
      
      // 图片上传到云存储
      wx.cloud.uploadFile({
        cloudPath: 'example.png', // 云存储路径:上传到云存储上的名称
        filePath: tempFilePaths[0].path, // 文件路径必须是路径字符串
      }).then(res => {
        console.log(res.fileID)
        
        // 图片fileID添加到云数据库
        db.collection('images').add({
          data: {
            fileID: res.fileID
          }
        }).then( res => {
          console.log(res)
        }).catch(err => {
          console.error(err)
        })
      }).catch(error => {
        console.log(error)
      })
    }
  })
},

图片fileID添加到云数据库,前提要在云数据库中，新增images集合。

最终在云存储和云数据库中可以看到对应的信息

333.png

4444.png

总结

本篇主要介绍了云开发的三个核心基础能力，只是做了简要的介绍。便于大家对云开发主要能力有个大概的了解，详细的学习还需跟着云开发官网走。

创作不易，点个赞再走吧~~~

avatar
文章
阅读
粉丝