1：在页面上写上更新和删除的按钮
现在json里面引入vant组件
{
"usingComponents": {
"van-button": "../../vant/button/index"
}
}
在wxml里面填写删除更新按钮代码
<van-button type="warning" >更新</van-button>
<van-button type="danger" >删除</van-button>
2：打开js
用id:options.id把id先直接赋值过来，在页面加载的时候，页面里面就有了id，后续操作更加方便简单.
onLoad: function (options) {
// console.log(options)
db.collection('books').doc(options.id).get({
success: res => {
console.log(res.data)
this.setData({
book: res.data,
id:options.id
})
}
})
},
3：给按钮绑定具体点击事件
<van-button type="warning" bind:click="update">更新</van-button>
<van-button type="danger" bind:click="delete">删除</van-button>
4:在js里面编写对应的点击事件,传入event是为了拿到我们要删除事件的id
一般点击事件里面我们通过event信息来拿到具体的id。
<van-button type="warning" data-id="{{id}}" bind:click="update">更新</van-button>
<van-button type="danger" data-id="{{id}}" bind:click="delete">删除</van-button>
5:关于更新数据
代开小程序云开发文档：
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/update.html
复制小程序云开发的更新数据库的方法，修改对应代码，coolection改成我的对应的books数据库，doc中的id改成相对于的this.data.id。
update: function (event) {
//console.log(event)
db.collection('books').doc(this.data.id).update({
// data 传入需要局部更新的数据
data: {
// 表示将 done 字段置为 true
title:"局部更新"
},
success: function (res) {
}
})
},
刷新页面，可以看到，我们已经把书的标题改掉了。实现小程序更新功能。
6：删除数据
再说一说实现删除数据的功能，先写一个fail来监听，如果是正常取数据，就会把结构打印出来 console.log(res.data)如果不是正常取数据，就会 console.error(err)
7：删除数据的方法，还是打开小程序云开发的开发文档，里面可以直接复制黏贴到删除数据库方法。
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/remove.html
从文档里面复制删除的方法粘贴在代码里面，完善删除方法即可
delete: function (event) {
console.log(event)
db.collection('books').doc(this.data.id).remove({
success: function (res) {
console.log(res)
}
})
}
好的，其实很简单，就实现了小程序云开发实现删除更新功能了。
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，前端资源下载群：440185135
