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哦

第一次寫文章，項目可能不是很好，表達的也未必清楚，請給新手多一點的鼓勵，點個贊，留下你的建議吧