盒馬微信小程序

時間 2019-12-05

標籤微信程序简体版

原文原文鏈接

盒馬app剛出現，就吸足了眼球。最近看了看盒馬界面，很Q，就想着仿照app寫個小程序。git

功能介紹

好奇微信小程序是如何製做的，也對盒馬app感興趣，就嘗試寫了這個盒馬小程序。實現了app的部分功能，還有部分功能未實現，和你們一塊兒學習?
文章末有GitHub源項目代碼地址github

已實現的功能

購物車的操做。添加商品、刪除商品
新增收貨地址
點擊二維碼圖片能掃一掃
圖片輪播效果
滾動視圖展現商品詳情

項目效果圖

頁面簡介

購物車的操做

添加收貨地址

部分功能點實現介紹

將商品加入購物車

我使用easymock構建了一些數據，用於商品在列表展現。
這是wxml，用於商品的展現。小程序

<scroll-view scroll-y>
    <block wx:for="{{goods}}" wx:key="index" wx:for-index="index">
        <view class="weui-cells">
            <view class="weui-cell">
                <view class="weui-cell__hd">
                    <image src="{{item.image}}" />
                </view>
                <view class="weui-cell__bd">
                    <view class="goodsList__bd__intro">{{item.name}}</view>
                    <view class="view__bd__price">
                        <text class="price left">￥{{item.price}}/{{item.unit}}</text>
                        <text class="add right" bindtap="addInCart" id="{{index}}">+</text>
                    </view>
                </view>
            </view>
        </view>
    </block>
</scroll-view>

在執行for循環遍歷數據內容的時候，爲每個商品添加了index，用於肯定用戶將哪一件商品加入了購物車。給加號添加了一個綁定事件，用戶點擊加號，能將該商品放入購物車列表。
js部分代碼：
這裏最重要的是在app.js中添加了一個全局變量cardList，用於存儲用戶加入購物車的商品。這樣，就能實現多個頁面都能對購物車列表的數據進行操做了。微信小程序

globalData: {
  cardList: []
}

商品展現界面：頁面開始加載的時候，就請求數據，用於商品列表的顯示。api

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
    })
  }
})

用戶將商品加入購物車執行的操做微信

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

調整商品的購買數量

將商品加入購物車後，還有可能對添加的商品進行加減，調整購買數量。
購物車wxml界面：app

<block wx:for="{{goodsList}}" wx:key="index" data-index="index">
    <view class="weui-cell">
        <view class="weui-cell__hd">
            <icon type="success" color="#23a3ff"></icon>
        </view>
        <view class="weui-cell__bd">
            <image src="{{item.image}}" />
        </view>
        <view class="weui-cell__ft right">
            <text class="proIntr left">{{item.name}}</text>
            <text class="price left">￥{{item.price}}/{{item.unit}}</text>
            <view class="count">
                <text class="reduce left" bindtap="reduceCount" id="{{index}}">-</text>
                <text class="number left">{{item.count}}</text>
                <text class="add left" bindtap="addCount" id="{{index}}">+</text>
            </view>
        </view>
    </view>
</block>

給加號減號分別添加了點擊事件，循環時還要用index標出用戶對購物車的哪一件商品進行了加減操做。
js部分：異步

onLoad: function (options) {
  this.setData({
    // 頁面加載時就給購物車顯示商品數量
    goodsList: app.globalData.cardList
  });
  this.sumMoney();
},
// 增長商品數量
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();
},
// 減小商品數量
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: '數量小於1',
      content: '不容許操做',
      duration: 2000
    })
  } else {
    that.data.goodsList[goodId].count--;
  }
  // console.log(that.data.goodsList[goodId]);
  this.setData({
    goodsList: that.data.goodsList
  })
  this.sumMoney();
},
// 計算全部商品的錢數
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
  })
},

這個界面，我不肯定得到的數據是什麼，就反覆測試了屢次。學習

新增默認收貨地址

在輸入地址的界面，爲每個輸入框都添加了監聽輸入的事件，用於監聽用戶輸入的內容。
例如：測試

<view class="weui-cell">
    <view class="weui-cell__hd">
        <text class="weui-label mr60">收貨地址</text>
    </view>
    <view class="weui-cell__bd">
        // 綁定的監聽輸入框事件 bindinput="getAddress"
        <input bindinput="getAddress" class="weui-input" placeholder="請輸入收貨地址" />
    </view>
</view>

我將得到的用戶輸入的默認地址存儲到了storage中。
【劃重點：微信小程序的storage存儲大小是由限制的，不能將大量數據放在storage中】
js部分：

// 頁面的初始數據，用戶輸入的收貨地址、門牌號、姓名、聯繫電話
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
})
},
// 用戶點擊保存後，對輸入的數據進行存儲，並反饋存儲狀態
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);
    
  }
})

用戶默認收貨地址的顯示，就從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}}'就能判斷當前展現圖片的下標，再根據下標該表小圓點的展現狀態（給相應的小圓點一個active類，有不一樣的樣式）。小圓點也綁定了點擊事件，能根據用戶點擊不一樣的小圓點，動態改變圖片的展現狀態。

<swiper class="page__bd__scroll" current='{{activeIndex}}' bindchange='swiperTab'>
  <swiper-item>
    <image class="page__scroll__item" src=""/>
  </swiper-item>
  <swiper-item>
    <image class="page__scroll__item" src=""/>
  </swiper-item>
  <swiper-item>
    <image class="page__scroll__item" src=""/>
  </swiper-item>
  <swiper-item>
    <image class="page__scroll__item" src=""/>
  </swiper-item>
  <swiper-item>
    <image class="page__scroll__item" src=""/>
  </swiper-item>
</swiper>

<ul class="page__scroll__btns">
  <li class="page__scroll__btn {{activeIndex==0?'active':''}}" bindtap="changeTag" data-index="0"></li>
  <li class="page__scroll__btn {{activeIndex==1?'active':''}}" bindtap="changeTag" data-index="1"></li>
  <li class="page__scroll__btn {{activeIndex==2?'active':''}}" bindtap="changeTag" data-index="2"></li>
  <li class="page__scroll__btn {{activeIndex==3?'active':''}}" bindtap="changeTag" data-index="3"></li>
  <li class="page__scroll__btn {{activeIndex==4?'active':''}}" bindtap="changeTag" data-index="4"></li>
</ul>

js部分：

// activeIndex 是當前播放圖片的下標
data: {
  activeIndex: 0
},
// 點擊不一樣的小圓點切換不一樣的圖片
changeTag:  function(e){
  var type = e.target.dataset.index;
  this.setData({
    activeIndex: type
  });
},
// 滑動切換圖片，獲取點擊的下標，改變相應小圓點的狀態
swiperTab: function(e){
  var type = e.detail.current;
  this.setData({
    activeIndex: type
  });
},

遇到的問題

一、在寫靜態界面的時候，給子元素一個margin值，一直會影響父元素的margin值，糾結了很久才知道這個問題能夠用bfc的知識解決。給父元素添加一個overflow: hidden，經過這種方法建立一個bfc，就能避免子元素的margin樣式影響到父元素。
二、從後臺或者從其餘地方獲取數據時，很難一眼看出來傳值的內容是什麼，我就把數據輸出到控制檯，一點點判斷。
三、異步問題。js是異步執行的。好比執行到取數據的時候，程序不會等着取到數據再執行下一步，而是當即執行下一步。這點在輸出數據和設置數據時要尤其注意。

收穫

寫完這些仍是收穫滿滿的。
感觸最大的就是要善於查文檔。微信的weui提供了不少樣式，只要引入樣式庫，照着使用文檔寫，能少不少事。還有就是微信小程序的api，裏面有不少微信小程序自帶的api，很方便。
面對bug心理承受也更大了。學會了一些調試技巧。使用easymock構建模擬數據。
對底層的盒子模型、異步等東西有了更深一層的理解。
項目地址：
https://github.com/TeanLee/hema
若是以爲還不錯的話，給個小星星start鼓勵一下哦
比心