盒马APP一经亮相就吸引了大量关注。最近看盒马的界面，很Q，就想着基于app写个小程序。功能介绍好奇微信小程序是怎么做出来的，同时也对盒马app感兴趣，所以尝试写了这个盒马小程序。该应用程序部分功能已实现，部分功能尚未实现。和大家一起学习？文末有已经实现的功能购物车操作的GitHub源码项目代码地址。添加商品、删除商品、添加收货地址、点击二维码图片扫描图片、轮播效果、滚动查看、展示商品详情、商品效果图、页面介绍、购物车操作、添加收货地址等功能点。我使用easymock构建了一些数据用于列表中的产品显示。这个就是wxml，是用来展示商品的。<视图类="goodsList__bd__intro">{{item.name}}￥{{item.price}}/{{item.unit}}+在执行for循环遍历数据内容时，为每件商品添加一个索引，判断用户将哪件商品加入了购物车。绑定事件添加到加号。当用户点击加号时，产品可以添加到购物车列表中。js部分代码：这里最重要的是在app.js中添加一个全局变量cardList，用来存放用户添加到购物车的商品。这样多个页面就可以对购物车列表的数据进行操作了。globalData:{car??dList:[]}商品展示界面：页面开始加载时，请求数据展示商品列表。wx.request({url:"https://www.easy-mock.com/mock/5a223b51707056548f086d8b/hema/getGoods",成功:(res)=>{console.log(res.data.data.goods);this.setData({goods:res.data.data.goods})}})用户添加商品到购物车时执行的操作addInCart:function(e){constgood=this.data.goods[e.当前目标.id];//根据索引判断用户点击了哪个商品加入购物车constcart=app.globalData.cardList;//获取购物车列表cart.push(good);//用户选择商品加入购物车后，商品会被添加到购物车Addtoshoppingcartlist}，调整商品的购买数量商品加入购物车后，为也可以通过添加或减去添加的产品来调整采购数量。购物车wxml接口：{{item.name}}￥{{item.price}}/{{item.unit}}-{{item.count}}+view>分别给加号和减号添加点击事件，循环时也可以使用index标记用户在购物车中添加或减去的商品js部分：onLoad:function(options){this.setData({//页面加载时，购物车会显示商品数量goodsList:app.globalData.cardList});this.sumMoney();},//增加项目数addCount:function(e){varthat=this;控制台日志（e）；constgoodId=e.currentTarget.id;console.log(that.data.goodsList[goodId]);that.data.goodsList[goodId].count++;console.log(that.data.goodsList[goodId]);this.setData({goodsList:that.data.goodsList})this.sumMoney();},//减少商品数量reduceCount:function(e){varthat=this;constgoodId=e.currentTarget.id;//console.log(that.data.goodsList[goodId]);如果（that.data.goodsList[goodId].count<=1）{那。data.goodsList[goodId].count=1;wx.showModal({title:'数量小于1',content:'不允许操作',duration:2000})}else{that.data.goodsList[goodId].count--;}//console.log(that.data.goodsList[goodId]);this.setData({goodsList:that.data.goodsList})this.sumMoney();},//计算所有商品的钱sumMoney:function(){var计数=0;constgoods=this.data.goodsList;控制台日志（商品）；for(leti=0;i收货地址//绑定监听输入框事件bindinput="getAddress"I将用户输入的默认地址存储到存储器中。【重点：微信小程序存储大小有限，存储不能放大量数据】js部分：//页面初始数据，收货地址，门牌号，姓名，联系方式用户输入的数字数据：{address:'',num:'',name:'',phone:''},backToChooseAddr:function(){wx.navigateTo({url:"../chooseAddress/chooseAddress"});},getAddress:function(e){this.setData({address:e.detail.value})},getNum:function(e){this.setData({num:e.detail.value})},getName:function(e){this.setData({name:e.detail.value})},getPhone:function(e){this.setData({phone:e.detail.value})},//之后用户点击保存，输入存储数据并反馈存储状态saveInfo:function(){wx.setStorage({key:"name",data:[{address:this.data.address},{num:this.data.num},{name:this.data.name},{phone:this.data.phone}],success:function(){wx.showToast({title:"地址保存成功",icon:'成功',duration:2000})setTimeout(function(){wx.navigateTo({url:"../chooseAddress/chooseAddress"})},1000);}})用户默认收货地址的显示是根据key-value方式从存储中取出用户存储在存储中的地址信息。js部分：onShow:function(){varthat=this;wx.getStorage({key:"name",success:function(res){console.log(res);if(res.data.length>0){that.setData({address:res.data[0].address,num:res.data[1].num,name:res.data[2].name,phone:res.data[3].phone})}}})图片轮播和部分滚动视图图片轮播在swiper组件中添加current='{{activeIndex}}'，判断当前显示图片的下标，然后根据下标得到表格中小圆点的显示状态（给对应的小圆点一个active类，有不同的风格）。小圆点也绑定了点击事件，可以根据用户点击不同的小圆点动态改变图片的显示状态。<图片类="page__scroll__item"src=""/>js部分：//activeIndex为当前播放图片数据的下标：{activeIndex:0},//点击不同的点可以切换不同的图片changeTag:function(e){vartype=e.target.dataset.index;this.setData({activeIndex:type});},//滑动切换Image，获取被点击的下标，改变对应小圆点swiperTab的状态：function(e){vartype=e.detail.current;this.setData({activeIndex:type});}，遇到的问题1.写静态接口时，给子元素一个margin值，总会影响到父元素的margin值。纠结了半天，才知道这个问题可以通过bfc的知识来解决。给父元素添加一个overflow:hidden，通过这个方法创建一个bfc可以防止子元素的margin样式影响到父元素。2、从后台或者从其他地方获取数据的时候，很难一眼看出传值的内容是什么，所以我把数据输出到控制台，稍微判断一下。3.异步问题。js是异步执行的。比如执行取数据时，程序不是等数据取完了再执行下一步，而是立即执行下一步。这一点在导出数据和设置数据时要特别注意。收获写完这些，还是满满的收获。最大的感受就是善于查证。微信的weui提供了很多样式，只要导入样式库，按照使用文档编写，就可以省去很多麻烦。还有微信小程序的API，里面有很多微信小程序自带的API，非常方便。面对bug的心理负担也更大。学习了一些调试技巧。使用easymock构建模拟数据。对底层的盒模型，异步等东西有了更深的理解。项目地址：https://github.com/TeanLee/hema觉得还不错的给个小star开始鼓励。比心联系方式：有什么建议可以联系我，一起学习。微信：ltt598625763邮箱：598625763@qq.com
