微信小程序云开发实现增删改查功能

这篇文章主要为大家详细介绍了微信小程序云开发实现增删改查功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序云开发实现增删改查的具体代码，供大家参考，具体内容如下

首先按照微信小程序官方提示创建一个快速云开发小程序

大家可以点击此处下载源代码

实现效果如下：

在miniprogram->index的下修改下面三个文件

index.js如下：

 Page({ data: { id: '',//修改用来保存_id iSshow: true, inpVal: '', inp2Val: '', inp3Val: '', list: [] }, onLoad: function () { var that = this that.getUserMsg()//读取信息 }, //获取文本框内容 getName(e) { this.setData({ inpVal: e.detail.value }) }, getAge(e) { this.setData({ inp2Val: e.detail.value }) }, getCreated(e) { this.setData({ inp3Val: e.detail.value }) }, //获取信息 getUserMsg() { var that = this const db = wx.cloud.database() db.collection('datalist').get({ success: function (res) { console.log(res) that.setData({ list: res.data }) } }) }, //添加信息 setUserMsg() { var that = this const db = wx.cloud.database() db.collection('datalist').add({ data: { name: that.data.inpVal, age: that.data.inp2Val, created: that.data.inp3Val }, success: function (res) { console.log(res) that.setData({ inpVal: "", inp2Val: "", inp3Val:"" }) console.log(that.data.inpVal + '--' + that.data.inp2Val + '--' + that.data.inp2Val) that.getUserMsg() } }) }, //删除信息 delUserMsg(e) { var that = this const db = wx.cloud.database() var id = e.currentTarget.dataset.id db.collection('datalist').doc(id).remove({ success: function (res) { console.log(res) that.getUserMsg() } }) }, //修改回显 changeMsg(e) { var that = this var id = e.currentTarget.dataset.id const db = wx.cloud.database() db.collection('datalist').doc(id).get({ success: function (res) { that.setData({ inpVal: res.data.name, inp2Val: res.data.age, inp3Val:res.data.created, show: false, id: res.data._id }) } }) }, //更新提交 updetMsg(e) { var that = this var id = e.currentTarget.dataset.id const db = wx.cloud.database() db.collection('datalist').doc(id).update({ data: { name: that.data.inpVal, age: that.data.inp2Val, created:that.data.inp3Val }, success: function (res) { that.getUserMsg() that.setData({ inpVal: '', inp2Val: '', inp3Val:'', show: true }) } }) }, })

index.wxml如下：

   姓名: 年龄: 手机号:  姓名年龄手机号操作 {{item.name}}{{item.age}}{{item.created}} 修改

index.wxss如下：

 page { background: #f6f6f6; display: flex; flex-direction: column; justify-content: flex-start; font-size: 30rpx; } .box{ width: 90%; display: flex; background: grey } button{ width: 90%; height: 40px; line-height: 40px; margin-top: 20rpx; background:#ffffff; } .infoMsg{ width: 90%; margin: auto; margin-top: 20rpx; border: 1rpx solid #e2e2e2; font-size: 28rpx; } .infoMsg view{ display: flex; border-top: 1rpx solid #e2e2e2; } .infoMsg view>label{ flex: 1; height: 80rpx; line-height: 80rpx; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .infoMsg view>label:not(:first-child){ border-left: 1rpx solid #e2e2e2; } .infoMsg view>label text{ margin-right: 10rpx; border: 1rpx solid #e2e2e2; }

数据集合如下图：