小程序云开发数据库设置

数据库初始化

初始化 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

数据只剩两条,符合 name: 'jerry' 的云数据库内容被删除了
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269