微信小程序选项卡功能开发步骤与方法全解析
483
2023-11-08
微信小程序云开发实现增删改查功能
本文实例为大家分享了微信小程序云开发实现增删改查的具体代码，供大家参考，具体内容如下
首先按照微信小程序官方提示创建一个快速云开发小程序
大家可以点击此处-源代码
实现效果如下：
在miniprogram->index的下修改下面三个文件
index.js如下：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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如下：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<view class="container">
<view class=box style=background:#FFFFFF>
<label>姓名:</label>
<input data-value={{inpVal}} bindinput=getName value={{inpVal}}></input>
</view>
<view class=box style=background:#FFFFFF;margin-top:1rpx;>
<label>年龄:</label>
<input data-value={{inpVal}} bindinput=getAge value={{inp2Val}}></input>
</view>
<view class=box style=background:#FFFFFF;margin-top:10rpx;>
<label>手机号:</label>
<input data-value={{inpVal}} bindinput=getCreated value={{inp3Val}}></input>
</view>
<button wx:if={{show}} bindtap=setUserMsg>提交</button>
<button wx:if="{{!show}}" data-id="{{id}}" bindtap=updetMsg>确认修改</button>
</view>
<view class=infoMsg>
<view>
<label>姓名</label>
<label>年龄</label>
<label>手机号</label>
<label>操作</label>
</view>
<view wx:for="{{list}}">
<label>{{item.name}}</label>
<label>{{item.age}}</label>
<label>{{item.created}}</label>
<label>
<text data-id={{item._id}} bindtap=changeMsg>修改</text>
</label>
</view>
</view>
index.wxss如下：
数据集合如下图：
大家可以点击此处-源代码 ，有问题可以评论交流！
您可能感兴趣的文章:微信小程序云开发实现云数据库读写权限微信小程序云开发实现数据添加、查询和分页微信小程序云开发之使用云函数微信小程序云开发之使用云数据库微信小程序云开发之使用云存储微信小程序如何使用云开发微信小程序云开发（数据库）详解微信小程序云开发详细教程微信小程序云开发之云函数详解微信小程序云开发 搭建一个管理小程序
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~