微信小程序购物车功能的实现（微信小程序开发购物车支付）

简介

历史上，购物车主要是通过许多 DOM 操作来实现的。 其实使用微信小程序和vue.js非常相似。 接下来我们看看小程序是如何实现购物车功能的。

要求

首先，了解购物车要求。

单选、全选及取消，根据所选商品计算总金额

增加/减少单品购买数量

删除产品。 如果购物车为空，页面将更改为空购物车布局。

按照蓝图，可以先实现静态页面。 接下来，让我们看一下您的购物车中需要的数据类型。

第一个是产品列表（购物车）。 列表中的商品必须有商品图片（image）、商品名称（title）、单价（price）、数量（num）、是否选中（selected）、商品ID（id）。

然后选择左下角的全部。 这里需要一个字段（selectAllStatus）来表示是否全部选中

右下角总价（totalPrice）

最后，购物车为空（hasList）

我们知道我们需要这些数据，所以我们在页面初始化时首先定义它们。

代码实现

初始化

Page({ data: { car​​ts:[], // 购物车列表 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/s6.png',num:1,价格:0.03,selected:true} ] }); },})

通常，购物车列表数据是通过请求服务器来检索的，因此您将其放入生命周期函数中并为购物车分配一个值。 我本想每次有人进入购物车时获取购物车的最新状态，但是onLoad和onReady在初始化期间只运行一次，所以我必须将请求放在onShow函数中。 （这里假设是假数据）

布局wxml

修复之前写的静态页面并绑定数据。

{{item.title}} ¥{{item.price}} - {{item.num}} + × 全选 ¥{{totalPrice}}

计算总价

总价=所选产品1价格*数量+ 所选产品的价格 2 * 数量 +。 ..根据公式，我们可以得到 getTotalPrice() { let Carts = this.data.carts; // 获取购物车列表 let Total = 0;(let i = 0; i<carts.length; i++) { // 循环遍历列表并获取每条数据 if(carts[i].selected) { // 仅当选中的总金额 += Cart[ 时才计算价格i].num * Cart[i].Price; // 对所有价格求和} } this.setData({ // 最后将值赋给数据并将其渲染到页面 Carts : Carts, TotalPrice: Total.toFixed(2) });}

此方法必须： 调用页面上的其他操作导致总价发生变化。

选择事件

点击选择，再次点击取消选择。 事实上，所选字段将会改变。 传递 data-index="{{index}}" 将列表数组中的当前产品索引传递给事件。

selectList(e) {
const Index = e.currentTarget.dataset.index; // 获取data-传递的索引
let Carts = this .data.carts ; // 获取购物车列表
const selected = Carts[index].selected; // 获取当前商品的选中状态
Carts[index].selected = !selected; // 更改状态Status
this.setData({
Cart: Cart
});
this.getTotalPrice(); // 获取总价
}

全选事件

全选是根据选择状态改变每个商品的选择 selectAllStatus

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,
Cart: Cart
});
this .getTotalPrice( ); //检索总价。
}

增加或减少数量。

单击 + 符号将数字加 1，然后单击 k3。 num > 1，然后减1

//增加数量
addCount(e) {
constindex = e.currentTarget.dataset.index;
let Carts = this. data.carts;
让 num = carts[index].num;
num = num + 1;
carts[index].num = num;
this.setData({
购物车: 购物车
});
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({
购物车: 购物车
});
this.getTotalPrice();
}

删除产品

单击“删除”按钮可从购物车列表中删除当前元素。 如果删除后购物车为空，则将购物车空标志 hasList 更改为 false。

deleteList(e) { constindex = e.currentTarget.dataset.index; let cart = this.data.carts; cart.splice(index,1); // 从购物车列表中删除该商品 this.setData ({ Cart: Cart }); if(!carts .length){ // 如果购物车为空 this.setData({ hasList: false // 将标志更改为 false 并设置购物 显示空购物车页面}); }else{ // 如果不为空，则 this.getTotalPrice(); // 重新计算总价 } } 概述

购物车功能比较简单，但是，微信小程序还是包含了很多知识点，适合初学者练习和掌握。

推荐教程：《微信小程序》

下载微信App

微信是一款支持通过手机网络发送语音消息、视频、照片和文字的移动通讯软件。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

这几篇文章你可能也喜欢：

• 一个邮箱可以包含多个微信小程序（一个邮箱可以包含多个微信小程序账号）
• 如何使用小程序画布绘制二维码（如何使用小程序画布绘制二维码）
• 如何使用Taro + Vue3开发小程序（练习）
• 我们简单分析一下如何从小程序跳转到H5页面。 （分析示例）（小程序可以跳转网页吗？）
• 小程序双线程模型详解（小程序多线程）

本文由主机参考刊发，转载请注明：微信小程序购物车功能的实现（微信小程序开发购物车支付） https://zhujicankao.com/142310.html