数据库初始化

初始化 const db = wx.cloud.database()

切换环境

const db = wx.cloud.database({
        env: 'trailer-dev' //环境的名称
      })

image.png

为了方便编译查看结果，不用每次都点击云开发页面，我们可以新建一个编译方式，将首页设成云开发

接着我们将数据库初始化放到 cloud.js文件中，最顶上一行

const db = wx.cloud.database() //初始化数据库，下面可以用db访问

在wxml中加入一个按钮

<button bindtap="insertFunc">插入数据</button>

cloud.js page对象中加入这个绑定的方法

// 插入数据绑定的方法

insertFunc: function(){

},

在界面上点击云开发，进入控制台后点击顶上的“数据库”按钮

image.png

点击左边创建一个user的集合

image.png

创建完集合后就可以通过代码来加入内容，插入的方法就写成如下

  // 插入数据绑定的方法
  insertFunc: function(){
    // 在集合user中增加一条数据
    db.collection('user').add({
      //插入一条数据
      data: {
        name: 'tommy',
        age: 20
      },
      // 插入成功的回调函数
      success: res => { //箭头函数，目的是this的指向
          console.log('插入成功', res)
      },
      // 插入失败的回调
      fail: err => {
        console.log('插入失败', err)
      }
    })
  },

插入成功我们就可以看到回调函数在控制台显示

image.png

在云开发控制台中点击刷新就可以看到内容

image.png

image.png

新插入的数据中
_id是非关系型数据库中的标识
_openid 是指这个用户插入的数据
而下面的字段才是我们插入的数据

同时小程序中也支持promise的写法，同样的内容我们改写一下

 // 插入数据绑定的方法
  insertFunc: function(){
    // 在集合user中增加一条数据
  
    // promise写法
    db.collection('user').add({
    //插入一条数据
    data: {
      name: 'elsa',
      age: 18
    }
  })
  .then( res => {
    console.log('插入成功', res)
  })
  .catch( err => {
    console.log('插入失败', err)
  }) 

  },

修改

接着试验一下更新操作，在wxml中加入新按钮

<button bindtap="updateFunc">更新数据</button>

更新数据时要通过 _id 这个数据唯一标识去修改内容，
例如我们将刚刚输入的内容修改，需要先copy它对应的 _id，比如第一条tommy的数据

  // 更新数据方法
  updateFunc: function(){
    const id = '0ec685215e2a585b05288efe08b2185b'
    db.collection('user').doc(id)  // doc方法去修改文档
    .update({  // 在对应的文档中用update传入一个对象更新
      data: {
        age: 30
      }
    })
    .then( res => {
      console.log('更新完成', res)
    })
    .catch( err => {
      console.log('更新失败', err)
    })
  },

保存后看到界面是这样的

image.png

这时候云数据库中tommy仍然是20岁

image.png

点击更新，得到更新完成的提示

image.png

接着刷新一下云控制台中的数据库，可以看到已经更新成30岁了

image.png

查找

我们在wxml加入查找数据的按钮

<button bindtap="searchFunc">查找数据</button>

接着是js中处理事件

  // 查找
  searchFunc: function(){
    db.collection('user').where({  //用where函数进行查找
      // 查询条件
      age: 18
    }).get()  //输入条件后用get方法访问
    .then( res => {
      console.log('查询成功', res)
    })
    .catch( err => {
      console.log('查询失败', err)
    })
  },

接着我们试着在控制台中直接插入一条数据

image.png

image.png

把年龄改回18

image.png

后台插入的数据是没有_openid的

image.png

尝试后台直接在user collection中直接插入数据
插入的数据不包含 openid，在小程序的查询中查询不到，这个涉及到权限设置

image.png

我们将权限修改成所有人都可以看

image.png

确认后

image.png

这时候在小程序中再点击查询就可以看到两条记录了

image.png

删除

新加一个删除按钮

<button bindtap="deleteFunc">删除数据</button>

同样的删除方法

  deleteFunc: function(){
    const id = '0ec685215e2a585b05288efe08b2185b'  // 也是用_id的方式访问
    db.collection('user').doc(id)  // doc方法去找到文档
    .remove()
    .then( res => {  // 成功删除
      console.log('删除成功', res)
    })
    .catch( err => {
      console.log('删除失败', err)
    })
  },

image.png

点击删除按钮后在控制台显示

image.png

删除成功
同时在云开发控制台中就只剩两条数据了

image.png

这个就是单条数据在小程序中的删除

而多条数据的删除，在小程序端是无法控制的，需要调用云函数才能进行批量删除

上面涉及到的函数在官方的文档中都能找到

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

云函数

一段运行在云端的代码，相当于小程序后端服务端的代码，
这里我们不需要管理服务器，只需要通过一键上传部署，就可以运行这些代码

云函数要用到nodejs，所以我们需要安装node v8.0 以上版本

在整个项目的根目录下有个 cloudfunctions 文件夹，这个就是云函数文件夹
如果要修改名字，要在packageconfig.json 这个配置中修改

在云控制台中可以查看到我们建立的所有云函数

image.png

我们新建一个云函数

image.png

新建完成后，它会自动同步到线上，并且显示上传结果，在云控制台中点击刷新就可以看到新建的云函数

image.png

注意上传编译的云函数有延迟

调用云函数：
在wxml中加入一个按钮

<view>云函数</view>
<button bindtap="sum">调用云函数sum</button>

在js文件中加入该sum方法

  // 云函数 sum 调用
  sum: function(){
    console.log('云函数调用 sum')
    // 在小程序端调用云函数
    wx.cloud.callFunction({
      name: 'sum',  // 调用云函数的名称
      data: {  // 接收输入的参数，等同于云函数中的内容
        a: 10,  // 传递的event.a + event.b桉树
        b: 2
      }
    })
    .then( res => {
      console.log('调用云函数 sum成功', res)
    })
    .catch( err => {
      console.log('调用云函数错误', err)
    })
  },

点击后可以看到调用云函数，服务器将结果返回

image.png

计算结果显示正常

image.png

同时在云开发控制台也可以查询到整个云函数的调用情况

image.png

当然也可以点击测试，去看测试的结果

image.png

测试输入的内容，修改key

image.png

image.png

点击日志刷新，可以看到每次调用的结果

image.png

通过云函数获取openid

wxml中的代码为一个按钮，绑定getOpenIdFunc方法

<button bindtap="getOpenIdFunc">获取当前用户openID</button>

js 中写入

 // 获取当前用户openId
  getOpenIdFunc: function(){
    wx.cloud.callFunction({
      // 获取openId是小程序原生函数
      name: 'login'
    })
    .then( res => {
      console.log('登录成功', res)
    })
    .catch( err => {
      console.log('登录失败', err)
    })
  } , 

写完后记得将云函数目录中的login目录上传部署，因为默认是没有在云端安装的
等待上传更新权限并部署完成，再点击按钮就可以在控制台中看到登录成功了

image.png

如果前面这步忘了上传编译，点击按钮后有可能会出现登录错误

image.png

上传速度由电脑速度和网速决定

批量删除

因为小程序规定批量删除数据库中的数据，只能通过云函数来执行，所以这里我们新建一个云函数
batchDelete，建立后它会自动上传和更新权限，接着我们在云函数index.js中写入代码，整个文件如下

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
//获取云数据库权限
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  try { //为了防止删除数据库报错，所以套用一个try捕获异常
    // 搜索加删除  这里是异步操作所以要用es7语法 await
    return await db.collection('user').where({ // 搜索符合条件的内容
      name: 'jerry'
    }).remove()  // 删除
  } catch (e) {  // 捕获try的错误
    console.error('批量删除出错', e)
  }
}

完成后一定要记得上传部署
然后wxml文件中加入一个新按钮

<button bindtap="batchDelFunc">批量删除数据</button>

js中代码

  // 批量删除
  batchDelFunc: function(){
    wx.cloud.callFunction({
      name: 'batchDelete'  // 云函数名称
    })
    .then( res => {
      console.log('批量删除成功', res)
    })
    .catch( err => {  // 数据库断线或网络不好时出错
      console.log('批量删除失败', err)
    })
  },

image.png

image.png

云端未删除前的数据

image.png

刷新云数据库后

image.png