微信小程序---家具电商介绍前言今年是小程序大火的一年，学习微信小程序-最近在自学，所以打算自己做一个小程序出来，因为刚刚自学。刚刚做了一个比较简单的家具小程序。当然，我也遇到了一些问题和BUG，在这里分享给大家，帮助更多的朋友。如有不足之处，希望大家提出宝贵意见。只有这样，我们才能共同成长和进步。微信小程序简介众所周知，随着越来越多的App出现在AppStore，手机上下载过多的App会导致手机卡顿，所以微信小程序这时候就空出来了。只要用户扫一扫或者搜索一下，就可以打开应用，减少了我们下载应用的次数。开发环境：WXML（HTML）、WXSS（CSS）、Javascript开发工具：vscode、微信开发者工具开发过程：下载微信开发者工具并注册后，您将拥有自己的AppID，微信小程序有官方微信小程序开发文档DevelopmentDocumentation接下来说说我做的这个小程序。万事开头难，关键是迈出第一步。这里分享一下我的实现过程和实际过程中遇到的坑。我们先来看看首页的效果。代码实现了。主页上的东西不多。主要问题是布局。wxss代码：.img-boximage{width:100%;height:100%;}.img-boximage:after{content:"";位置：绝对；底部：0；宽度：100%；颜色：#fff；padding:50px20px;}1：家具的轮播效果实现小程序的轮播是通过swiper组件实现的。滑块视图容器中有indicator-dots、autoplay、setinterval等属性，可以设置自动播放和时间间隔。插入的图片可以用wx:for循环。wxml代码：这里我把图片放在js里去遍历。效果如图2：navigate的跳转问题点击加入购物车后，绑定事件应该是跳转到别的页面了，但是没有效果，半天也不报错。我认为我的拼写或路径有问题。问题，但是我检查后没有问题，终于找到坑了。这里要跳转的页面是tabBar页面，默认是不允许的。查看开发文档后，发现了问题所在。解决方案：将navigateTo替换为switchTab即可。跳转方式有很多种，具体可以查看开发文档。跳转页面的api3：如何控制购买的商品数量，如何加入购物车后计算价格。本来想做的是在后台点击图片进入详情然后点击添加到购物车保存在购物车里，但是由于自学知识有限，后台还没学会，只能添加绑定事件跳转到购物车。接下来进入正题：如何控制购物车购买的数量并计算总价？首先在js中定义一个空的cart数组，我们先给这个空数组赋值，然后取这个值。之后商品状态默认为选中状态，可一键更改为取消状态。话不多说，接着计算所选商品的总价。先看这个效果吧js代码：selectList(e){letselectAllStatus=this.data.selectAllStatus;constindex=e.currentTarget.dataset.index;让购物车=this.data.carts;constselected=carts[index].selected;购物车[索引].selected=!selected;selectAllStatus=carts[index].selected;//if(carts[index].selected=!selected){//selectAllStatus:false;//}this.setData({car??ts,selectAllStatus,});this.getTotalPrice();},deleteList(e){constindex=e.currentTarget.dataset.index;让购物车=this.data.carts;carts.splice(index,1);this.setData({car??ts:carts});if(!carts.length){this.setData({hasList:false});}else{this.getTotalPrice();}},addCount(e){constindex=e.currentTarget.dataset.index;让购物车=this.data.carts;让num=carts[index].num;数++；carts[index].num=numthis.setData({car??ts})this.getTotalPrice();},minuCount(e){constindex=e.currentTarget.dataset.index;让购物车=this.data.carts;让num=carts[index].num;如果（num<=1）返回false；数--;carts[index].num=numthis.setData({car??ts});this.getTotalPrice();},selectAll(e){让selectAllStatus=this.data.selectAllStatus;selectAllStatus=!selectAllStatus;让购物车=this.data.carts;for(leti=0;i<文本类="userinfo-nickname">{{userInfo.nickName}}js代码：onLoad:function(){if(app.globalData.userInfo){this.setData({userInfo:app.globalData.userInfo,hasUserInfo:true})}elseif(this.data.canIUse){//由于getUserInfo是网络请求，可能会在Page.onLoad之后返回//所以这里加一个回调来防止这个app.userInfoReadyCallback=res=>{this.setData({userInfo:res.userInfo,hasUserInfo:true})}}else{//在没有open-type=getUserInfo的版本中兼容Processwx.getUserInfo({success:res=>{app.globalData.userInfo=res.userInfothis.setData({userInfo:res.userInfo,hasUserInfo:true})}})}},getUserInfo:function(e){console.log(e)app.globalData.userInfo=e.detail.userInfothis.setData({userInfo:e.detail.userInfo,hasUserInfo:true})}整体效果最后是这个小程序的一些功能尚未实施。比如购物车和后台保存用户信息的问题。自己学习了一些后端知识之后，还是要把这个小程序完整的做出来。喜欢的话可以关注我的github，我们可以一起学习开发kiha，也希望大家多提宝贵意见。源文件：github地址期待你的star和fork。这是我第一次写文章。项目可能不是很好，表达可能不是很清楚。请新手多多鼓励，点赞留下你的建议
