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

從接觸微信小程序到第一次動(dòng)手實(shí)現(xiàn)一個(gè)商城小程序,我發(fā)現(xiàn)我們怕的不是不會(huì)寫，而是不敢動(dòng)手去寫，每個(gè)人都是從無到有，所以勇敢踏出我們的第一步吧，看官方文檔去吧騷年！

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

我在這里直接設(shè)置了輪播狀態(tài),圖片放在js里遍歷。

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

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

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

search: function(){
      // var pattern = /和/;
      // var str = "和";
      // console.log(str.search(pattern));
      var tem=[];
      for(var i=0;i
這樣我們就實(shí)現(xiàn)了搜索匹配。
3.商品如何加入購物車?
既然咱是一個(gè)商城類小程序,那怎么加入購物車呢?mvvm模式
在加入之前我們是不是有一個(gè)疑問，我在購物車界面怎么能獲取你商品的信息啊?好難啊?怎么去做呢?使用mvvm模式  
他是將邏輯層數(shù)據(jù)中的name與視圖層的name進(jìn)行了綁定，當(dāng)邏輯層中name的值發(fā)生變化的時(shí)候，視圖層的值也會(huì)隨之變化。然后視圖層的點(diǎn)擊事件changeName也是和邏輯層的changeName綁定的，當(dāng)點(diǎn)擊視圖按鈕的時(shí)候，邏輯層的changeName方法會(huì)響應(yīng)并改變邏輯層的數(shù)據(jù)，視圖層的數(shù)據(jù)又隨之變化。說的好像很叼啊，具體怎么做呢?咱還是不太清楚啊
來，我們繼續(xù)聊。
不能忘了還有個(gè)app.js這個(gè)全局js在這里發(fā)揮了中轉(zhuǎn)站的作用
 globalData: {
    cartList: [], 
  }
在app.js里面定義一個(gè)全局的空數(shù)組，在購物車取值時(shí)，我們先把值賦給這個(gè)空數(shù)組，在取這個(gè)值，這樣的話我們就可以得到這個(gè)值。話不多說,看看效果
那代碼是如何實(shí)現(xiàn)的呢?
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商品在購物車的下標(biāo)
      for (let i = 0; i < cartList.length; i++) {
        if(good.id == cartList[i].id){
          index = i;
        }
      }
      //如果index等于null,說明第二次添加id商品不在購物車?yán)?，直接Push進(jìn)去
      if(index == null){
        cartList.push(cartItem);
      }else{
        //index不等于Null,那么第二次添加id商品在購物車，num++
        cartList[index].num++;
      }
    } else {
      //購物車為空直接Push進(jìn)去
      cartList.push(cartItem);
    }

   // console.log(cartList);
    wx.showToast({
      title: "添加成功",
      icon: "success",
      duration: 2000
    })
  }
})
在這里我想說的是如何實(shí)現(xiàn)邏輯呢?開始我遇到一個(gè)問題，第二次添加相同商品時(shí)不會(huì)再數(shù)量上加一，而是由添加了一個(gè)新的商品，那么如何解決這個(gè)問題呢?我們使用了for循環(huán)的嵌套判斷
在數(shù)據(jù)中遍歷一次，然后再比較選出商品id做比較再一次遍歷，然而 又遇到一個(gè)問題，第一個(gè)商品遍歷出來，第二個(gè)商品選數(shù)量時(shí)卻導(dǎo)致遍歷出錯(cuò)，難受，那么邏輯如何解決呢?
將addCart方法的邏輯重構(gòu)
    第一步還是判斷購物車是否為空，保證第一件添加商品成功
    第二步，不為空的情況，定義一個(gè)索引index
    然后，遍歷購物車數(shù)組，如果good.id==cartList[i].id，把這個(gè)i復(fù)制給index
    遍歷完成后對index判斷
    如果index==null,說明第二次添加商品不在購物車，直接push進(jìn)去
    如果不為空，說明第二次添加的商品在購物車，將cartList[index].num++
    
這樣就解決邏輯問題。
4、購物車功能的實(shí)現(xiàn)
購物車功能有哪些呢?分析下，商品的勾選，價(jià)格的計(jì)算，總價(jià)計(jì)算，全選功能。來
讓我們一一實(shí)現(xiàn)。  

再這里封裝一個(gè)總價(jià)，方便調(diào)用。
遍歷數(shù)組，把即選的num 加起來。
countNum: function () {
    var that = this
    //遍歷數(shù)組，把既選中的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
    })
  },
  //計(jì)算金額方法
  count: function () {
    var that = this
    //思路和上面一致
    //選中的訂單，數(shù)量*價(jià)格加起來
    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
    //先判斷現(xiàn)在選中沒
    var allSelect = e.currentTarget.dataset.select
    var newList = that.data.list
    if (allSelect == "circle") {
      //先把數(shù)組遍歷一遍，然后改掉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
    })
    //調(diào)用計(jì)算數(shù)目方法
    that.countNum()
    //計(jì)算金額
    that.count()
  },
不管咱ui有多丑，該有的邏輯咱都有。
5、商品的分類
商品分類中主要是根據(jù)商品id判斷選擇類別，在這里參考了林鑫大神的分類。這里就不多廢話，主要是界面的設(shè)計(jì)  

6、用戶我的table功能的實(shí)現(xiàn)

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

同時(shí)在這方面有贊也有個(gè),老規(guī)矩https://github.com/youzan/zanui-weapp
7、咱還會(huì)遇到哪寫問題呢?
頁面的跳轉(zhuǎn)問題
你是不是有時(shí)候命名綁定了頁面卻跳轉(zhuǎn)不過去呢?是的,有的，那為什么會(huì)出現(xiàn)這種情況呢?
官方文檔寫的很清楚
跳轉(zhuǎn)tabBar
{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首頁"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}

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

跳轉(zhuǎn)應(yīng)用內(nèi)界面 wx.navigateTo
wx.navigateTo({
  url: "test?id=1"
})

//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
  }
})
跳轉(zhuǎn)刷新主頁
wx.reLaunch({
  url: "test?id=1"
})

//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
  }
})
咱具體的可以看看文檔
前端數(shù)據(jù)怎么得?
有時(shí)候我們并不能得到數(shù)據(jù)，寫在代碼里有顯得太冗余，不怕試試Easy mock自己寫個(gè)假數(shù)據(jù)。
scoll-view scoll-x scoll-y
scoll-y大家都知道scoll-x其實(shí)就是橫向劃屏,需要注意的是圖片問題。
說再多都是虛的咱貼個(gè)gitHub地址

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