一.新建项目
1.新建小程序项目
2.删除不需要的页面和文件
框选的都删除
删除完保存编译~
3.点击云开发
4.输入云开发名称,点击同意
5.等待初始化
二.初始化准备
6.删除index首页不必要的代码
index.wxml里面的都删除
index.js中留下page即可
7.定义云函数的目录
8.新建目录
名字跟上面的名字一样。 创建完就会出现当前环境
9.云开发环境初始化
删除app.js里面的代码,输入环境id,环境id在云开发控制台的设置里面去找
三.云数据库的增删改查
1.云数据库添加数据
在index的wxml中添加一个按钮,在index.js中注册这个事件。
2.在js中获取数据库的引用
在开始使用数据库 API 进行增删改查操作之前,需要先获取数据库的引用。以下调用获取默认环境的数据库的引用:
const DB = wx.cloud.database().collection("list")
js代码
const DB = wx.cloud.database().collection("list")
Page({
// 添加数据
addData(){
DB.add({
data:{
name:"thorne1",
age:21
},
success(res){
console.log('添加成功',res)
},
fail(res){
console.log('添加失败',res)
}
})
}
})
当点击按钮后,触发addData事件,添加data里面的数据。添加成功或者失败在控制台打印添加结果。
但是上面的方法添加数据是写死的,怎么动态添加数据呢?
3.动态添加数据
用input来获取用户输入的内容,在input标签绑定添加数据事件addname和addage(这两个事件在js中注册)
注意:在js中要定义name和age
index.wxml
index.js
随便输入名字:哈哈 和年龄123
在云开发的云控制台的数据库可以看到对应的数据
4. 查询数据
给wxml中的“查询数据”按钮绑定getData事件(查询数据事件),在js中定义
点击按钮,就可以看到返回的对应查询的数据
5.删除数据
删除数据是根据对象中的一个id来删除的。也就是上图的这个id
所以!我们需要先在input输入对应的id,(id在云开发控制台找),wxml里面继续进行删除id.
wxml绑定事件
<!-- 删除数据 -->
<input placeholder="填写要删除的内容" bindinput="delDataInput"></input>
<button bindtap="delData" type="primary">删除数据</button>
js
5.修改数据
wxml
<!-- 更新数据 -->
<input placeholder="填写要修改的内容的id" bindinput="updDataInput"></input>
<input placeholder="输入修改后的年龄" bindinput="updAge"></input>
<button bindtap="updData" type="primary">修改数据</button>
js
在页面中输入要修改的id和修改后的年龄。在云开发控制台就可以看到效果了。