基于商城实例的小程序购物车云函数操作

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

项目基础介绍

数据库表

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

product表为总商品列表，cart表为购物车中的商品列表。添加商品到购物车中，便会将product表中的相应数据放入cart表中，购物车页面渲染时便会根据cart表中的数据渲染页面。

云函数

3个云函数addProduct,changeNum,delete。分别对应添加商品，更改商品数量，删除商品。

1. addProduct效果演示

   

2. changeNum效果演示 将云数据库中cart表中的纸巾的num加1。

   

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

附：源码: github.com/yanqixuan/E…

Easy Mock: www.easy-mock.com/project/5ce…