微信小程序實戰（一）之仿美麗說

時間 2019-11-30

標籤微信程序實戰美麗简体版

原文原文鏈接

被美麗說少女粉吸引，就想着本身也寫一個來練練手，正好最近在學習微信小程序。接下來讓咱們分享一下個人學習歷程吧！git

選題

其實糾結了很久該仿什麼，看到別人都寫的差很少了，本身卻尚未動手，很着急，那兩天一直在思考在查找，弄得本身特別煩躁，後來想明白了，其實寫什麼都沒關係，關鍵在於這個過程當中學到了什麼，以前以爲要選一個看起來高大上的小程序，其實否則，只要本身喜歡，願意認真的去完成它，它就是值得你去作的。好啦，咱們仍是一塊兒來看看我項目吧！！！github

已實現功能

圖片自動切換
頁面跳轉
加入購物車
商品數量的增減
商品展現
使用easy-mock獲取數據

部分功能展現

tabBar切換

加入購物車

購物車界面

頁面跳轉

部分功能介紹

圖片自動切換

<swiper class="page-header" indicator-dots="true" autoplay="true" interval="2000" duration="1000">  
    <swiper-item>  
      <image src="http://img.weiye.me/zcimgdir/album/file_59c081abe9cff.png"  mode="aspectFill" bindtap="swiperView1"/>
    </swiper-item> 
    <swiper-item>
      <image src="http://img.weiye.me/zcimgdir/album/file_59b102f038b65.png"  mode="aspectFill" bindtap="swiperView2"/>
    </swiper-item>  
</swiper>
複製代碼

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

加入購物車

wxml微信小程序

<view class="buy-head">
    <image src="{{good.img}}" style="width:375px;height:360px;"></image>
</view>
<view class="buy-body">
    <view class="title"><text>{{good.name}}</text></view>
    <view class="price"><text>￥{{good.price}}</text></view>
    <view class="count"><text>庫存：{{good.count}}</text></view>  
    <view class="freight"><text>運費：{{good.freight}}</text></view>
</view>
<view class="buy-evaluate">
    <text class="line"></text>
    <text class="text">評價</text>
    <text class="line"></text>
</view>
<view class="evaluate-content">
    <text class="text">評價（0）</text>
    <text class="line"></text>
</view>
<view class="buy-details">
    <text class="line"></text>
    <text class="text">詳情</text>
    <text class="line"></text>
</view>
<view class="details-content">
        
    <text class="text">產品詳情</text>
    <text class="line"></text>
    <text class="name">{{good.name}}</text>
</view>
<view class="buy-foot">
    <view class="cart" bindtap="cartView">
        <image src="../../images/cart2.png" style="width:50rpx;height:50rpx;"></image>
        <text>購物車</text>
    </view>
    <view class="shop" bindtap="shopView">
        <image src="../../images/shop.png" style="width:50rpx;height:50rpx;"></image>
        <text class="text">店鋪</text>
    </view>
    <view class="addCart" bindtap="addInCart" id="{{index}}">
        <text>加入購物車</text>
    </view>
    <view class="buy" bindtap="buyBtn">
        <text>當即購買</text>
    </view> 
</view>

複製代碼

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.jsbash

globalData: {
    id:null,
    cartList:[]
  }
複製代碼

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

購物車商品數量增減功能

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

<view class="weui-cells">
    <block wx:for="{{goodsList}}" wx:key="index" data-index="index">
            <view class="weui-cell weui-cell_assess">
                    <view class="weui-cell__hd">
                        <icon type="success" color="#ff7100"></icon>
                    </view>
                    <view class="weui-cell__bd">
                        <image src="{{item.img}}" />
                    </view>
                    <view class="weui-cell__ft">
                        <text class="name">{{item.name}}</text>
                        <text class="price">價格：￥{{item.price}}</text>
                        <view class="count">
                            <text class="reduce" bindtap="reduceCount" id="{{index}}">-</text>
                            <text class="number">{{item.num}}</text>
                            <text class="add" bindtap="addCount" id="{{index}}">+</text>
                        </view>
                    </view>
                </view>
    </block>
</view>
複製代碼

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真的很重要，須要把它弄得透徹，這樣子在敲代碼時纔不會暈頭轉向。xss

easy-mock獲取數據

// 獲取商品信息
  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/beautiful

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

若是以爲不錯的話，給個小星星鼓勵一下吧！😄