摘要：微信小程序電商家具入門篇前言今年是小程序很火的一年，所以最近在自學(xué)微信小程序，所以打算自己擼一個(gè)小程序出來，由于自己才剛剛自學(xué)不久。先看這個(gè)效果吧代碼如何獲取登錄微信的用戶的頭像和信息使用直接獲取微信頭像，昵稱。

微信小程序---電商家具入門篇

今年是小程序很火的一年，所以最近在自學(xué)微信小程序，所以打算自己擼一個(gè)小程序出來，由于自己才剛剛自學(xué)不久。就做了一個(gè)相對(duì)簡(jiǎn)單的家具小程序。當(dāng)然在這其中也遇到了一些問題和bug,在這就和大家分享一下，這樣才能幫助更多的朋友。如有不足之處，希望大家提出寶貴的建議哈。這樣才能一起成長，一起進(jìn)步。

眾所周知，隨著越來越多的app出現(xiàn)在了App商城，導(dǎo)致手機(jī)下載多了app會(huì)導(dǎo)致手機(jī)卡，所以這時(shí)微信小程序騰空而出。只要用戶掃一掃或者搜索一下就能打開應(yīng)用，減少了我們下載app的次數(shù)。

開發(fā)環(huán)境：WXML(HTML),WXSS(CSS),Javascript

開發(fā)工具：vscode，微信開發(fā)者工具

開發(fā)流程：下載微信開發(fā)者工具之后注冊(cè)一下就會(huì)有自己的AppID，微信小程序有官方的微信小程序開發(fā)文檔 開發(fā)文檔

接下來說說我做的小程序吧
萬事開頭難，關(guān)鍵是踏出第一步。在這里我將分享一下我實(shí)現(xiàn)過程以及在實(shí)際過程中遇到的坑。 首先先看看首頁效果吧

代碼實(shí)現(xiàn)，主頁東西也不多，主要是布局問題。 wxss代碼：

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

小程序的輪播實(shí)現(xiàn)是用了swiper組件，滑塊視圖容器里面有indicator-dots,autoplay,setinterval等屬性，可以設(shè)置自動(dòng)播放，時(shí)間間隔。 插入的圖片可以用wx:for來循環(huán)。

wxml代碼：

我這里把圖片放在了js里面遍歷。效果如圖所示

在點(diǎn)擊加入購物車以后，加入綁定事件本該跳轉(zhuǎn)到另一個(gè)頁面的，但是遲遲沒有出現(xiàn)效果也沒有報(bào)錯(cuò)，我以為我拼寫或路徑有問題，但我檢查之后沒有問題啊，后來終于發(fā)現(xiàn)了一個(gè)坑。 這里要跳轉(zhuǎn)的是tabBar的頁面，按照默認(rèn)的跳轉(zhuǎn)是不允許的，查看了一下開發(fā)文檔才發(fā)現(xiàn)了問題的所在。

解決辦法：把navigateTo換成switchTab就可以了 跳轉(zhuǎn)有很多種方法，具體可以查看開發(fā)文檔。跳轉(zhuǎn)頁面的api

本來想做的是點(diǎn)擊圖片進(jìn)入詳情再點(diǎn)擊加入購物車就能保存到后臺(tái)的購物車?yán)?但是由于自學(xué)的知識(shí)有限，后端目前還沒學(xué)，只能加入一個(gè)綁定事件跳轉(zhuǎn)到購物車。

接下來計(jì)入正題：如何控制購物車購買的數(shù)量和計(jì)算總價(jià)？先在js里面定義一個(gè)cart空的數(shù)組，我們先把這個(gè)值賦給這個(gè)空數(shù)組，之后再取這個(gè)值。之后給商品的狀態(tài)默認(rèn)為選擇狀態(tài)，點(diǎn)擊一下，就可以把狀態(tài)變?yōu)槿∠?。話不多說，之后計(jì)算出選擇商品的總價(jià)。先看這個(gè)效果吧

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
4：如何獲取登錄微信的用戶的頭像和信息

使用wx.getUserInfo直接獲取微信頭像，昵稱。
我們?cè)谑褂眯〕绦騱x.login API進(jìn)行登錄的時(shí)候，直接使用wx.getUserInfo是不能獲取更多的信息的，如微信用戶的openid。 我這里是用的第一種方法

wxml代碼：

           獲取頭像昵稱 
          
            
            {{userInfo.nickName}}
          
        
js代碼：

onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求，可能會(huì)在 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
    })
  }
整體效果

最后
這個(gè)小程序還有一些功能還沒有實(shí)現(xiàn)，比如購物車，用戶信息的保存在后臺(tái)的問題，以后等自學(xué)完后端的一些知識(shí)，我還是得把這個(gè)小程序完整的做出來，喜歡的話大家可以關(guān)注我的github，我們可以一起學(xué)習(xí)，一起搞基哈，也希望可以給我提出一些寶貴的意見

源文件:github地址 期待你的star和fork哦
第一次寫文章，項(xiàng)目可能不是很好，表達(dá)的也未必清楚，請(qǐng)給新手多一點(diǎn)的鼓勵(lì)，點(diǎn)個(gè)贊，留下你的建議吧