基於商城實例的小程序購物車雲函數操做

前言:此文主題是介紹小程序的雲函數+數據庫的操做，對其它的頁面實現邏輯基本不作解釋。小程序雲函數對應數據庫的基礎功能無非是增刪改，此項目使用的雲函數也是用來添加商品，改變商品狀態，刪除商品。

項目基礎介紹

數據庫表

（由於沒有數據，因此只自建了幾個示例數據）

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…