摘要：商城小程序的輪播實現小程序的輪播圖實現真是太方便了就是這么簡單粗暴。遍歷數組，把即選的加起來。商品的分類商品分類中主要是根據商品判斷選擇類別，在這里參考了林鑫大神的分類。

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

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

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

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

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

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

search: function(){
      // var pattern = /和/;
      // var str = "和";
      // console.log(str.search(pattern));
      var tem=[];
      for(var i=0;i
這樣我們就實現了搜索匹配。
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++
    
這樣就解決邏輯問題。
4、購物車功能的實現
購物車功能有哪些呢?分析下，商品的勾選，價格的計算，總價計算，全選功能。來
讓我們一一實現。  

再這里封裝一個總價，方便調用。
遍歷數組，把即選的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有多丑，該有的邏輯咱都有。
5、商品的分類
商品分類中主要是根據商品id判斷選擇類別，在這里參考了林鑫大神的分類。這里就不多廢話，主要是界面的設計  

6、用戶我的table功能的實現

在這里我想說的是兄弟，在這里咱可以偷下懶了,為什么這么說呢?咱有微信UI
不bb直接上地址https://github.com/Tencent/weui-wxss

同時在這方面有贊也有個,老規矩https://github.com/youzan/zanui-weapp
7、咱還會遇到哪寫問題呢?
頁面的跳轉問題
你是不是有時候命名綁定了頁面卻跳轉不過去呢?是的,有的，那為什么會出現這種情況呢?
官方文檔寫的很清楚
跳轉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地址

既然都看到這里了，咱點個贊再關注一波吧老鐵。  
代碼當然還有很多不足的地方，還有很多功能需要完善，作為一個年輕的程序猿，咱也算走出了第一步，俗話說萬事開頭，搖搖晃晃的總得有個開始
作為前端小白技術當然不是很好，希望在這里有你們的陪伴，我一點點記錄，你們一點點見證。