Wie implementiert man die Warenkorbfunktion im WeChat-Applet? (Methodeneinführung)

Wie implementiert man die Warenkorbfunktion im WeChat-Applet? Im folgenden Artikel erfahren Sie, wie Sie die Warenkorbfunktion im WeChat-Applet implementieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Ob es sich um ein Einkaufszentrum oder ein Catering-Miniprogramm handelt, die Transaktion muss durch die Aufgabe einer Bestellung abgeschlossen werden, daher gibt es einen Vorgang zum Hinzufügen zum Warenkorb. In der Vergangenheit wurde die Warenkorbfunktion grundsätzlich durch eine Vielzahl von DOM-Operationen implementiert. Da das Applet nicht auf dem Web basiert, kann es kein DOM erstellen. Das WeChat-Applet implementiert die WarenkorbfunktionTatsächlich ist es der Verwendung von vue.js sehr ähnlich.

Lassen Sie uns zunächst die Anforderungen des Warenkorbs herausfinden.

Einzelne Auswahl, alle Auswahlen und Stornierungen sowie der Gesamtpreis werden entsprechend den ausgewählten Produkten berechnet

Erhöhung und Verringerung der Kaufmenge eines einzelnen Produkts

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

Gemäß der Konstruktionszeichnung 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: Produktbild (Bild), Produktname (Titel), Stückpreis (Preis), Menge (Anzahl), ob ausgewählt ( ausgewählt), Produkt-ID (id)

Wählen Sie dann alle in der unteren linken Ecke aus. Ein Feld (selectAllStatus) ist erforderlich, um anzugeben, ob alle ausgewählt sind

Gesamtpreis (totalPrice) in der unteren Ecke rechte Ecke

Zuletzt müssen wir wissen, ob der Warenkorb leer ist (hasList)

Da wir nun wissen, dass diese Daten benötigt werden, definieren wir diese zuerst, wenn die Seite initialisiert wird.

Initialisierungscode:

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.

Gesamtpreis berechnen

Gesamtpreis = Preis des ausgewählten Produkts 1 * Menge + Preis des ausgewählten Produkts 2 * Menge + …

Gemäß der Formel können Sie

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

erhalten. 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 wird das ausgewählte Feld geändert. Übergeben Sie data-index="{{index}}", um den Index des aktuellen Produkts im Listenarray an das Ereignis zu übergeben.

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

Alle Ereignisse auswählen

Alles auswählen bedeutet, das ausgewählte zu ändern

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

die Menge jedes Produkts entsprechend zu erhöhen oder zu verringern Alle ausgewählten Status selectAllStatus

Klicken Sie auf das +-Zeichen, die Zahl wird um 1 erhöht, klicken Sie auf das --Zeichen, wenn die Zahl > 1 ist, dann subtrahieren Sie 1

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

Löschen Produkt

Klicken Sie auf die Schaltfläche „Löschen“, um das aktuelle Element aus der Warenkorbliste zu löschen. Wenn der Warenkorb nach dem Löschen leer ist, ändern Sie das Warenkorb-Leer-Flag „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();           //重新计算总价格
    }  
}

Die Applet-Einkaufswagen-Funktionsentwicklung teilt jedes Funktionsmodul auf. Die separate Entwicklung entspricht im Wesentlichen den Entwicklungsideen für Web und APP. Obwohl die Warenkorbfunktion relativ einfach ist, sind im WeChat-Applet dennoch viele Wissenspunkte enthalten.

Empfohlen: „Mini-Tutorial zur Programmentwicklung“

Das obige ist der detaillierte Inhalt vonWie implementiert man die Warenkorbfunktion im WeChat-Applet? (Methodeneinführung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!