购物车注册程序编写c语言,基于商城实例的小程序购物车云函数操作

前言:此文主题是介绍小程序的云函数+数据库的操作，对其它的页面实现逻辑基本不做解释。小程序云函数对应 数据库 的基础功能无非是增删改，此项目使用的云函数也是用来添加商品，改变商品状态，删除商品。

项目基础介绍

数据库表

(因为没有数据，所以只自建了几个示例数据)

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.数据一致性: 执行完数据库操作后，页面上的数据情况与数据库的数据状态不一致。需要在执行完操作后执行页面数据更新的操作。