前言:此文主题是介绍小程序的云函数+数据库的操作，对其它的页面实现逻辑基本不做解释。小程序云函数对应数据库的基础功能无非是增删改，此项目使用的云函数也是用来添加商品，改变商品状态，删除商品。
项目基础介绍
数据库表
（因为没有数据，所以只自建了几个示例数据）
product表为总商品列表，cart表为购物车中的商品列表。添加商品到购物车中，便会将product表中的相应数据放入cart表中，购物车页面渲染时便会根据cart表中的数据渲染页面。
云函数
3个云函数addProduct,changeNum,delete。分别对应添加商品，更改商品数量，删除商品。
- addProduct效果演示
- changeNum效果演示
将云数据库中cart表中的纸巾的num加1。
- delete效果演示
具体实现
1.添加(addProduct)
思路
- 点击商品进入页面时，获取商品的id，并在点击加入购物车时调用addProduct云函数，传入商品的id。
- 在addProduct中，根据此id，先去cart购物车数据表中查询是否存在此商品。
- 如果存在则将商品数量加1。
- 如果不存在，则从productList总商品列表中，查询到此id的商品信息，并取出需要的信息(商品缩略图，商品名，店铺名，规格，单价)，存入cart购物车数据表。
- 一般数据初始化在onLoad生命周期中，所以在此需要在onShow中重新去数据库中查询并设置数据，否则会造成，修改了数据库但页面并未更新的情况。
product.js
addProduct(){
wx.cloud.callFunction({
name:'addProduct', //调用云函数
data:{
_id:this.data._id
},
success(res){
Toast.success('加入成功');
},
fail:console.error
})
},
addProduct.js
let res = await db.collection('productList').where({ //在商品表中获取此id的商品信息
_id
}).get()
let cart = await db.collection('cart')
let resSelect = await cart.where({ //在购物车表中获取此id的商品信息
_id
}).get()
if (resSelect.data.length === 0) { //购物车无此id的商品，则添加此id的商品信息
const name = res.data[0].name;
const type = res.data[0].info.type;
const price = res.data[0].price;
const title = res.data[0].info.shop.name;
const picture = res.data[0].picture;
await cart.add({
data: {
_id,
name,
type,
price,
title,
picture,
num: 1
}
})
} else { //购物车存在此商品，数量+1
await cart.where({
_id
}).update({
data: {
num: resSelect.data[0].num + 1
}
})
}
2.修改数量(changeNum)
借用了vant步进器
思路
- vant步进器提供了两个方法，bind:minus,bind:plus。点击减按钮时调用minus方法,加按钮时调用plus方法。
<van-stepper value="{{ item.num }}" bind:minus="minus" bind:plus="plus" id='{{item._id}}' data-index="{{index}}" />
-
因为商品列表是循环出来的，在点击按钮时获取点击的这一项商品的下标(index),并执行相关的总价的数据设置。
-
minus,plus方法调用同一个云函数changeNUm,只是传入不同的flag值，云函数通过flag值判断执行 + 或 - 操作，并修改数据库的值，自动计算此商品的总价。
-
因为用云函数去操作数据库需要时间，所以如果等操作结束后再计算会有延迟效果，所以点击加减按钮时就需要立刻计算，刷新页面。
-
同上，在onShow中重新查询设置一遍数据。
minus(event) {
let cartProduct = this.data.cartProduct
let index = event.target.dataset.index; //获取当前的index
cartProduct[index].num--;
let id = event.target.id;
let num = cartProduct[index].num;
cartProduct[index].totalPrice = cartProduct[index].price * num //设置更改后的总价
this.setData({
cartProduct
})
wx.cloud.callFunction({
name: 'changeNum', //调用changeNum云函数
data: {
flag: 0, //plus方法中 flag 为1
id,
index,
num
}
})
},
changeNum.js
const _ = db.command
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
let id = event.id;
if (event.flag === 0) {
await db.collection('cart').doc(id).update({
data: {
num: _.inc(-1)
},
fail: console.error
})
} else {
await db.collection('cart').doc(id).update({
data: {
num: _.inc(1)
},
fail: console.error
})
}
3.删除(delete)
思路
- 根据id从数据库中删除此商品的所有信息
- 重新设置一次数据，让顶部购物车商品数量自动更改。
delete(event) {
let that = this;
Dialog.confirm({
title: '提示',
message: '确认删除此商品吗'
}).then(() => {
let id = event.target.id;
console.log(id)
wx.cloud.callFunction({
name: 'delete', //调用delete云函数
data: {
id
},
success(res){
that.setdata()
console.log(res)
}
})
});
},
delete.js
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database({
env: 'http-product'
})
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
const _id = event.id;
await db.collection('cart').doc(_id).remove()
return {
_id,
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
}
结语
小程序云函数+数据库操作并不是很复杂的操作，写项目时也时常需要使用，所以学习小程序的过程中，云函数与云数据库是应该掌握的技能之一。此文也只是简要介绍了一下云函数的基本操作。建议在使用云函数操作数据库时注意以下几个问题:
1.异步: 因为云函数执行需要时间，所以可能出现云函数未执行完，就进行赋值等其他语句的执行。 2.数据一致性: 执行完数据库操作后，页面上的数据情况与数据库的数据状态不一致。需要在执行完操作后执行页面数据更新的操作。
Easy Mock:www.easy-mock.com/project/5ce…
