最近在学习微信小程序的云开发，本想着按照原来的方法学，但是又突然想起来，好多知识学过之后就会在不知不觉中忘了，故产生了写博客记录下所学内容的想法。好，我们直接进入正题。
以下附上学习的链接🔗
http://【【小胖商城】一人一本一天能做到的云开发实战项目 微信小程序云开发系列课程】https://www.bilibili.com/video/BV1W7411p77H?p=9&vd_source=08211467b0aece55c48e430a7dbc4ad8
以下的内容来自链接和笔记
目录
1. 云开发数据的使用之添加
1.1 云端数据库初始化
1.2 云端数据添加的方法
1.2.1 首先在云控制台数据库里添加一个集合
1.2.2 获取云端数据集合
1.3 用云开发的数据库添加方法向云数据新增数据
2. 云开发数据库的使用之删除数据
2.1 初始化云端数据库
2.2 删除数据
3.云开发数据库的使用之修改数据
3.1 修改数据首先需要从主页面跳转到详情，并传递点击这条数据的id
3.2 在详情页面加载时获取到传值过来的id
3.3 在页面加载函数里获取这个id的数据，并在页面上显示
3.4 修改数据
4. 云开发数据库的使用之获取数据并展示数据
4.1 初始化云端数据库 + 4.2 获取数据集合
4.3 获取数据
4.4 展示数据
1. 云开发数据的使用之添加
在开始使用数据库API进行增删改查操作之前，需要先获取数据库的引用
1.1 云端数据库初始化
//index.js
const db = wx.cloud.database();
//初始化云端数据库 + 获取云端数据的集合1.2 云端数据添加的方法
1.2.1 首先在云控制台数据库里添加一个集合
到这里云数据库就创建好了。
1.2.2 获取云端数据集合
//index.js
const products = db.collection("products");
//这里的products是我的数据库的名字，你写的话需要添加上自己刚刚新建数据库的名称。1.3 用云开发的数据库添加方法向云数据新增数据
//index.js
onSumnit: function (res) {
add 数据的添加
products.add({
data: {
name: res.detail.value.name,
price: res.detail.value.Price,
dec: res.detail.value.dec
//这里的字段名是自己取的，表示需要向数据库传送的数据
}
}).then(res => {
console.log(res)
})
}
好了，完事。
为了防止以后看不懂，直接附上原来的代码（跟着学敲的代码）
<!--addProduct.wxml-->
<form bindsubmit="onSumnit">
Name:<input name= "name" placeholder="请输入产品名称："></input>
Price:<input name= "Price" placeholder="请输入价格："></input>
Dec:<input name= "dec" placeholder="请输入描述："></input>
<button form-type="submit">提交</button>
</form>
// addProduct.wxss
// addProduct.js
//初始化云端数据库 + 获取云端数据的集合
const db = wx.cloud.database();
const products = db.collection("products");
Page({
data: {
},
onSumnit: function (res) {
if (res.detail.value.name) {
console.log(res.detail.value)
//添加数据
products.add({
data: {
name: res.detail.value.name,
price: res.detail.value.Price,
dec: res.detail.value.dec
}
}).then(res => {
console.log(res)
})
} else {
wx.showToast({
title: '请输入添加内容',
icon: "error",
})
}
},
})2. 云开发数据库的使用之删除数据
2.1 初始化云端数据库
//index.js
const db = wx.cloud.database();
const products = db.collection('products');2.2 删除数据
//删除数据
del:function(){
products.doc(this.data.product._id).remove().then(res=>{console.log(res)})
},
//id 是每一个数据存入云数据库自动产生的，可按上面的方法打开数据库擦查看，也可通过函数获得
好的，第二部分收工！
下面是学习时的代码：
<!-- detail.wxml -->
name: <label>{{product.name}}</label>
price: <label>{{product.price}}</label>
dec: <label>{{product.dec}}</label>
<!-- <button bindtap="updata" type="primary">更新数据</button> -->
<button bindtap="del" type="primary">删除数据</button>/* demo/detail/detail.wxss *///detail.js
const db = wx.cloud.database();
const products = db.collection('products')
Page({
data: {
product: {}
},
//更新数据
updata:function(){
products.doc(this.data.product._id).update({
data:{
price:1040
},
success:function(){
wx.showToast({
title: '已修改，刷新查看'
})
},
fail:function(res){
wx.showToast({
title: '更新失败',
icon:"error"
})
console.log(res)
},
})
},
//删除数据
del:function(){
products.doc(this.data.product._id).remove().then(res=>{console.log(res)})
},
onLoad:function(options) {
console.log(options)
// 获取得到的id的值
let id = options.id
//获取id对应的数据
products.doc(id).get().then(res => {
// console.log(res.data)
this.setData({
product: res.data
})
})
},
})3.云开发数据库的使用之修改数据
3.1 修改数据首先需要从主页面跳转到详情，并传递点击这条数据的id
<!-- index.wxml -->
<view wx:for="{{products}}" wx:key="_id">
<navigator url="../detail/detail?id={{item._id}}">
name:<label>{{item.name}}</label>
price:<label>{{item.price}}</label>
dec:<label>{{item.dec}}</label>
</navigator>
</view>3.2 在详情页面加载时获取到传值过来的id
//detail.js 文件中 刚加载时 获取跳转（index-> detail）页面时,传过来的id
onLoad:function(options) {
console.log(options)
// 获取得到的id的值
let id = options.id
//获取id对应的数据
products.doc(id).get().then(res => {
// console.log(res.data)
this.setData({
product: res.data
})
})
},3.3 在页面加载函数里获取这个id的数据，并在页面上显示
//detail.js
const db = wx.cloud.database();
const products = db.collection('products')
Page({
data: {
product: {}
},
//更新数据
updata:function(){
products.doc(this.data.product._id).update({
data:{
price:1040
},
success:function(){
wx.showToast({
title: '已修改，刷新查看'
})
},
fail:function(res){
wx.showToast({
title: '更新失败',
icon:"error"
})
console.log(res)
},
})
},
//删除数据
del:function(){
products.doc(this.data.product._id).remove().then(res=>{console.log(res)})
},
onLoad:function(options) {
console.log(options)
// 获取得到的id的值
let id = options.id
//获取id对应的数据
products.doc(id).get().then(res => {
// console.log(res.data)
this.setData({
product: res.data
})
})
},
})代码在上面，不重复写了。
3.4 修改数据
文章来源：https://www.toymoban.com/news/detail-444163.html
4. 云开发数据库的使用之获取数据并展示数据
4.1 初始化云端数据库 + 4.2 获取数据集合
//index.js
const db = wx.cloud.database();
const products = db.collection('products');4.3 获取数据
//index.js
onLoad(options) {
products.get().then(res => {
console.log(res.data)
this.setData({
products: res.data
})
})
}4.4 展示数据
<!-- index.wxml -->
<view>
<view wx:for="{{products}}" wx:key="_id">
<navigator url="../detail/detail?id={{item._id}}">
name:<label>{{item.name}}</label>
price:<label>{{item.price}}</label>
dec:<label>{{item.dec}}</label>
</navigator>
</view>
</view>学习代码文章来源地址https://www.toymoban.com/news/detail-444163.html
<!-- index.wxml -->
<view>
<view wx:for="{{products}}" wx:key="_id">
<navigator url="../detail/detail?id={{item._id}}">
name:<label>{{item.name}}</label>
price:<label>{{item.price}}</label>
dec:<label>{{item.dec}}</label>
</navigator>
</view>
</view>view{
margin-bottom: 20rpx;
}//初始化数据库
const db = wx.cloud.database();
const products = db.collection('products')
Page({
data: {
products: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
products.get().then(res => {
console.log(res.data)
this.setData({
products: res.data
})
})
}
})到了这里，关于微信小程序云开发之增删改查的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[golang gin框架] 42.Gin商城项目-微服务实战之后台Rbac微服务角色增删改查微服务](https://imgs.yssmx.com/Uploads/2024/02/608343-1.png)
![[golang gin框架] 44.Gin商城项目-微服务实战之后台Rbac微服务之权限的增删改查微服务](https://imgs.yssmx.com/Uploads/2024/02/620311-1.png)
