類似淘寶的搜索及購物車功能，如何在小程序中實現？
作者：鄭嘉偉
來源：知曉課堂
今天，我們依然將以「北江紡織牛仔新時尚」爲例，覆盤訂單收集類小程序的主要功能點是如何通過知曉雲（cloud.minapp.com）實現的，主要涉及搜索和購物車這 2 個功能。
搜索功能
在「北江紡織牛仔新時尚」中，搜索是比較基礎的功能，其實它就是一個查詢數據的過程。
我們從一個搜索的實例去講一下這個問題，假如我們是一個消費者，想要搜索一個褲型修身的、水洗顏色淺色的、成分全棉的童裝牛仔長褲，那麼我們應該怎麼做這個查詢呢？
看上去有點複雜，那麼我們先簡化一下，如何搜索童裝牛仔長褲的信息？
首先，我們需要有這樣一張數據表，存儲了商品的信息，也就是上一篇中我們講過的 product 表。
由於我們要搜索童裝牛仔長褲，那麼除了一個商品的其他基本信息外，我們肯定要爲童裝牛仔長褲設定一個字段用於我們的查詢，我們把這個字段定義爲 category_id。
根據實際的業務場景，一個產品可能會屬於很多不同的分類，所以我們把 category_id 設定爲數組類型。
現在我們的數據表定義已經初步完成了，那麼假設 product 的 table_id 是 2, 童裝的 category_id 是 3，牛仔長褲的 category_id 是 5，那麼在小程序端，參考知曉雲開發文檔，去獲取所有童裝牛仔長褲。
關注「知曉程序」微信公衆號，回覆「知曉雲」，獲取知曉雲開發文檔。
const TABLE_ID_PRODUCT = ‘2’
const KIDS_CLOTH_CATEGORY_ID = ‘3’
const JEANS_CLOTH_CATEGORY_ID = ‘5’
let Product = new wx.BaaS.TableObject(TABLE_ID_PRODUCT)
let query = new wx.BaaS.Query()
// 設置類別爲童裝牛仔長褲
query.in(‘category_id’, [KIDS_CLOTH_CATEGORY_ID, JEANS_CLOTH_CATEGORY_ID])
Product.setQuery(query).find().then( (res) => {
// 獲取商品成功
}, (err) => {
// 獲取商品失敗，需做錯誤處理
})
好的，現在搜索童裝牛仔長褲的問題解決。
回到之前那個更復雜的問題，搜索一個褲型修身的、水洗顏色淺色的、成分全棉的童裝牛仔長褲，其實就是往數據表上分別加上褲型、水洗顏色、成分的相關字段，然後在小程序端使用組合查詢去把這些查詢條件合併起來。
那麼我們現在嘗試查詢所有水洗顏色淺色的童裝牛仔長褲：
const TABLE_ID_PRODUCT = '2'
const KIDS_CLOTH_CATEGORY_ID = '3'
const JEANS_CLOTH_CATEGORY_ID = '5'
let targetColor = '淺'
let Product = new wx.BaaS.TableObject(TABLE_ID_PRODUCT)
let query1 = new wx.BaaS.Query()
let query2 = new wx.BaaS.Query()
// 設置類別爲童裝牛仔長褲
query1.in('category_id', [KIDS_CLOTH_CATEGORY_ID, JEANS_CLOTH_CATEGORY_ID])
query2.compare('color', '=', targetColor)
// 使用組合查詢 and
let andQuery = wx.BaaS.Query.and(query1, query2)
Product.setQuery(andQuery).find().then( (res) => {
// 獲取商品成功
}, (err) => {
// 獲取商品失敗，需做錯誤處理
})
上面講了根據篩選條件進行查詢，那麼做到搜索功能呢？
比如我輸入「童裝」，點擊搜索，然後小程序就返回所有童裝的商品列表。
這裏有一種比較簡單的做法是：給商品表定義一個 keyword 數組類型字段用於這種查詢，在用戶點擊搜索後，把用戶輸入的「童裝」作爲查詢條件添加到查詢中，那麼我們就會得到一個搜索結果列表。
數據查詢到這裏基本就展示完成了，關鍵在於：如何結合你的業務需求去一步步完善你的數據表的設計，然後纔是使用合適的查詢條件去獲取數據。
對於新手來說，設計出既能滿足業務需求又簡單優雅的數據表可能是一大挑戰，這個就要靠不斷實踐和經驗去完成了。
可以加入知曉雲開發交流羣跟我交流溝通 ?
購物車
在「北江紡織牛仔新時尚」進入商品詳情頁，我們可以選擇把商品添加到自己到購物車中。
點擊購物車，我們就會跳轉到購物車頁，可以選擇下單，那麼這個購物車功能是怎麼實現的呢？
首先，需要說明，在「北江紡織牛仔新時尚」爲購物過程中的信息存儲添加了如下幾個數據表：
product_sku， 存儲了某個商品的相應副產品（面料，掛卡）；
order_item，存儲了添加購物車中 product_sku 數量的信息；
order，存儲了某個訂單中的 order_item 列表，購物快照，地址等信息；
在商品詳情頁中，我們根據頁面的商品 id，可以在之前提到的 product 表獲取它的信息用於展示，在表 product_sku 中查詢它的相關副產品（面料，掛卡），在 order_item 表中查詢用戶之前的購物車信息。
這些都是我們用於生成購物車內容的基礎信息，在用戶選擇產品的數量並點擊添加到購物車之後，我們會向 order_item 新增或者更新相應的數據項，這些數據項其實就代表着最新的購物車信息。
點擊商品詳情頁中的購物車圖標，會直接跳轉到購物車頁，用戶可以在這裏選擇和修改 order_item 的相關信息，在這個過程中，如果修改 order_item 的相關信息，需要發送更新請求去更新數據庫中的信息。
點擊「下單」時，我們將會根據本次被選擇的最新 order_item 的數據項和之前用戶登記留下的個人信息等信息生成一條 order 記錄，這條記錄就可以用於北江紡織與用戶的聯繫溝通，去完成他們的線下訂單。
好了，購物車功能的實現思路基本上就是如此，可能沒有搜索功能講的那麼詳細，但是關鍵點仍然是在搜索功能中所說的，如何根據業務需求去設計合適的數據表和表結構，完成相應業務，這個需要不斷的實踐和累積經驗去完善了。
