前言:此文主题是介绍小程序的云函数+数据库的操作,对其它的页面实现逻辑基本不做解释。小程序云函数对应 数据库 的基础功能无非是增删改,此项目使用的云函数也是用来添加商品,改变商品状态,删除商品。
项目基础介绍
数据库表
(因为没有数据,所以只自建了几个示例数据)
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方法。
因为商品列表是循环出来的,在点击按钮时获取点击的这一项商品的下标(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.数据一致性: 执行完数据库操作后,页面上的数据情况与数据库的数据状态不一致。需要在执行完操作后执行页面数据更新的操作。