摘要：功能介紹好奇微信小程序是如何制作的，也對(duì)盒馬感興趣，就嘗試寫了這個(gè)盒馬小程序。微信的提供了很多樣式，只要引入樣式庫，照著使用文檔寫，能少很多事。還有就是微信小程序的，里面有很多微信小程序自帶的，很方便。

盒馬app剛出現(xiàn)，就吸足了眼球。最近看了看盒馬界面，很Q，就想著仿照app寫個(gè)小程序。

好奇微信小程序是如何制作的，也對(duì)盒馬app感興趣，就嘗試寫了這個(gè)盒馬小程序。實(shí)現(xiàn)了app的部分功能，還有部分功能未實(shí)現(xiàn)，和大家一起學(xué)習(xí)?
文章末有GitHub源項(xiàng)目代碼地址

購(gòu)物車的操作。添加商品、刪除商品

新增收貨地址

點(diǎn)擊二維碼圖片能掃一掃

圖片輪播效果

滾動(dòng)視圖展示商品詳情

我使用easymock構(gòu)建了一些數(shù)據(jù)，用于商品在列表展示。
這是wxml，用于商品的展示。

    
        
            
                
                    
                
                
                    {{item.name}}
                    
                        ￥{{item.price}}/{{item.unit}}
                        +
                    
                
            
        
    

在執(zhí)行for循環(huán)遍歷數(shù)據(jù)內(nèi)容的時(shí)候，為每一個(gè)商品添加了index，用于確定用戶將哪一件商品加入了購(gòu)物車。給加號(hào)添加了一個(gè)綁定事件，用戶點(diǎn)擊加號(hào)，能將該商品放入購(gòu)物車列表。
js部分代碼：
這里最重要的是在app.js中添加了一個(gè)全局變量cardList，用于存儲(chǔ)用戶加入購(gòu)物車的商品。這樣，就能實(shí)現(xiàn)多個(gè)頁面都能對(duì)購(gòu)物車列表的數(shù)據(jù)進(jìn)行操作了。

globalData: {
  cardList: []
}

商品展示界面：頁面開始加載的時(shí)候，就請(qǐng)求數(shù)據(jù)，用于商品列表的顯示。

wx.request({
  url: "https://www.easy-mock.com/mock/5a223b51707056548f086d8b/hema/getGoods",
  success: (res) => {
    console.log(res.data.data.goods);
    this.setData({
      goods: res.data.data.goods
    })
  }
})

用戶將商品加入購(gòu)物車執(zhí)行的操作

addInCart: function(e) {
  const good = this.data.goods[e.currentTarget.id]; // 根據(jù)index，判斷用戶點(diǎn)擊了哪個(gè)商品加入購(gòu)物車
  const cart = app.globalData.cardList; // 獲取購(gòu)物車列表
  cart.push(good); // 用戶選擇商品加入購(gòu)物車后，將該商品加入購(gòu)物車列表
},

將商品加入購(gòu)物車后，還有可能對(duì)添加的商品進(jìn)行加減，調(diào)整購(gòu)買數(shù)量。
購(gòu)物車wxml界面：

    
        
            
        
        
            
        
        
            {{item.name}}
            ￥{{item.price}}/{{item.unit}}
            
                -
                {{item.count}}
                +
            
        
    

給加號(hào)減號(hào)分別添加了點(diǎn)擊事件，循環(huán)時(shí)還要用index標(biāo)出用戶對(duì)購(gòu)物車的哪一件商品進(jìn)行了加減操作。
js部分：

onLoad: function (options) {
  this.setData({
    // 頁面加載時(shí)就給購(gòu)物車顯示商品數(shù)量
    goodsList: app.globalData.cardList
  });
  this.sumMoney();
},
// 增加商品數(shù)量
addCount:function (e) {
  var that = this;
  console.log(e);
  const goodId = e.currentTarget.id;
  console.log(that.data.goodsList[goodId]);
  that.data.goodsList[goodId].count++;
  console.log(that.data.goodsList[goodId]);
  this.setData({
    goodsList: that.data.goodsList
  })
  this.sumMoney();
},
// 減少商品數(shù)量
reduceCount: function(e) {
  var that = this;
  const goodId = e.currentTarget.id;
  // console.log(that.data.goodsList[goodId]);
  if(that.data.goodsList[goodId].count <= 1) {
    that.data.goodsList[goodId].count = 1;
    wx.showModal({
      title: "數(shù)量小于1",
      content: "不允許操作",
      duration: 2000
    })
  } else {
    that.data.goodsList[goodId].count--;
  }
  // console.log(that.data.goodsList[goodId]);
  this.setData({
    goodsList: that.data.goodsList
  })
  this.sumMoney();
},
// 計(jì)算所有商品的錢數(shù)
sumMoney: function() {
  var count = 0;
  const goods = this.data.goodsList;
  console.log(goods);
  for(let i = 0; i < goods.length; i++) {
    // console.log(goods[i].count);
    // console.log(goods[i].price);
    count += goods[i].count*goods[i].price;
  }
  // console.log(count);
  this.setData({
    sum: count
  })
},

這個(gè)界面，我不確定獲得的數(shù)據(jù)是什么，就反復(fù)測(cè)試了多次。

在輸入地址的界面，為每一個(gè)輸入框都添加了監(jiān)聽輸入的事件，用于監(jiān)聽用戶輸入的內(nèi)容。
例如：

    
        收貨地址
    
    
        // 綁定的監(jiān)聽輸入框事件 bindinput="getAddress"
        
    

我將獲得的用戶輸入的默認(rèn)地址存儲(chǔ)到了storage中。
【劃重點(diǎn)：微信小程序的storage存儲(chǔ)大小是由限制的，不能將大量數(shù)據(jù)放在storage中】
js部分：

// 頁面的初始數(shù)據(jù)，用戶輸入的收貨地址、門牌號(hào)、姓名、聯(lián)系電話
data: {
address: "",
num: "",
name: "",
phone: ""
},
backToChooseAddr: function() {
wx.navigateTo({
  url: "../chooseAddress/chooseAddress"
});
},
getAddress: function(e) {
this.setData({
  address: e.detail.value
})
},
getNum: function(e) {
this.setData({
  num: e.detail.value
})
},
getName: function(e) {
this.setData({
  name: e.detail.value
})
},
getPhone: function(e) {
this.setData({
  phone: e.detail.value
})
},
// 用戶點(diǎn)擊保存后，對(duì)輸入的數(shù)據(jù)進(jìn)行存儲(chǔ)，并反饋存儲(chǔ)狀態(tài)
saveInfo: function() {
wx.setStorage({
  key: "name",
  data: [{address:this.data.address}, {num: this.data.num}, {name: this.data.name}, {phone: this.data.phone}],
  success: function() {
    wx.showToast({
      title: "地址保存成功",
      icon: "success",
      duration: 2000
    })
    setTimeout(function(){
      wx.navigateTo({
        url: "../chooseAddress/chooseAddress"
      })
    },1000);
    
  }
})

用戶默認(rèn)收貨地址的顯示，就從storage中按照key-value的方式取出用戶存在storage中的地址信息。
js部分：

onShow: function () {
  var that = this;
  wx.getStorage({
    key: "name",
    success: function(res) {
      console.log(res);
      if(res.data.length > 0) {
        that.setData({
          address: res.data[0].address,
          num: res.data[1].num,
          name: res.data[2].name,
          phone: res.data[3].phone
        })
      }
    }
  })

圖片輪播
給swiper組件添加current="{{activeIndex}}"就能判斷當(dāng)前展示圖片的下標(biāo)，再根據(jù)下標(biāo)該表小圓點(diǎn)的展示狀態(tài)（給相應(yīng)的小圓點(diǎn)一個(gè)active類，有不同的樣式）。小圓點(diǎn)也綁定了點(diǎn)擊事件，能根據(jù)用戶點(diǎn)擊不同的小圓點(diǎn)，動(dòng)態(tài)改變圖片的展示狀態(tài)。

js部分：

// activeIndex 是當(dāng)前播放圖片的下標(biāo)
data: {
  activeIndex: 0
},
// 點(diǎn)擊不同的小圓點(diǎn)切換不同的圖片
changeTag:  function(e){
  var type = e.target.dataset.index;
  this.setData({
    activeIndex: type
  });
},
// 滑動(dòng)切換圖片，獲取點(diǎn)擊的下標(biāo)，改變相應(yīng)小圓點(diǎn)的狀態(tài)
swiperTab: function(e){
  var type = e.detail.current;
  this.setData({
    activeIndex: type
  });
},

1、在寫靜態(tài)界面的時(shí)候，給子元素一個(gè)margin值，一直會(huì)影響父元素的margin值，糾結(jié)了好久才知道這個(gè)問題可以用bfc的知識(shí)解決。給父元素添加一個(gè)overflow: hidden，通過這種方法創(chuàng)建一個(gè)bfc，就能避免子元素的margin樣式影響到父元素。
2、從后臺(tái)或者從其他地方獲取數(shù)據(jù)時(shí)，很難一眼看出來傳值的內(nèi)容是什么，我就把數(shù)據(jù)輸出到控制臺(tái)，一點(diǎn)點(diǎn)判斷。
3、異步問題。js是異步執(zhí)行的。比如執(zhí)行到取數(shù)據(jù)的時(shí)候，程序不會(huì)等著取到數(shù)據(jù)再執(zhí)行下一步，而是立即執(zhí)行下一步。這點(diǎn)在輸出數(shù)據(jù)和設(shè)置數(shù)據(jù)時(shí)要尤為注意。

寫完這些還是收獲滿滿的。
感觸最大的就是要善于查文檔。微信的weui提供了很多樣式，只要引入樣式庫，照著使用文檔寫，能少很多事。還有就是微信小程序的api，里面有很多微信小程序自帶的api，很方便。
面對(duì)bug心理承受也更大了。學(xué)會(huì)了一些調(diào)試技巧。使用easymock構(gòu)建模擬數(shù)據(jù)。
對(duì)底層的盒子模型、異步等東西有了更深一層的理解。
項(xiàng)目地址：
https://github.com/TeanLee/hema
如果覺得還不錯(cuò)的話，給個(gè)小星星start鼓勵(lì)一下哦
比心

如果有建議，歡迎聯(lián)系我，一起學(xué)習(xí)。
wechat: ltt598625763
email: [email protected]