摘要：被美麗說少女粉吸引，就想著自己也寫一個來練練手，正好最近在學習微信小程序。微信小程序的組件真的很強大，以前寫圖片切換功能都好麻煩，小圓點的切換都要自己寫。

被美麗說少女粉吸引，就想著自己也寫一個來練練手，正好最近在學習微信小程序。接下來讓我們分享一下我的學習歷程吧！

其實糾結了好久該仿什么，看到別人都寫的差不多了，自己卻還沒有動手，很著急，那兩天一直在思考在查找，弄得自己特別煩躁，后來想明白了，其實寫什么都不要緊，關鍵在于這個過程中學到了什么，之前覺得要選一個看起來高大上的小程序，其實不然，只要自己喜歡，愿意認真的去完成它，它就是值得你去做的。好啦，我們還是一起來看看我項目吧！！！

圖片自動切換

頁面跳轉

加入購物車

商品數量的增減

商品展示

使用easy-mock獲取數據

使用swiper標簽實現圖片輪播，indicator-dots為小圓點，autoplay為true是圖片自動切換。微信小程序的組件真的很強大，以前寫圖片切換功能都好麻煩，小圓點的切換都要自己寫。

wxml

    


    {{good.name}}
    ￥{{good.price}}
    庫存：{{good.count}}  
    運費：{{good.freight}}


    
    評價
    


    評價（0）
    


    
    詳情
    


        
    產品詳情
    
    {{good.name}}


    
        
        購物車
    
    
        
        店鋪
    
    
        加入購物車
    
    
        立即購買
     

js

addInCart: function (e) {
    console.log( app.globalData.id);
    console.log(e);
    const good = this.data.good; // 根據index，判斷用戶點擊了哪個商品加入購物車
    const cart = app.globalData.cartList; // 獲取購物車列表
    cart.push(good); // 用戶選擇商品加入購物車后，將該商品加入購物車列表
    console.log(cart);
    console.log(app.globalData.cartList);
    wx.showModal({
      title: "是否加入購物車?",
      content:"數量為1",
      duration: 2000
    })
  },

app.js

globalData: {
    id:null,
    cartList:[]
  }

這個功能其實困擾了我一下，還去求助了同學（無奈），起初問題就是當點擊一件商品時，不知道怎么讓另一個界面獲取到這個信息，后來同學告訴我要設置一個id，并且是在全局上設置id，當點擊某件商品時給id賦值，這樣顯示商品信息的頁面就可以通過這個id來展示這件商品。

wxml 這里引用了weui框架，使用了mvvm功能

    
            
                    
                        
                    
                    
                        
                    
                    
                        {{item.name}}
                        價格：￥{{item.price}}
                        
                            -
                            {{item.num}}
                            +
                        
                    
                
    

wx:for 在這里是循環數組，key設為index，這樣子我們就不用重復定義那么多的view。
雖然說初學者自己寫原生代碼會提升的快點，可是還是要學會使用框架的，框架會給我們帶來便利，不過這個項目中wxss大部分都還是自己一點點磨出來的，其實很痛苦，但也從中學到了很多東西。
js

addCount:function (e) {
    var that = this;
    console.log(e);
    const goodId = e.currentTarget.id;
    console.log(that.data.goodsList[goodId]);
    that.data.goodsList[goodId].num++;
    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].num <= 1) {
      that.data.goodsList[goodId].num = 1;
      wx.showModal({
        title: "數量小于1",
        content: "不允許操作",
        duration: 2000
      })
    } else {
      that.data.goodsList[goodId].num--;
    }
    // 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++) {
      count += goods[i].num*goods[i].price;
    }
    this.setData({
      sum: count
    })
  }

給界面上的加減號添加了點擊事件，通過獲取id來判斷操作的是哪件商品，進而使后臺數據同步。
有個重點需要說說！！
var that = this;
這就涉及到this的指向問題了，在增減函數中，this的指向會發生改變，所以需要先把它賦值給that。
this真的很重要，需要把它弄得透徹，這樣子在敲代碼時才不會暈頭轉向。

// 獲取商品信息
  onLoad: function () {
    wx.request({
      url: "https://www.easy-mock.com/mock/5a27c7a27bf3ee170dc24b18/buygoods/buygoods",
      success: (res) => {
        console.log(res.data.data.goods);
        this.setData({
          goods: res.data.data.goods
        })
      }
    })
  }
  
})

通過這次的項目，學到了很多，首先就是需要靜下心來，遇到不懂學會查文檔，自學能力很重要，遇到bug也不要急，慢慢調試，一步一步跟蹤，需要耐心和細心。在這個過程中發現自己還有很多地方不足，查文檔的能力，解決問題的能力，代碼規范等等，都有待加強。
做每件事都需要給自己定個目標和結束時間，不然一拖再拖，人都是有惰性的，需要逼自己一把，才能有提升。
這個項目不會停下，還會不斷改善，還有很多功能沒有寫，還有很多的知識沒有學習，作為一個初學者還有很長的路要走，堅持吧，總會看到曙光~~~?

最后附上這個項目的github地址和個人的聯系方式，一起學習，一起交流，一起進步
項目地址：https://github.com/KingJons/b...

微信：lj18720711441
郵箱：1161403069@qq.com

如果覺得不錯的話，給個小星星鼓勵一下吧！?