微信小程式如何實現購物車功能
不管是商城類還是餐飲類小程式，都需要通過下單完成交易，因此都需要有一個加入購物車的操作。以往購物車功能基本都是通過大量的 DOM 操作來實現，由於小程式不是基於web以此無法建立DOM。其實跟 vue.js 的用法非常像。
先來弄清楚購物車的需求。
單選、全選和取消，而且會隨著選中的商品計算出總價
單個商品購買數量的增加和減少
刪除商品。當購物車為空時，頁面會變為空購物車的佈局
根據設計圖，我們可以先實現靜態頁面。接下來，再看看一個購物車需要什麼樣的資料。
首先是一個商品列表(carts)，列表裡的單品需要：商品圖(image)，商品名(title)，單價(price)，數量(num)，是否選中(selected)，商品id(id)
然後左下角的全選，需要一個欄位(selectAllStatus)表示是否全選了
右下角的總價(totalPrice)
最後需要知道購物車是否為空(hasList)
知道了需要這些資料，在頁面初始化的時候我們先定義好這些。
初始化程式碼：
Page({
data: {
carts:[], // 購物車列表
hasList:false, // 列表是否有資料
totalPrice:0, // 總價，初始為0
selectAllStatus:true // 全選狀態，預設全選
},
onShow() {
this.setData({
hasList:true, // 既然有資料了，那設為true吧
carts:[
{id:1,title:\'新鮮芹菜 半斤\',image:\'/image/s5.png\',num:4,price:0.01,selected:true},
{id:2,title:\'素米 500g\',image:\'/image/s6.png\',num:1,price:0.03,selected:true}
]
});
},
})
購物車列表資料我們一般是通過請求伺服器拿到的資料，所以我們放在生命週期函式裡給carts賦值。想到每次進到購物車都要獲取購物車的最新狀態，而onLoad和onReady只在初始化的時候執行一次，所以我需要把請求放在onShow函式裡。
計算總價
總價 = 選中的商品1的 價格 * 數量 + 選中的商品2的價格 * 數量 + …
根據公式，可以得到
getTotalPrice() {
let carts =this.data.carts; // 獲取購物車列表
let total = 0;
for(let i = 0;i<carts.length; i++)="{ =" 迴圈列表得到每個資料<="span=" style="margin: 0px; padding: 0px; outline: none;">
if(carts[i].selected){ // 判斷選中才會計算價格
total +=carts[i].num * carts[i].price; // 所有價格加起來
}
}
this.setData({ // 最後賦值到data中渲染到頁面
carts: carts,
totalPrice:total.toFixed(2)
});
}
頁面中的其他操作會導致總價格變化的都需要呼叫該方法。
選擇事件
點選時選中，再點選又變成沒選中狀態，其實就是改變 selected 欄位。通過 data-index=”{{index}}” 把當前商品在列表陣列中的下標傳給事件。
selectList(e) {
const index =e.currentTarget.dataset.index; // 獲取data- 傳進來的index
let carts =this.data.carts; // 獲取購物車列表
const selected =carts[index].selected; // 獲取當前商品的選中狀態
carts[index].selected= !selected; // 改變狀態
this.setData({
carts: carts
});
this.getTotalPrice(); // 重新獲取總價
}
全選事件
全選就是根據全選狀態 selectAllStatus 去改變每個商品的 selected
selectAll(e) {
let selectAllStatus =this.data.selectAllStatus; // 是否全選狀態
selectAllStatus =!selectAllStatus;
let carts =this.data.carts;
for (let i = 0; i< carts.length; i++) {
carts[i].selected = selectAllStatus; // 改變所有商品狀態
}
this.setData({
selectAllStatus:selectAllStatus,
carts: carts
});
this.getTotalPrice(); // 重新獲取總價
}
增減數量
點選+號，num加1，點選-號，如果num > 1，則減1
// 增加數量
addCount(e) {
const index =e.currentTarget.dataset.index;
let carts =this.data.carts;
let num =carts[index].num;
num = num + 1;
carts[index].num =num;
this.setData({
carts: carts
});
this.getTotalPrice();
},
// 減少數量
minusCount(e) {
const index =e.currentTarget.dataset.index;
let carts =this.data.carts;
let num =carts[index].num;
if(num <= 1){
return false;
}
num = num - 1;
carts[index].num =num;
this.setData({
carts: carts
});
this.getTotalPrice();
}
刪除商品
點選刪除按鈕則從購物車列表中刪除當前元素，刪除之後如果購物車為空，改變購物車為空標識hasList為false
deleteList(e) {
const index =e.currentTarget.dataset.index;
let carts =this.data.carts;
carts.splice(index,1); // 刪除購物車列表裡這個商品
this.setData({
carts: carts
});
if(!carts.length){ // 如果購物車為空
this.setData({
hasList:false // 修改標識為false，顯示購物車為空頁面
});
}else{ // 如果不為空
this.getTotalPrice(); //重新計算總價格
}
}
小程式購物車功能開發把各個功能模組拆分單獨進行開發，基本與網頁端和APP端開發思路如出一轍。雖然一個購物車功能比較簡單，但是裡面涉及到微信小程式的知識點還是比較多的。