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:关于更新数据
代开小程序云开发文档:
复制小程序云开发的更新数据库的方法,修改对应代码,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:删除数据的方法,还是打开小程序云开发的开发文档,里面可以直接复制黏贴到删除数据库方法。
从文档里面复制删除的方法粘贴在代码里面,完善删除方法即可
delete: function (event) { console.log(event) db.collection('books').doc(this.data.id).remove({ success: function (res) { console.log(res) } }) }
好的,其实很简单,就实现了小程序云开发实现删除更新功能了。