当前位置: 首页 > Web前端 > HTML

微信小程序实战(一)模仿美丽说

时间:2023-04-02 13:38:00 HTML

被美丽说女粉吸引,于是想自己写一个练习一下,正好最近在学习微信小程序。接下来,就让我们分享一下我的学习心路吧!其实我在选题的时候一直在纠结模仿什么。看到别人写的差不多,自己没做过。我很着急。重要的是什么并不重要,关键在于你在这个过程中学到了什么。我以为我应该选择一个看起来高大上的小程序,但事实并非如此。只要自己喜欢,愿意认真完成,就是值得做的。好吧,一起来看看我的项目吧!!!实现的功能图片自动切换页面跳转加入购物车商品数量增减商品展示使用easy-mock获取数据部分功能展示TabBar切换加入购物车购物车界面页面跳转部分功能介绍图片自动切换使用swiper标签实现图片轮播,indicator-dots为小圆点,autoplay为true自动切换图像。微信小程序的组件真的很强大。以前写图片切换功能很麻烦,小圆点的切换还得自己写。加入购物车wxml{{good.name}}¥{{good.price}}库存:{{good.count}}运费:{{good.freight}}评价评价(0)详情<文本class="line">产品详情{{good.name}}购物车店铺加入购物车立即购jsaddInCart:function(e){console.log(app.globalData.id);控制台日志(e);constgood=this.data.good;//根据索引判断用户点击了哪个商品加入购物车constcart=app.globalData.cartList;//获取购物车列表cart.push(good);//用户选择一个商品加入购物车后,将该商品添加到购物车列表console.log(cart);console.log(app.globalData.cartList);wx.showModal({title:'添加到购物车?',content:'数量为1',duration:2000})},app.jsglobalData:{id:null,cartList:[]}这个功能其实很困扰我,又求助了同学(无奈),一开始的问题是我点击一个商品的时候,不知道怎么让另一个接口获取这个信息。后来同学让我设置一个id,全局设置id。在点击商品的时候给id赋值,这样展示商品信息的页面就可以通过这个id展示商品这里的购物车wxml增加或减少商品数量的功能参考了weui框架,使用了mvvm函数<文本class="name">{{item.name}}价格:¥{{item.price}}-{{item.num}}+wx:for这里是一个循环数组,key设置为index,这样我们就不用重复定义那么多视图了。虽然初学者自己写原生代码会提高的更快,但是还是需要学习使用框架,这会给我们带来方便,但是这个项目中的大部分wxss还是自己一点点磨出来的,就是其实很痛苦,但我也从中学到了很多东西。jsaddCount:function(e){varthat=this;控制台日志(e);constgoodId=e.currentTarget.id;console.log(that.data.goodsList[goodId]);that.data.goodsList[goodId].num++;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].num<=1){that.data.goodsList[goodId].num=1;wx.showModal({title:'数量小于1',content:'不允许操作',duration:2000})}else{that.data.goodsList[goodId].num--;}//console.log(that.data.goodsList[goodId]);this.setData({goodsList:that.data.goodsList})this.sumMoney();},//计算所有商品的金额sumMoney:function(){varcount=0;constgoods=this.data.goodsList;控制台日志(商品);for(leti=0;i{console.log(res.data.data.goods);this.setData({goods:res.data.data.goods})}})}})总结通过这个项目,我学到了很多,先需要静下心来,不懂就学会查文档,自学能力很重要,遇到bug不要着急,慢慢debug,一步步跟进,需要耐心和细心。在这个过程中,我发现自己还有很多不足,比如检查文档的能力、解决问题的能力、代码规范等等,都需要加强。做每一件事,你都需要为自己设定一个目标和结束时间。否则一拖再拖,人家就会懒惰,你就需要逼着自己提高。这个项目不会停止,而且会不断完善。还有很多功能没有写,还有很多知识没有学。作为初学者,还有很长的路要走。坚持下去,总会看到黎明的~~~?最后附上本项目的github地址和个人联系方式,共同学习,共同交流,共同进步项目地址:https://github.com/KingJons/b...微信:lj18720711441邮箱:1161403069@qq。com如果觉得不错,给个小star鼓励一下吧!?