WeChat 미니 프로그램에 장바구니 기능 구현

머리말

과거에는 장바구니가 기본적으로 수많은 DOM 연산을 통해 구현되었습니다. WeChat 애플릿은 실제로 vue.js의 사용법과 매우 유사합니다. 다음으로 애플릿이 장바구니 기능을 구현하는 방법을 살펴보겠습니다.

Requirements

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

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

• 단일 상품의 구매수량이 증감합니다

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

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

• 첫 번째는 제품 목록(카트)입니다. 목록에 필요한 항목은 제품 이미지(이미지), 제품 이름(제목), 단가(가격), 수량(숫자), 선택 여부입니다. , 제품 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 함수에 요청을 넣어야 합니다. (여기서 가짜 데이터인 척 해보자)

Layout wxml

이전에 작성한 정적 페이지를 복구하고 데이터를 바인딩합니다.

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

총 가격 계산

총 가격 = 선택한 제품의 가격 1 * 수량 + 선택한 제품의 가격 2 * 수량 +...
공식에 따르면

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

페이지의 다른 작업이 수행됩니다. 모든 변경사항은 이 메소드를 호출해야 합니다.

이벤트 선택

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

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

모든 이벤트 선택

모두 선택은 전체 선택 상태에 따라 각 상품의 선택을 변경하는 것입니다. selectAllStatus

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

수량을 늘리거나 줄입니다

+를 클릭하면 숫자가 1씩 증가하고, -를 클릭하면 됩니다. , num > 1이면 마이너스 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>

제품 삭제

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

요약

장바구니 기능이지만 비교적 간단하지만 WeChat 애플릿에는 여전히 많은 지식 포인트가 있어 초보자가 연습하고 익히기에 적합합니다.

추천 튜토리얼: "WeChat 미니 프로그램"

위 내용은 WeChat 미니 프로그램에 장바구니 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!