你幸福嗎？ 幸福西餅小程序來襲

說在前面

從接觸微信小程序到第一次動手實現一個商城小程序,我發現咱們怕的不是不會寫，而是不敢動手去寫，每一個人都是從無到有，因此勇敢踏出咱們的第一步吧，看官方文檔去吧騷年！

踏出第一步吧

說的簡單，那怎麼踏出去呢？在這裏我來分享下我寫商城小程序遇到的一些問題,踩得一些坑。

一、商城小程序的輪播實現

小程序的輪播圖實現真是太方便了swiper,就是這麼簡單粗暴。一個滑塊視圖容器，說的簡單，那咱們得注意什麼呢 swiper-item僅可放在</swiper>組件中 indicatorDots: false,用來設置有無輪播點，autoplay: false,設置自動播放。wx:for設置圖片的循環。具體的能夠點點這裏看看。

<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
    <block wx:for="{{movies}}" wx:for-index="index" wx:key="index">
      <swiper-item>
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>

我在這裏直接設置了輪播狀態,圖片放在js裏遍歷。

二、搜索方法

如何實現小程序的搜索呢，我在這裏使用的是正則遍歷搜索，在這裏就遇到了一個坑
js 匹配字符串的方法有不少
在開始的時候我直接使用 search()方法

var n = str.search("Runoob");

使用這個方法我一直匹配不了，上網看文檔發現使用這個方法會直接把輸入值當作字符串，這樣就致使搜索的難以實現，那怎麼辦？放棄是不可能放棄的，那咱繼續幹吧，又是一波查資料，最終發現可使用test()函數 RegExpObject.test(string)來實現輸入值的遍歷匹配

<view class='search'>
  <view class='search-value'>
    <input placeholder='搜索商品' value='{{searchVal}}' bindconfirm="search" bindinput="bindKeyInput"></input>
    <view class='clear' wx:if="{{ searchVal != '' }}" bindtap='clear'>
      <image src='../../images/clear.png'></image>
    </view>
  </view>
  <view class='search-button' bindtap='search'>
   <image src='../../images/search.png'></image>
  </view>
</view>

search: function(){
      // var pattern = /和/;
      // var str = "和";
      // console.log(str.search(pattern));
      var tem=[];
      for(var i=0;i<this.data.goods.length;i++)
      {
        var re = new RegExp(this.data.searchVal);
        if(re.test(this.data.goods[i].title))
        {
          tem.push(this.data.goods[i]);
        }
      }
      this.setData({
        goods : tem 
      }) 
},

這樣咱們就實現了搜索匹配。

3.商品如何加入購物車?

既然咱是一個商城類小程序,那怎麼加入購物車呢?mvvm模式

在加入以前咱們是否是有一個疑問，我在購物車界面怎麼能獲取你商品的信息啊?好難啊?怎麼去作呢?使用mvvm模式
他是將邏輯層數據中的name與視圖層的name進行了綁定，當邏輯層中name的值發生變化的時候，視圖層的值也會隨之變化。而後視圖層的點擊事件changeName也是和邏輯層的changeName綁定的，當點擊視圖按鈕的時候，邏輯層的changeName方法會響應並改變邏輯層的數據，視圖層的數據又隨之變化。說的好像很叼啊，具體怎麼作呢?咱仍是不太清楚啊

來，咱們繼續聊。

不能忘了還有個app.js這個全局js在這裏發揮了中轉站的做用

globalData: {
    cartList: [], 
  }

在app.js裏面定義一個全局的空數組，在購物車取值時，咱們先把值賦給這個空數組，在取這個值，這樣的話咱們就能夠獲得這個值。話很少說,看看效果

那代碼是如何實現的呢?

addCart: function () {
    var good = this.data.good_info;
    var cartList = app.globalData.cartList;
    var cartItem = {
      id: good.id,
      name: good.title,
      url: good.image,
      price: good.price,
      num: 1,
      select: 'circle',
    };
    //判斷購物車爲空
    if (cartList.length > 0) {
      //不爲空
      var index = null;//記錄id商品在購物車的下標
      for (let i = 0; i < cartList.length; i++) {
        if(good.id == cartList[i].id){
          index = i;
        }
      }
      //若是index等於null,說明第二次添加id商品不在購物車裏，直接Push進去
      if(index == null){
        cartList.push(cartItem);
      }else{
        //index不等於Null,那麼第二次添加id商品在購物車，num++
        cartList[index].num++;
      }
    } else {
      //購物車爲空直接Push進去
      cartList.push(cartItem);
    }

   // console.log(cartList);
    wx.showToast({
      title: '添加成功',
      icon: 'success',
      duration: 2000
    })
  }
})

在這裏我想說的是如何實現邏輯呢?開始我遇到一個問題，第二次添加相同商品時不會再數量上加一，而是由添加了一個新的商品，那麼如何解決這個問題呢?咱們使用了for循環的嵌套判斷
在數據中遍歷一次，而後再比較選出商品id作比較再一次遍歷，然而 又遇到一個問題，第一個商品遍歷出來，第二個商品選數量時卻致使遍歷出錯，難受，那麼邏輯如何解決呢?
將addCart方法的邏輯重構

第一步仍是判斷購物車是否爲空，保證第一件添加商品成功
    第二步，不爲空的狀況，定義一個索引index
    而後，遍歷購物車數組，若是good.id==cartList[i].id，把這個i複製給index
    遍歷完成後對index判斷
    若是index==null,說明第二次添加商品不在購物車，直接push進去
    若是不爲空，說明第二次添加的商品在購物車，將cartList[index].num++

這樣就解決邏輯問題。

四、購物車功能的實現

購物車功能有哪些呢?分析下，商品的勾選，價格的計算，總價計算，全選功能。來
讓咱們一一實現。

再這裏封裝一個總價，方便調用。
遍歷數組，把即選的num 加起來。

countNum: function () {
    var that = this
    //遍歷數組，把既選中的num加起來
    var newList = that.data.list
    var allNum = 0
    for (var i = 0; i < newList.length; i++) {
      if (newList[i].select == "success") {
        allNum += parseInt(newList[i].num)
      }
    }
    parseInt
    console.log(allNum)
    that.setData({
      num: allNum
    })
  },
  //計算金額方法
  count: function () {
    var that = this
    //思路和上面一致
    //選中的訂單，數量*價格加起來
    var newList = that.data.list
    var newCount = 0
    for (var i = 0; i < newList.length; i++) {
      if (newList[i].select == "success") {
        newCount += newList[i].num * newList[i].price
      }
    }
    that.setData({
      count: newCount
    })
  },

再來斷定全選

allSelect: function (e) {
    var that = this
    //先判斷如今選中沒
    var allSelect = e.currentTarget.dataset.select
    var newList = that.data.list
    if (allSelect == "circle") {
      //先把數組遍歷一遍，而後改掉select值
      for (var i = 0; i < newList.length; i++) {
        newList[i].select = "success"
      }
      var select = "success"
    } else {
      for (var i = 0; i < newList.length; i++) {
        newList[i].select = "circle"
      }
      var select = "circle"
    }
    that.setData({
      list: newList,
      allSelect: select
    })
    //調用計算數目方法
    that.countNum()
    //計算金額
    that.count()
  },

無論咱ui有多醜，該有的邏輯咱都有。

五、商品的分類

商品分類中主要是根據商品id判斷選擇類別，在這裏參考了林鑫大神的分類。這裏就很少廢話，主要是界面的設計

六、用戶個人table功能的實現

在這裏我想說的是兄弟，在這裏咱能夠偷下懶了,爲何這麼說呢?咱有微信UI
不bb直接上地址https://github.com/Tencent/weui-wxss

同時在這方面有贊也有個,老規矩https://github.com/youzan/zanui-weapp

七、咱還會遇到哪寫問題呢?

頁面的跳轉問題

你是否是有時候命名綁定了頁面卻跳轉不過去呢?是的,有的，那爲何會出現這種狀況呢?
官方文檔寫的很清楚

• 跳轉tabBar

{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首頁"
    },{
      "pagePath": "other",
      "text": "其餘"
    }]
  }
}

wx.switchTab({
  url: '/index'
})

• 跳轉應用內界面 wx.navigateTo

wx.navigateTo({
  url: 'test?id=1'
})

//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
  }
})

• 跳轉刷新主頁

wx.reLaunch({
  url: 'test?id=1'
})

//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
  }
})

咱具體的能夠看看文檔

前端數據怎麼得?

有時候咱們並不能獲得數據，寫在代碼裏有顯得太冗餘，不怕試試Easy mock本身寫個假數據。

scoll-view scoll-x scoll-y

scoll-y你們都知道scoll-x其實就是橫向劃屏,須要注意的是圖片問題。

說再多都是虛的咱貼個gitHub地址

---

既然都看到這裏了，咱點個贊再關注一波吧老鐵。 代碼固然還有不少不足的地方，還有不少功能須要完善，做爲一個年輕的程序猿，咱也算走出了第一步，俗話說萬事開頭，搖搖晃晃的總得有個開始做爲前端小白技術固然不是很好，但願在這裏有大家的陪伴，我一點點記錄，大家一點點見證。