WeChat 애플릿에서 장바구니 기능을 구현하는 방법은 무엇입니까? (방법 소개)

WeChat 애플릿에서 장바구니 기능을 구현하는 방법은 무엇입니까? 다음 기사에서는 WeChat 애플릿에서 장바구니 기능을 구현하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

쇼핑몰이든 케이터링 미니프로그램이든 주문을 해야만 거래가 완료되기 때문에 장바구니에 담는 작업이 있습니다. 기존에는 장바구니 기능을 기본적으로 다수의 DOM 연산을 통해 구현했지만, 애플릿은 웹 기반이 아니기 때문에 DOM을 생성할 수 없었습니다. WeChat 애플릿은 장바구니 기능을 구현합니다사실 vue.js의 사용법과 매우 유사합니다.

먼저 장바구니의 요구 사항을 파악해 보겠습니다.

단일선택, 전체선택 및 취소, 그리고 선택한 상품에 따라 총금액이 계산됩니다

단일 상품의 구매수량이 늘어나거나 줄어듭니다

상품을 삭제하세요. 장바구니가 비어 있으면 페이지는 빈 장바구니의 레이아웃으로 변경됩니다

디자인 도면에 따라 먼저 정적 페이지를 구현할 수 있습니다. 다음으로 장바구니에는 어떤 데이터가 필요한지 살펴보겠습니다.

첫 번째는 제품 목록(카트)입니다. 목록에 있는 단일 제품에는 제품 이미지(이미지), 제품 이름(제목), 단가(가격), 수량(숫자), 선택 여부(선택됨), 제품 ID(id )

그런 다음 왼쪽 하단에서 모두 선택하면 모두 선택되었는지 여부를 나타내는 필드(selectAllStatus)가 필요합니다

오른쪽 하단의 총 가격(totalPrice)

마지막으로 알아야 할 사항 장바구니가 비어 있는지(hasList)

필요한 데이터가 무엇인지 알고 있습니다. 페이지가 초기화될 때 이를 먼저 정의합니다.

초기화 코드 :

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}
          ]
        });
      },
})

저희는 보통 서버에 요청해서 장바구니 목록 데이터를 얻어오기 때문에 라이프사이클 함수에서 장바구니에 값을 할당합니다. 장바구니에 들어갈 때마다 장바구니의 최신 상태를 받아볼까 생각했는데 onLoad와 onReady는 초기화 시 한 번만 실행되므로 onShow 함수에 요청을 넣어야 합니다.

총 가격 계산

총 가격 = 선택한 상품의 가격 1 * 수량 + 선택한 상품의 가격 2 * 수량 + ...

공식에 따라

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)
    });
}

다른 작업을 얻을 수 있습니다. 총 가격이 변경될 때마다 이 메소드를 호출해야 합니다.

이벤트 선택

클릭하면 선택되고, 다시 클릭하면 선택 해제됩니다. 실제로는 선택한 필드가 변경됩니다. 목록 배열에 있는 현재 제품의 인덱스를 이벤트에 전달하려면 data-index="{{index}}"를 전달합니다.

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();                           // 重新获取总价
}

모든 이벤트 선택

모두 선택은 선택 항목을 변경하는 것입니다

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();                               // 重新获取总价
}

전체 선택 상태에 따라 각 제품의 수량을 늘리거나 줄입니다. selectAllStatus

+ 기호를 클릭하고 숫자를 1씩 추가하고, - 기호를 클릭하고 num > 1인 경우 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();
}

제품 삭제

삭제 버튼을 클릭하면 장바구니 목록에서 현재 요소가 삭제됩니다. 삭제 후 장바구니가 비어 있으면 장바구니 빈 플래그 hasList to 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();           //重新计算总价格
    }  
}

Applet 장바구니 기능 개발은 각 기능 모듈을 분리하여 별도로 개발하는데, 이는 기본적으로 웹 페이지 및 APP 측의 개발 아이디어와 동일합니다. 장바구니 기능은 비교적 간단하지만 WeChat 애플릿에는 여전히 많은 지식 포인트가 있습니다.

추천: "Mini 프로그램 개발 튜토리얼"

위 내용은 WeChat 애플릿에서 장바구니 기능을 구현하는 방법은 무엇입니까? (방법 소개)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!