Implementierung der Warenkorbfunktion im WeChat-Miniprogramm

Vorwort

In der Vergangenheit wurden Einkaufswagen grundsätzlich durch eine große Anzahl von DOM-Operationen implementiert. Das WeChat-Applet ist der Verwendung von vue.js tatsächlich sehr ähnlich. Sehen wir uns als Nächstes an, wie das Applet die Warenkorbfunktion implementieren kann.

Bedürfnisse

Lassen Sie uns zunächst die Bedürfnisse des Warenkorbs ermitteln.

• Einzelauswahl, alle Auswahl und Stornierung, und der Gesamtpreis wird entsprechend den ausgewählten Produkten berechnet

• Die Kaufmenge eines einzelnen Produkt erhöht und reduziert

• Artikel löschen. Wenn der Warenkorb leer ist, ändert sich die Seite in das Layout des leeren Warenkorbs

Gemäß der Entwurfszeichnung können wir zunächst eine statische Seite implementieren. Schauen wir uns als Nächstes an, welche Daten ein Warenkorb benötigt.

• Zuerst ist eine Produktliste (Warenkörbe) erforderlich. Die Artikel in der Liste benötigen: Produktbild (Bild), Produktname (Titel), Stückpreis (Preis), Menge (Anzahl). , Ob es ausgewählt (ausgewählt) ist, Produkt-ID (id)

• und dann alle in der unteren linken Ecke auswählen, ein Feld (selectAllStatus) wird benötigt, um anzugeben, ob alle ausgewählt sind

• Der Gesamtpreis in der unteren rechten Ecke (totalPrice)

• Zuletzt müssen Sie noch wissen, ob der Warenkorb leer ist (hasList)

Ich weiß, was ich brauche. Diese Daten definieren wir zuerst, wenn die Seite initialisiert wird.

Code-Implementierung

Initialisierung

Page({
    data: {
        carts:[],               // 购物车列表
        hasList:false,          // 列表是否有数据
        totalPrice:0,           // 总价，初始为0
        selectAllStatus:true    // 全选状态，默认全选
    },
    onShow() {
        this.setData({
          hasList: true,        // 既然有数据了，那设为true吧
          carts:[
            {id:1,title:'新鲜芹菜 半斤',image:'/image/s5.png',num:4,price:0.01,selected:true},
            {id:2,title:'素米 500g',image:'/image/s6.png',num:1,price:0.03,selected:true}
          ]
        });
      },
})

Normalerweise erhalten wir die Warenkorblistendaten, indem wir den Server anfordern, daher weisen wir den Warenkörben in der Lebenszyklusfunktion Werte zu. Ich habe darüber nachgedacht, jedes Mal, wenn ich den Warenkorb betrete, den neuesten Status des Warenkorbs abzurufen, und onLoad und onReady werden während der Initialisierung nur einmal ausgeführt, sodass ich die Anfrage in die onShow-Funktion stellen muss. (Stellen wir uns hier vor, es handele sich um gefälschte Daten)

Layout wxml

Reparieren Sie die zuvor geschriebene statische Seite und binden Sie die Daten.

 <view class="cart-box">
    <!-- wx:for 渲染购物车列表 -->
    <view wx:for="{{carts}}">
    
        <!-- wx:if 是否选择显示不同图标 -->
        <icon wx:if="{{item.selected}}" type="success" color="red" bindtap="selectList" data-index="{{index}}" />
        <icon wx:else type="circle" bindtap="selectList" data-index="{{index}}"/>
        
        <!-- 点击商品图片可跳转到商品详情 -->
        <navigator url="../details/details?id={{item.id}}">
            <image class="cart-thumb" src="{{item.image}}"></image>
        </navigator>
        
        <text>{{item.title}}</text>
        <text>￥{{item.price}}</text>
        
        <!-- 增加减少数量按钮 -->
        <view>
            <text bindtap="minusCount" data-index="{{index}}">-</text>
            <text>{{item.num}}</text>
            <text bindtap="addCount" data-index="{{index}}">+</text>
        </view>
        
        <!-- 删除按钮 -->
        <text bindtap="deleteList" data-index="{{index}}"> × </text>
    </view>
</view>

<!-- 底部操作栏 -->
<view>
    <!-- wx:if 是否全选显示不同图标 -->
    <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#fff" bindtap="selectAll"/>
    <icon wx:else type="circle" color="#fff" bindtap="selectAll"/>
    <text>全选</text>
    
    <!-- 总价 -->
    <text>￥{{totalPrice}}</text>
</view>

Berechnen Sie den Gesamtpreis

Gesamtpreis = Preis des ausgewählten Produkts 1* Menge+ Preis des ausgewählten Produkts 2* Menge+...
Gemäß der Formel erhalten Sie

getTotalPrice() {
    let carts = this.data.carts;                  // 获取购物车列表
    let total = 0;
    for(let i = 0; i<carts.length; i++) {         // 循环列表得到每个数据
        if(carts[i].selected) {                   // 判断选中才会计算价格
            total += carts[i].num * carts[i].price;     // 所有价格加起来
        }
    }
    this.setData({                                // 最后赋值到data中渲染到页面
        carts: carts,
        totalPrice: total.toFixed(2)
    });
}

Diese Methode muss aufgerufen werden, wenn andere Vorgänge auf der Seite zu einer Änderung des Gesamtpreises führen.

Auswahlereignis

Es wird ausgewählt, wenn darauf geklickt wird, und die Auswahl wird aufgehoben, wenn erneut darauf geklickt wird. Tatsächlich ändert es das ausgewählte Feld. Übergeben Sie data-index="{{index}}", um den Index des aktuellen Produkts im Listenarray an das Ereignis zu übergeben.

<p>selectList(e) {<br>    const index = e.currentTarget.dataset.index;    // 获取data- 传进来的index<br>    let carts = this.data.carts;                    // 获取购物车列表<br>    const selected = carts[index].selected;         // 获取当前商品的选中状态<br>    carts[index].selected = !selected;              // 改变状态<br>    this.setData({<br>        carts: carts<br>    });<br>    this.getTotalPrice();                           // 重新获取总价<br>}<br></p>

Alle Ereignisse auswählen

Alles auswählen bedeutet, die Auswahl jedes Produkts entsprechend dem ausgewählten Status zu ändern. Alle Status auswählen

<p>selectAll(e) {<br>    let selectAllStatus = this.data.selectAllStatus;    // 是否全选状态<br>    selectAllStatus = !selectAllStatus;<br>    let carts = this.data.carts;<br><br>    for (let i = 0; i < carts.length; i++) {<br>        carts[i].selected = selectAllStatus;            // 改变所有商品状态<br>    }<br>    this.setData({<br>        selectAllStatus: selectAllStatus,<br>        carts: carts<br>    });<br>    this.getTotalPrice();                               // 重新获取总价<br>}<br></p>

Die Menge erhöhen oder verringern

Klicken Sie auf das +-Zeichen, addieren Sie 1 zur Zahl, klicken Sie auf das --Zeichen, wenn Zahl > 1, dann subtrahieren Sie 1

<p>// 增加数量<br>addCount(e) {<br>    const index = e.currentTarget.dataset.index;<br>    let carts = this.data.carts;<br>    let num = carts[index].num;<br>    num = num + 1;<br>    carts[index].num = num;<br>    this.setData({<br>      carts: carts<br>    });<br>    this.getTotalPrice();<br>},<br>// 减少数量<br>minusCount(e) {<br>    const index = e.currentTarget.dataset.index;<br>    let carts = this.data.carts;<br>    let num = carts[index].num;<br>    if(num <= 1){<br>      return false;<br>    }<br>    num = num - 1;<br>    carts[index].num = num;<br>    this.setData({<br>      carts: carts<br>    });<br>    this.getTotalPrice();<br>}<br></p>

Produkt löschen

Klicken Sie auf die Schaltfläche „Löschen“, um das aktuelle Element aus dem Einkauf zu löschen Warenkorbliste. Wenn Sie nach dem Löschen einkaufen. Der Warenkorb ist leer, ändern Sie die Warenkorb-Leer-Flagge hasList auf false

deleteList(e) {
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    carts.splice(index,1);              // 删除购物车列表里这个商品
    this.setData({
        carts: carts
    });
    if(!carts.length){                  // 如果购物车为空
        this.setData({
            hasList: false              // 修改标识为false，显示购物车为空页面
        });
    }else{                              // 如果不为空
        this.getTotalPrice();           // 重新计算总价格
    }   
}

Zusammenfassung

Obwohl die Warenkorbfunktion relativ einfach ist, gibt es immer noch viele Wissenspunkte im WeChat-Applet. Geeignet für Anfänger zum Üben und Beherrschen.

Empfohlenes Tutorial: „WeChat Mini-Programm“

Das obige ist der detaillierte Inhalt vonImplementierung der Warenkorbfunktion im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!