6.18快要来临--家具电商大战一触即发

微信小程序---电商家具入门篇

前言

今年是小程序很火的一年，因此最近在自学微信小程序，因此打算本身撸一个小程序出来，因为本身才刚刚自学不久。就作了一个相对简单的家具小程序。固然在这其中也遇到了一些问题和bug,在这就和你们分享一下，这样才能帮助更多的朋友。若有不足之处，但愿你们提出宝贵的建议哈。这样才能一块儿成长，一块儿进步。

简单介绍一下微信小程序

众所周知，随着愈来愈多的app出如今了App商城，致使手机下载多了app会致使手机卡，因此这时微信小程序腾空而出。只要用户扫一扫或者搜索一下就能打开应用，减小了咱们下载app的次数。

• 开发环境：WXML(HTML),WXSS(CSS),Javascript
• 开发工具：vscode，微信开发者工具
• 开发流程：下载微信开发者工具以后注册一下就会有本身的AppID，微信小程序有官方的微信小程序开发文档 开发文档

接下来讲说我作的小程序吧
万事开头难，关键是踏出第一步。在这里我将分享一下我实现过程以及在实际过程当中遇到的坑。 首先先看看首页效果吧

代码实现，主页东西也很少，主要是布局问题。 wxss代码：

.img-box image{
  width: 100%;
  height: 100%;
}
.img-box image:after{
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  padding: 50px 20px;
}

1：家具的轮播效果实现

小程序的轮播实现是用了swiper组件，滑块视图容器里面有indicator-dots,autoplay,setinterval等属性，能够设置自动播放，时间间隔。 插入的图片能够用wx:for来循环。

wxml代码：

<swiper class="section "indicator-dots="{{true}}" autoplay="autoplay" setInterval="3000" duration="500">
  <view class="img-box">
    <block wx:for="{{slides}}" wx:key="id">
      <swiper-item>
        <image src="{{item.image}}" mode="aspectFill" />
      </swiper-item>
    </block>
  </view>
</swiper>

我这里把图片放在了js里面遍历。效果如图所示

2：navigate的跳转问题

在点击加入购物车之后，加入绑定事件本该跳转到另外一个页面的，可是迟迟没有出现效果也没有报错，我觉得我拼写或路径有问题，但我检查以后没有问题啊，后来终于发现了一个坑。 这里要跳转的是tabBar的页面，按照默认的跳转是不容许的，查看了一下开发文档才发现了问题的所在。

解决办法：把navigateTo换成switchTab就能够了 跳转有不少种方法，具体能够查看开发文档。跳转页面的api

3：商品如何加入购物车以后如何控制购买商品的数量并计算价格

原本想作的是点击图片进入详情再点击加入购物车就能保存到后台的购物车里 可是因为自学的知识有限，后端目前还没学，只能加入一个绑定事件跳转到购物车。

接下来计入正题：如何控制购物车购买的数量和计算总价？先在js里面定义一个cart空的数组，咱们先把这个值赋给这个空数组，以后再取这个值。以后给商品的状态默认为选择状态，点击一下，就能够把状态变为取消。话很少说，以后计算出选择商品的总价。先看这个效果吧

js代码：

selectList(e){
    let selectAllStatus = this.data.selectAllStatus;
    const index=e.currentTarget.dataset.index;
    let carts=this.data.carts;
    const selected=carts[index].selected;
    carts[index].selected=!selected;
    selectAllStatus = carts[index].selected;
    // if( carts[index].selected=!selected){
    //   selectAllStatus:false;
    // }
    this.setData({
      carts,  
      selectAllStatus,
    });
    this.getTotalPrice();
  },
  deleteList(e) {
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    carts.splice(index,1);
    this.setData({
      carts: carts
    });
    if(!carts.length){
      this.setData({
        hasList: false
      });
    }else{
      this.getTotalPrice();
    }
  },
  addCount (e){
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    let num = carts[index].num;
    num++;
    carts[index].num = num
    this.setData({
      carts
    })
    this.getTotalPrice();
  },
  minuCount(e){
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    let num = carts[index].num;
    if(num<=1) return false;
    num--;
    carts[index].num = num
    this.setData({
      carts
    });
    this.getTotalPrice();
  },
  selectAll(e){
    let selectAllStatus = this.data.selectAllStatus;
    selectAllStatus = !selectAllStatus;
    let carts =this.data.carts;
    for(let i=0;i<carts.length;i++){
      if( carts[i].selected=!selectAllStatus){
        selectAllStatus:false
      }
      carts[i].selected=selectAllStatus;
      
    }
    this.setData({
      carts,
      selectAllStatus
    })
    this.getTotalPrice();
  },
  getTotalPrice(){
    let carts = this.data.carts;
    let total = 0;
    for(let i =0;i<carts.length;i++){
      // total += carts[i].num *carts[i].price;
      if(carts[i].selected){
        total+= carts[i].num * carts[i].price;

      }
    }
    this.setData({
      totalPrice:total.toFixed(2)
    })
  }

4：如何获取登陆微信的用户的头像和信息

1. 使用wx.getUserInfo直接获取微信头像，昵称。
2. 咱们在使用小程序wx.login API进行登陆的时候，直接使用wx.getUserInfo是不能获取更多的信息的，如微信用户的openid。 我这里是用的第一种方法

wxml代码：

<view class="userinfo">
          <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
          <block wx:else>
            <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
            <text class="userinfo-nickname">{{userInfo.nickName}}</text>
          </block>
        </view>
js代码：

onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 因为 getUserInfo 是网络请求，可能会在 Page.onLoad 以后才返回
      // 因此此处加入 callback 以防止这种状况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }

总体效果

最后
这个小程序还有一些功能尚未实现，好比购物车，用户信息的保存在后台的问题，之后等自学完后端的一些知识，我仍是得把这个小程序完整的作出来，喜欢的话你们能够关注个人github，咱们能够一块儿学习，一块儿搞基哈，也但愿能够给我提出一些宝贵的意见

源文件:github地址 期待你的star和fork哦

第一次写文章，项目可能不是很好，表达的也未必清楚，请给新手多一点的鼓励，点个赞，留下你的建议吧