欢迎来到miaomiaoXiong的segmentfault微信小程序--（与唯品会的粉红邂逅？？？）买买买，双十二虽然刚刚过去，唯品会的折扣依然火爆。一打开页面，粉红色的首页映入眼帘，琳琅满目的商品让月光族的我看得眼花缭乱。就算买不起，那就自己写一篇，把自己喜欢的产品一个个推到手推车里。(?)给大家分享一个微信小程序，把唯品会里的精品推送到你的购物车里。主要功能是实现对购物车的添加功能。抛个代码来看看：主页面：wheel播放图片的trick是常用的，代码如下：index.wxml：使用swiper组件，在里面放置blockwx:for循环电影图片数组，使用swiper-再次item依次输出item.url的图片地址，可以看到我们的轮播时间到了。swiper属性具体Tips动画效果1.购物车摆动动画两个小动画：添加购物车左右摆动的动画效果，添加收藏中小爱心的动画效果。点击图中的购买图片，我们的购物车会扭动它的身子，表示已经加入购物车?。具体代码如下：在wxml中添加animation="{{rorateAnimation}}"动画。动画动画在对应的js中实现购物车添加动画，当goumai:时function()被触发，创建一个动画wx.createAnimation()，并使用animation.rotate().step()实现购物车摆动的过程。代码如下：biastapevent//购买点击事件，触发时使购物车图片放大goumai:function(event){varanimation=wx.createAnimation({duration:100,})//购物车旋转动画。旋转（30）.step（）；animation.rotate(0).step();animation.rotate(-30).step();animation.rotate(0).step();this.setData({rorateAnimation:animation.export(),})},2.爱心收藏动画送走购物购车动画，这里分享一个喜欢的动画给大家，Love?类似之前的购物车动画，先我们在wxml中绑定事件bindtap='shoucang'，使用animation="{{enlargeAnimation}}"来获取动画效果，代码如下：js文件也使用了wx.createAnimation()创建动画，animation.opacity(0.6).scale(0.9).step();//修改透明度，放大//收藏，动画放大效果shoucang:function(event){varanimation=wx.createAnimation({duration:700,})//图片放大animation.opacity(0.6).scale(0.9).step();//修改透明度，放大this.setData({enlargeAnimation:animation.export()})}，你是不是觉得超级简单，通过一个事件绑定来炫耀一下你的神操作接下来，是认真的时候了。以上只是一个简单的页面截取。我们需要把自己喜欢的东西加入购物车，保持清醒的头脑，跟着我理清购物车的逻辑？数据流程步骤1.easy-mock创建数据首先我们需要在easy-mock上创建自己的数据，点击easy-mock通过wx.request({url:"...."}),代码示例如下：onLaunch(options){//请求数据wx.request({url:'https://www.easy-mock.com/moc...',success:(response)=>{//console.log(response.data.data);//通过this.globalData.movi??es获取easy-mock中的movies数组,//除了全局变量的js，其他js页面需要定义constapp=getApp()获取数据，//使用全局数据this.globalData.movi??es=response.data.data.movi??es,this.globalData.img=response.data.data.img,this.globalData.goods=response.data.data.goods}})},2.设置全局变量由于商品页面是加入购物车然后在购物车页面显示，所以我额外设置了一个全局数组buy来显示我在购物车页面上添加的项目的详细信息（图片、价格）、数量等。),app.js中的代码如下：globalData:{buy:[]}3.获取全局数据并引用商品页面js文件中通过onLoad:function()从全局获取数据onLoad:function(){this.setData({movies:app.globalData.movi??es,goods:app.globalData.goods});4.bindtap事件绑定通过在wxml中绑定事件bindtap='buy'将选中的商品放入我们的购物车页面"bindtap='buy'>在对应的js文件中实现buy事件代码如下：//buy，点击图片，购物车会显示已添加购买buy:function(e){for(vari=0;i+//商品数量增加函数addtion:function(e){varthat=this//获取下标varindex=e.currentTarget.dataset.index//获取点击值varnum=e。currentTarget.dataset.numnum++//将新值赋给新数组varnewList=that.data.buynewList[index].num=num//将新数组传到前台that.setData({buy:newList})//调用计算方法that.countNum()//计算金额that.count()},6.减少购物车中的商品数量，但是当数量减少到小于1时，商品就会消失，代码如下：—//商品减量减法:function(e){varthat=this//获取下标varindex=e.currentTarget.dataset.index//获取点击值varnum=e.currentTarget.dataset.num//放入新值给一个新数组varnewList=that.data.buy//当有1块时，点击移除if(num==1){newList.splice(index,1)}else{num--newList[index].num=num}//把新数组传到前台that.setData({buy:newList})//调用计算方法that。countNum()//计算金额that.count()},7.单选商品，结算金额change:function(e){varthat=this//获取下标varindex=e.currentTarget.dataset.index//获取选中状态varselect=e.currentTarget.dataset.selectconsole.log(e.currentTarget.dataset.select);if(select=="circle"){varstype="success"}else{varstype="circle"}//将新值传递给新数组varnewList=that.data.buynewList[index].select=stype//将新数组传递给前台that.setData({buy:newList})//调用计算methodthat.countNum()//计算金额that.count()},8.选择所有商品并结算金额全选//全选Select:function(e){varthat=this//先判断w现在是否选择它varallSelect=e.currentTarget.dataset.selectvarnewList=that.data.buyif(allSelect=="circle"){//先遍历数组，然后改变select值for(vari=0;i
