微信小程序开发项目实战（微课版）课件 7-1 课件-购物车模块开发

项目七购物车模块开发任务一购物车模块开发Shoppingcartmoduledevelopment在小程序开发中，购物车模块一般包括商品列表、商品金额计算、商品数量增减、商品所选规格等，小程序提供了各类API和组件为实现商品购物车提供了便利。项目七购物车模块开发任务描述购物车功能6、底部添加结算按钮在底部添加“全选”按钮、“合计”文本、“去结算”按钮，并绑定相应的事件。5、计算选中商品的总金额

在事件中，更新本地缓存中的商品信息，并计算选中商品的总金额。4、列表中添加组件在列表中添加选择框、数量输入框、删除按钮等控件，并绑定相应的事件。3、读取本地缓存

在购物车页面读取本地缓存中的商品信息，并展示在列表中。

2、商品信息存入本地缓存在点击事件中，将商品信息存入本地缓存中，并提示用户“加入成功”。1、“加入购物车”按钮

在商品详情页添加“加入购物车”按钮，并绑定点击事件。实现购物车

购物车功能是指在电商平台上，用户可以将自己想要购买的商品添加到一个虚拟的购物篮中，然后在合适的时候进行结算和支付的功能。购物车功能可以让用户更方便地浏览和比较商品，也可以让用户更灵活地控制自己的消费预算和时间。购物车功能-逻辑实现wx.login获取code码登录成功后，显示购物车页面获取当前被点击的商品的索引值商品数量加减删除1、登录授权3、购物车商品数量操作获取本地token从服务器拿到的物品数据2、wx.request请求购物车任何一次触发该函数，都会重新计算价格再进行选中项的价格累加6、计算总价会触发计算总价的方法4、单选事件每个商品都应该是选中状态会触发计算总价的方法5、全选事件逻辑实现过程定义基础数据Page({

data:

{

cartList:[{

id:1,

goodsNo:'202108675',

thumbnail:'/images/goods1.jpg',

title:'澳洲腊梅鲜花|花期长|有香味水养冬天应季',

quantity:2,

salePrice:72,

color:'红'

}

],

//购物车商品列表

colorGoods:[],

//购物车里商品所选的颜色

hasResult:true,

//判断购物车里是否有数据

isChecked:false,

//单选，默认为false

isCheckAll:false,

//全选，默认为false

},})

打开pages/goodsCart/goodsCart.js文件的data对象中定义基础数据，代码如下所示。定义基础数据

cartList是指购物车商品列表，colorGoods是指选中购买商品的颜色，hasResult用于判断购物车里是否有数据。isChecked用于商品左侧复选框，定义单个商品是否被选中。isCheckAll用于页面底部全选复选框，定义购物车中的商品是否被选中。购物车模块

在小程序开发中，购物车模块一般包括商品列表、商品金额计算、商品数量增减、商品所选规格等，小程序提供了各类API和组件为实现商品购物车提供了便利。购物车视图页面<view

class="cart">

<block

wx:if="{{hasResult}}">

<view

class="top-cart"></view>

<view

class="item-list"></view>

<view

class="total-cart"></view></block><view

wx:else

class="no-result"></view></view>

购物车页面主要包括上部购物车商品信