說在前面

從打仗微信小順序到第一次着手完成一個商城小順序,我發明我們怕的不是不會寫，而是不敢着手去寫，每個人都是從無到有，所以英勇踏出我們的第一步吧，看官方文檔去吧騷年！

踏出第一步吧

說的簡樸，那怎樣踏出去呢？在這裏我來分享下我寫商城小順序碰到的一些題目,踩得一些坑。

1、商城小順序的輪播完成

小順序的輪播圖完成真是太輕易了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里遍歷。

2、搜刮要領

怎樣完成小順序的搜刮呢，我在這裏運用的是正則遍歷搜刮，在這裏就碰到了一個坑
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++
    

如許就處理邏輯題目。

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地點

既然都看到這裏了，咱點個贊再關注一波吧老鐵。
代碼固然另有許多不足的處所，另有許多功用須要完美，作為一個年青的順序猿，咱也算走出了第一步，俗語說萬事開首，搖搖晃晃的總得有個最先
作為前端小白手藝固然不是很好，願望在這裡有你們的陪同，我一點點紀錄，你們一點點見證。