微信小程序?qū)崙?zhàn)（一）之仿美麗說(shuō)

發(fā)表時(shí)間：2021-3-31

發(fā)布人：葵宇科技

瀏覽次數(shù)：70

被美麗說(shuō)少女粉吸引，就想著自己也寫一個(gè)來(lái)練練手，正好最近在學(xué)習(xí)微信小程序。接下來(lái)讓我們分享一下我的學(xué)習(xí)歷程吧！

選題

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

已實(shí)現(xiàn)功能

圖片自動(dòng)切換
頁(yè)面跳轉(zhuǎn)
加入購(gòu)物車
商品數(shù)量的增減
商品展示
使用easy-mock獲取數(shù)據(jù)

部分功能展示

tabBar切換

加入購(gòu)物車

購(gòu)物車界面

頁(yè)面跳轉(zhuǎn)

部分功能介紹

圖片自動(dòng)切換

<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標(biāo)簽實(shí)現(xiàn)圖片輪播，indicator-dots為小圓點(diǎn)，autoplay為true是圖片自動(dòng)切換。微信小程序的組件真的很強(qiáng)大，以前寫圖片切換功能都好麻煩，小圓點(diǎn)的切換都要自己寫。

加入購(gòu)物車

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>庫(kù)存：{{good.count}}</text></view>  
    <view class="freight"><text>運(yùn)費(fèi)：{{good.freight}}</text></view>
</view>
<view class="buy-evaluate">
    <text class="line"></text>
    <text class="text">評(píng)價(jià)</text>
    <text class="line"></text>
</view>
<view class="evaluate-content">
    <text class="text">評(píng)價(jià)（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">產(chǎn)品詳情</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>購(gòu)物車</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>加入購(gòu)物車</text>
    </view>
    <view class="buy" bindtap="buyBtn">
        <text>立即購(gòu)買</text>
    </view> 
</view>

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

app.js

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

這個(gè)功能其實(shí)困擾了我一下，還去求助了同學(xué)（無(wú)奈），起初問(wèn)題就是當(dāng)點(diǎn)擊一件商品時(shí)，不知道怎么讓另一個(gè)界面獲取到這個(gè)信息，后來(lái)同學(xué)告訴我要設(shè)置一個(gè)id，并且是在全局上設(shè)置id，當(dāng)點(diǎn)擊某件商品時(shí)給id賦值，這樣顯示商品信息的頁(yè)面就可以通過(guò)這個(gè)id來(lái)展示這件商品。

購(gòu)物車商品數(shù)量增減功能

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

<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">價(jià)格：￥{{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 在這里是循環(huán)數(shù)組，key設(shè)為index，這樣子我們就不用重復(fù)定義那么多的view。雖然說(shuō)初學(xué)者自己寫原生代碼會(huì)提升的快點(diǎn)，可是還是要學(xué)會(huì)使用框架的，框架會(huì)給我們帶來(lái)便利，不過(guò)這個(gè)項(xiàng)目中wxss大部分都還是自己一點(diǎn)點(diǎn)磨出來(lái)的，其實(shí)很痛苦，但也從中學(xué)到了很多東西。 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();
    
  },
  // 減少商品數(shù)量
  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: '數(shù)量小于1',
        content: '不允許操作',
        duration: 2000
      })
    } else {
      that.data.goodsList[goodId].num--;
    }
    // console.log(that.data.goodsList[goodId]);
    this.setData({
      goodsList: that.data.goodsList
    })
    this.sumMoney();
  },
  // 計(jì)算所有商品的錢數(shù)
  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
    })
  }

給界面上的加減號(hào)添加了點(diǎn)擊事件，通過(guò)獲取id來(lái)判斷操作的是哪件商品，進(jìn)而使后臺(tái)數(shù)據(jù)同步。有個(gè)重點(diǎn)需要說(shuō)說(shuō)?。?var that = this; 這就涉及到this的指向問(wèn)題了，在增減函數(shù)中，this的指向會(huì)發(fā)生改變，所以需要先把它賦值給that。 this真的很重要，需要把它弄得透徹，這樣子在敲代碼時(shí)才不會(huì)暈頭轉(zhuǎn)向。

easy-mock獲取數(shù)據(jù)

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

總結(jié)

通過(guò)這次的項(xiàng)目，學(xué)到了很多，首先就是需要靜下心來(lái)，遇到不懂學(xué)會(huì)查文檔，自學(xué)能力很重要，遇到bug也不要急，慢慢調(diào)試，一步一步跟蹤，需要耐心和細(xì)心。在這個(gè)過(guò)程中發(fā)現(xiàn)自己還有很多地方不足，查文檔的能力，解決問(wèn)題的能力，代碼規(guī)范等等，都有待加強(qiáng)。做每件事都需要給自己定個(gè)目標(biāo)和結(jié)束時(shí)間，不然一拖再拖，人都是有惰性的，需要逼自己一把，才能有提升。這個(gè)項(xiàng)目不會(huì)停下，還會(huì)不斷改善，還有很多功能沒(méi)有寫，還有很多的知識(shí)沒(méi)有學(xué)習(xí)，作為一個(gè)初學(xué)者還有很長(zhǎng)的路要走，堅(jiān)持吧，總會(huì)看到曙光~~~:grin:

最后附上這個(gè)項(xiàng)目的github地址和個(gè)人的聯(lián)系方式，一起學(xué)習(xí)，一起交流，一起進(jìn)步項(xiàng)目地址：https://github.com/KingJons/beautiful

如果覺(jué)得不錯(cuò)的話，給個(gè)小星星鼓勵(lì)一下吧！