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

项目七购物车模块开发任务一购物车模块开发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>

购物车页面主要包括上部购物车商品信息、中间购物车商品列表和底部购物车结算信息，每个商品左边有单选，底部可以通过全选操作商品，用户可以选中商品，或者滑动操作查看右边的商品。感

谢

观

看THANK项目七购物车模块开发任务二购物车页面详情ShoppingcartpageDetails

购物车页面设计应该注重用户界面的友好性和直观性。购物车页面应该具有清晰简洁的布局，突出显示重要信息，让用户一目了然。购物车详情页面应该包括商品名称、价格、数量、小计、删除和结算等基本信息。项目七购物车模块开发任务描述购物车商品列表属性类型描述bindchangeEventHandlecheckbox-group选中项发生改变时触发change事件，detail={value:[选中的checkbox的value的数组]}属性类型默认值描述valuestring

checkbox标识，选中时触发checkbox-group的change事件，并携带checkbox的valuedisabledbooleanfalse是否禁用checkedbooleanfalse当前是否选中，可用来设置默认选中colorstring#09BB07checkbox的颜色，同css的color

checkbox-group多项选择器，内部由多个checkbox组成。

购物车里的商品左边有复选框，使用小程序的表单组件checkbox，该组件包含了四个属性值。购物车商品数量

为商品数量“-”和“+”按钮添加reduceCount和addCount函数，实现购物车商品数据的增加与减少。购物车商品数量data:{

users:[

{name:'小明',age:28},

{name:'小红',age:39},

{name:'小李',age:40},

{name:'小张',age:30}

]},onLoad(options){

letinfo=this.data.users;

info.forEach(function(item,index){

console.log(index+'姓名：'+info[index].name+'年龄：'+info[index].age);

})

info.forEach((item,index)=>{

console.log(index+'姓名：'++'年龄：'+item.age);})}

forEach()方法用于调用数组的每个元素，并将元素传递给回调函数。购物车商品数量

settleCount(){

let

totalPrice=0;

this.data.cartList.forEach(item=>{

if(item.isChecked){

totalPrice+=item.salePrice*item.

quantity

}

})

this.setData({

totalPrice:totalPrice

})

},

在pages/goodsCart/goodsCart.js文件中，不管是减号还是加号按钮，当点击时，都需要进行总金额的计算，所以先完成计算总金额函数settleCount，获得选中的商品，如果商品isChecked属性为真时，则对商品的金额进行计算。代码如下。购物车商品列表

<view

class="oper">

<view

class="reduce"data-id="{{item.id}}"

bindtap="reduceCount"

>-</view>

<input

value="{{item.quantity}}"

type="number"/>

<view

class="add"

data-id="{{item.id}}"

bindtap="addCount">+</view>

<viewclass="btn-del"data-index="{{item.id}}"bindtap="btnDel">删除</view></view>购物车底部信息

<view

class="total-cart">

<view

class="all">

<checkbox-group

bindchange="checkAll">

<checkbox

value="1"

checked="false"></checkbox>

<text>全选</text>

</checkbox-group>

</view>

<view

class="total-price">

总价：<text

class="price">￥{{totalPrice}}</text>

</view>

<view

class="btn

btn-primary">去结算</view>

</view>

购物车底部信息包含了三个内容，全选的复选框，选中的商品总价，结算按钮。在pages/goodsCart/goodsCart.wxml文件中，为"total-cart"视图容器编写页面布局代码：购物车为空状态<view

wx:else

class="no-result">

<view

class="no-content">

<image

src="/images/cring.png"></image>

<text>暂无商品</text>

<button

class="go-list"

bindtap="gotoList">前往添加商品</button>

</view></view>

当购物车页面为空时，购物车页面将定向到商品列表页面。购物车为空状态

gotoList:function(){

wx.navigateTo({

url:

'/pages/goodsList/goodsList'

})

}

在pages/goodsCart/goodsCart.js文件中，实现bindtap="gotoList"，当购物车为空时，跳转到商品列表页面选购商品。购物车为空状态表wx.navigateTo参数属性类型必填描述urlstring是需要跳转到应用内非tabBar页面的路径(代码包路径),路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如'path?key=value&key2=value2'eventsObject否页面间通信接口，用于监听被打开页面发送到当前页面的数据。successfunction否接口调用成功的回调函数，eventChannel参数，和被打开页面进行通信failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

wx.navigateTo(Objectobject)保留当前页面，跳转到应用内的某个页面。但是不能跳到tabbar页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。购物车为空状态

wx.navigateTo({

url:'test?id=1',events:{//为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据

acceptDataFromOpenedPage:function(data){console.log(data)},},success:function(res){//通过eventChannel向被打开页面传送数据res.eventChannel.emit('acceptDataFromOpenerPage',{data:'test'})}})

举例说明wx.navigateTo(Objectobject)的使用。课程思政

党的二十大报告提出:“要实现高水平科技自立自强，建设科技强国”，同学们，你觉得如何加快建设科技强国，从而实现高水平科技自立自强?同学们通过小组合作、翻阅相关文件完成以下脑图，如图所示。感

谢

观

看THANK项目七购物车模块开发任务三购物车结算金额Cartpaymentamount在商城系统中，购物车结算是必备的一个环节。购物车结算功能是遍历每个模块中的商品⼩计进⾏累加就是购物车结算总额。本案例提供了一种购物结算方法和购物车，根据用户获取已购买的商品信息，进行购物结算，提高购物效率，进而提高用户体验。项目七购物车模块开发任务描述单选产品金额计算在pages/goodsCart/goodsCart.wxml文件中，为checkbox设置value、checked属性值。<checkbox

value="{{item.id}}"

checked="{{item.isChecked}}"></checkbox>在pages/goodsCart/goodsCart.js文件中，为单选checkbox-group绑定checkboxChange处理函数。<checkbox-group

bindchange="checkboxChange"

>此代码省略</checkbox-group>

单选功能可以改变选中状态，计算总价和商品总数量，购物车中可以通过增加或减少按钮来修改商品数量。单选产品金额计算-every函数vararray=;varresult=array.every(function(value,index,arr){returnvalue>3;});console.log(result);在这个例子中，数组中的第一个元素1不满足条件（value>3），因此every函数立即返回false，不会继续遍历剩余的元素。

every函数是JavaScript中的一个数组方法，用于检测数组中的所有元素是否都符合指定的条件。every函数遍历数组中的每一个元素，如果所有元素都满足回调函数规定的条件，则返回true；如果数组中有一个元素不满足条件，则立即停止遍历并返回false。单选产品金额计算

let

isAll=list.every(item=>item.isChecked)

that.setData({

totalPrice:totalPrice,

isCheckAll:isAll

})

使用every()方法检测商品的isChecked是否为true，如果为true，则对商品进行统计。单选产品金额计算-some()函数array.some(function(currentValue,index,arr),thisValue)function(currentValue,index,arr)必须。回调函数，数组中的每个元素都会执行这个函数。currentValue必须