数据库初始化
初始化 const db = wx.cloud.database()
切换环境
const db = wx.cloud.database({
env: 'trailer-dev' //环境的名称
})
为了方便编译查看结果,不用每次都点击云开发页面,我们可以新建一个编译方式,将首页设成云开发
接着我们将数据库初始化放到 cloud.js文件中,最顶上一行
const db = wx.cloud.database() //初始化数据库,下面可以用db访问
在wxml中加入一个按钮
<button bindtap="insertFunc">插入数据</button>
cloud.js page对象中加入这个绑定的方法
// 插入数据绑定的方法
insertFunc: function(){
},
在界面上点击云开发,进入控制台后点击顶上的“数据库”按钮
点击左边创建一个user的集合
创建完集合后就可以通过代码来加入内容,插入的方法就写成如下
// 插入数据绑定的方法
insertFunc: function(){
// 在集合user中增加一条数据
db.collection('user').add({
//插入一条数据
data: {
name: 'tommy',
age: 20
},
// 插入成功的回调函数
success: res => { //箭头函数,目的是this的指向
console.log('插入成功', res)
},
// 插入失败的回调
fail: err => {
console.log('插入失败', err)
}
})
},
插入成功我们就可以看到回调函数在控制台显示
在云开发控制台中点击刷新就可以看到内容
新插入的数据中
_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)
})
},
保存后看到界面是这样的
这时候云数据库中tommy仍然是20岁
点击更新,得到更新完成的提示
接着刷新一下云控制台中的数据库,可以看到已经更新成30岁了
查找
我们在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)
})
},
接着我们试着在控制台中直接插入一条数据
把年龄改回18
后台插入的数据是没有_openid的
尝试后台直接在user collection中直接插入数据
插入的数据不包含 openid,在小程序的查询中查询不到,这个涉及到权限设置
我们将权限修改成所有人都可以看
确认后
这时候在小程序中再点击查询就可以看到两条记录了
删除
新加一个删除按钮
<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)
})
},
点击删除按钮后在控制台显示
删除成功
同时在云开发控制台中就只剩两条数据了
这个就是单条数据在小程序中的删除
而多条数据的删除,在小程序端是无法控制的,需要调用云函数才能进行批量删除
上面涉及到的函数在官方的文档中都能找到
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html
云函数
一段运行在云端的代码,相当于小程序后端服务端的代码,
这里我们不需要管理服务器,只需要通过一键上传部署,就可以运行这些代码
云函数要用到nodejs,所以我们需要安装node v8.0 以上版本
在整个项目的根目录下有个 cloudfunctions 文件夹,这个就是云函数文件夹
如果要修改名字,要在packageconfig.json 这个配置中修改
在云控制台中可以查看到我们建立的所有云函数
我们新建一个云函数
新建完成后,它会自动同步到线上,并且显示上传结果,在云控制台中点击刷新就可以看到新建的云函数
注意上传编译的云函数有延迟
调用云函数:
在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)
})
},
点击后可以看到调用云函数,服务器将结果返回
计算结果显示正常
同时在云开发控制台也可以查询到整个云函数的调用情况
当然也可以点击测试,去看测试的结果
测试输入的内容,修改key
这里可以让我们写好云函数,在写本地调用前,对云函数进行一个测试
点击日志刷新,可以看到每次调用的结果
通过云函数获取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目录上传部署,因为默认是没有在云端安装的
等待上传更新权限并部署完成,再点击按钮就可以在控制台中看到登录成功了
如果前面这步忘了上传编译,点击按钮后有可能会出现登录错误
上传速度由电脑速度和网速决定
批量删除
因为小程序规定批量删除数据库中的数据,只能通过云函数来执行,所以这里我们新建一个云函数
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)
})
},
云端未删除前的数据
刷新云数据库后
数据只剩两条,符合 name: 'jerry' 的云数据库内容被删除了