찾다

집  >  기사  >  위챗 애플릿  >  WeChat 애플릿으로 장바구니를 개발하기 위한 예제 코드

WeChat 애플릿으로 장바구니를 개발하기 위한 예제 코드

高洛峰
高洛峰원래의
2017-03-15 16:21:083673검색

이 글은 위챗 미니 프로그램 장바구니의 간단한 예시에 대한 관련 정보를 주로 소개합니다. 필요한 친구는

위챗 미니 프로그램을 참고하여 장바구니 기능을 구현해보세요. . 이 기능이 필요하면 친구들이 참고할 수 있습니다.

요약: 제품 수량 더하기 또는 빼기, 가격 요약, 모두 선택 또는 모두 선택 안 함

디자인 아이디어:

1. 인터넷 에서 을 Json 데이터 형식 으로 다음 배열에 업로드합니다. 1. 장바구니 ID: cid 2. 제목 제목 3. 수량 번호 4.사진주소 5. 가격 가격 6. 소계 7. 선택 여부

가 선택됩니다. 2.

체크박스토글 작업이 이미 선택되어 있으면 사용할 수 없습니다. 클릭 후 선택, 반대로 cid 대신 식별자를 기반으로 클릭하면 순회가 편리합니다

3. 모두 선택 작업 첫 번째 클릭하면 모두 선택되고 다시 클릭하면 모두 선택되지 않습니다. 모두 선택

버튼 또한 토글 변환

을 따릅니다. 4. 결제 버튼을 클릭하여 네트워크를 통해 서버에 제출하기 위해 선택한 cid 배열을 꺼냅니다. 결과의.

5. 스테퍼를 사용하여 덧셈과 뺄셈 연산을 수행하고, 인덱스를 식별자로 사용하고, 클릭한 후 num 값을 다시 씁니다.

여섯째, 레이아웃을 모두 선택하고 결제 버튼 하단에 맞춰 장바구니 몰의 높이를

안드로이드의 무게와 비슷하게 맞춰줍니다.

단계:

초기 데이터 렌더링


1.1 레이아웃 및 스타일 시트

상단은 제품 목록, 하단은 전체선택 버튼과 즉시결제 버튼

상품목록 좌측이 상품

썸네일, 우측 상단이 상품명, 우측 하단이 상품명입니다. 제품 가격, 수량, 제품 수량은 WXStepper 덧셈 및 뺄셈 연산

js을 사용하여 구현됩니다. 네트워크에서 자주 얻는 데이터 소스를 초기화합니다. 관련

인터페이스를 사용할 수 있습니다. 위치: http://www.php.cn/


Page({
  data:{
    carts: [
      {cid:1008,title:'Zippo打火机',image:'https://img12.360buyimg.com/n7/jfs/t2584/348/1423193442/572601/ae464607/573d5eb3N45589898.jpg',num:'1',price:'198.0',sum:'198.0',selected:true},
      {cid:1012,title:'iPhone7 Plus',image:'https://img13.360buyimg.com/n7/jfs/t3235/100/1618018440/139400/44fd706e/57d11c33N5cd57490.jpg',num:'1',price:'7188.0',sum:'7188.0',selected:true},
      {cid:1031,title:'得力订书机',image:'https://img10.360buyimg.com/n7/jfs/t2005/172/380624319/93846/b51b5345/5604bc5eN956aa615.jpg',num:'3',price:'15.0',sum:'45.0',selected:false},
      {cid:1054,title:'康师傅妙芙蛋糕',image:'https://img14.360buyimg.com/n7/jfs/t2614/323/914471624/300618/d60b89b6/572af106Nea021684.jpg',num:'2',price:'15.2',sum:'30.4',selected:false},
      {cid:1063,title:'英雄钢笔',image:'https://img10.360buyimg.com/n7/jfs/t1636/60/1264801432/53355/bb6a3fd1/55c180ddNbe50ad4a.jpg',num:'1',price:'122.0',sum:'122.0',selected:true},
    ]
  }
})

레이아웃 파일


<view class="container carts-list">
  <view wx:for="{{carts}}" class="carts-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
    <view>
     <image class="carts-image" src="{{item.image}}" mode="aspectFill"/>
    </view>
   <view class="carts-text">
    <text class="carts-title">{{item.title}}</text>
    <view class="carts-subtitle">
     <text class="carts-price">{{item.sum}}</text>
     <text>WXStepper</text>
    </view>
   </view>
  </view>
</view>

스타일 시트


/*外部容器*/
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 

/*整体列表*/
.carts-list {
  display: flex;
  flex-direction: column;
  padding: 20rpx 40rpx;
}

/*每行单元格*/
.carts-item {
  display: flex;
  flex-direction: row;
  height:150rpx;
  /*width属性解决标题文字太短而缩略图偏移*/
  width:100%;
  border-bottom: 1px solid #eee;
  padding: 30rpx 0;
}

/*左部图片*/
.carts-image {
  width:150rpx;
  height:150rpx;
}


/*右部描述*/
.carts-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*右上部分标题*/
.carts-title {
  margin: 10rpx;
  font-size: 30rpx;
}

/*右下部分价格与数量*/
.carts-subtitle {
  font-size: 25rpx;
  color:darkgray;
  padding: 0 20rpx;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
}

/*价格*/
.carts-price {
  color: #f60;
}

WeChat 애플릿으로 장바구니를 개발하기 위한 예제 코드

1.2 WXStepper 통합

1.2.1 구성 요소 복사 content

[2016-10-16]

stepper의 내용을 복사합니다.

wxss to cart.wxss

stepper.wxml의 내용을 복사합니다. cart.wxml

은 이전 단일 구성 요소와 다릅니다. 중요한 점은 여기서 minusStatus 배열을 각 플러스 및 마이너스 버튼에 해당하도록 정의해야 한다는 것입니다. 물론 카트에 합치는 데에는 문제가 없습니다.

minusStatuses: ['disabled', 'disabled', 'normal', 'normal', 'disabled']


원본

정적문자 WXStepper 교체 다음 코드는 


 <view class="stepper">
        <!-- 减号 -->
        <text class="{{minusStatuses[index]}}" data-index="{{index}}" bindtap="bindMinus">-</text>
        <!-- 数值 -->
        <input type="number" bindchange="bindManual" value="{{item.num}}" />
        <!-- 加号 -->
        <text class="normal" data-index="{{index}}" bindtap="bindPlus">+</text>
       </view>

js 코드인 바인드마이너스(bindMinus)와 바인드플러스(bindPlus)는 각각 다음과 같이 변환됩니다. 


bindMinus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 如果只有1件了，就不允许再减了
    if (num > 1) {
      num --;
    }
    // 只有大于一件的时候，才能normal状态，否则disable状态
    var minusStatus = num <= 1 ? &#39;disabled&#39; : &#39;normal&#39;;
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },
  bindPlus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 自增
    num ++;
    // 只有大于一件的时候，才能normal状态，否则disable状态
    var minusStatus = num <= 1 ? &#39;disabled&#39; : &#39;normal&#39;;
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },

효과는 다음과 같습니다. 표시된 대로:

WeChat 애플릿으로 장바구니를 개발하기 위한 예제 코드

[2016-10-17]

어레이에 저장된 수동 변경 사항 수 수정

1.3 LXCheckboxGroup 통합

레이아웃 파일 코드를 wxml에 복사합니다. 여기서는 선택한 상태를 확인해야 합니다. 일반적으로 장바구니 확인 상태가 네트워크에 기록됩니다.

인덱스 값은 순회를 위한

패스 값js에 사용됩니다.

 


 <!-- 复选框图标 -->
    <icon wx:if="{{item.selected}}" type="success_circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>
    <icon wx:else type="circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>

체크박스 중심


/*复选框样式*/
.carts-list icon {
  margin-top: 60rpx;
  margin-right: 20rpx;
}

체크박스 클릭 바인딩

이벤트 , 선택한 상태에 대해 역선택 작업을 수행합니다. 


  bindCheckbox: function(e) {
    /*绑定点击事件，将checkbox样式改变为选中与非选中*/
    //拿到下标值，以在carts作遍历指示用
    var index = parseInt(e.currentTarget.dataset.index);
    //原始的icon状态
    var selected = this.data.carts[index].selected;
    var carts = this.data.carts;
    // 对勾选状态取反
    carts[index].selected = !selected;
    // 写回经点击修改后的数组
    this.setData({
      carts: carts
    });
  }

렌더링:

WeChat 애플릿으로 장바구니를 개발하기 위한 예제 코드

1.4 전체 선택 및 지금 정산 버튼 추가

1.4. flex 및 고정 높이를 사용하여 위 버튼의 하단을 정렬하도록 레이아웃 파일을 수정합니다.

3줄로 줄여서 아직 하단에 있는지 확인하세요. 또한 하단에 일시 중단되어 목록 항목 스크롤로 스크롤되지 않는지 확인하세요. 


 <view class="carts-footer">
    <view bindtap="bindSelectAll">
      <icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20"/>
      <icon wx:else type="circle" size="20" />
      <text>全选</text>
    </view>
    <view class="button">立即结算</view>
  </view>

之前用来实现，发现无论如何都不能实现全选部件与结算按钮分散对齐，不响应如下样式


  display: flex;
  flex-direction: row;
  justify-content: space-between;

样式表


/*底部按钮*/
.carts-footer {
  width: 100%;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/*复选框*/
.carts-footer icon {
  margin-left: 20rpx;
}

/*全选字样*/
.carts-footer text {
  font-size: 30rpx;
  margin-left: 8rpx;
  line-height: 10rpx;
}

/*立即结算按钮*/
.carts-footer .button {
  line-height: 80rpx;
  text-align: center;
  width:220rpx;
  height: 80rpx;
  background-color: #f60;
  color: white;
  font-size: 36rpx;
  border-radius: 0;
  border: 0;
}

1.4.2 全选与全不选事件

实现bindSelectAll事件，改变全选状态

首先定义一个data值，以记录全选状态

selectedAllStatus: false

事件实现：


 bindSelectAll: function() {
    // 环境中目前已选状态
    var selectedAllStatus = this.data.selectedAllStatus;
    // 取反操作
    selectedAllStatus = !selectedAllStatus;
    // 购物车数据，关键是处理selected值
    var carts = this.data.carts;
    // 遍历
    for (var i = 0; i < carts.length; i++) {
      carts[i].selected = selectedAllStatus;
    }
    this.setData({
      selectedAllStatus: selectedAllStatus,
      carts: carts
    });
  }

WeChat 애플릿으로 장바구니를 개발하기 위한 예제 코드

1.4.3 立即结算显示目前所选的cid，以供提交到网络，商品数量应该是包括在cid中的，后端设计应该只关注cid与uid

布局文件也埋一下toast，js只要改变toast的显示与否即可。


<toast hidden="{{toastHidden}}" bindchange="bindToastChange">
  {{toastStr}}
</toast>

为立即结算绑定事件bindCheckout，弹出cid弹窗


 bindCheckout: function() {
    // 初始化toastStr字符串
    var toastStr = &#39;cid:&#39;;
    // 遍历取出已勾选的cid
    for (var i = 0; i < this.data.carts.length; i++) {
      if (this.data.carts[i].selected) {
        toastStr += this.data.carts[i].cid;
        toastStr += &#39; &#39;;
      }
    }
    //存回data
    this.setData({
      toastHidden: false,
      toastStr: toastStr
    });
  },
  bindToastChange: function() {
    this.setData({
      toastHidden: true
    });
  }

1.5 底部悬浮固定

1.5.1 商品列表 .carts-list 加入 margin-bottom: 80rpx; 以及修改上边距为零，使得底部部件与分隔不重复出现，padding: 0 40rpx;

1.5.2 底部按钮 .carts-footer 加入 background: white;

1.5.3 .carts-footer 加入


  position: fixed;
  bottom: 0;
  border-top: 1px solid #eee;

WeChat 애플릿으로 장바구니를 개발하기 위한 예제 코드

1.6 汇总

1.6.1 首先定义一个数据源，并在布局文件中埋坑

total: ''

{{total}}

1.6.2 通用汇总函数


sum: function() {
    var carts = this.data.carts;
    // 计算总金额
    var total = 0;
    for (var i = 0; i < carts.length; i++) {
      if (carts[i].selected) {
        total += carts[i].num * carts[i].price;
      }
    }
    // 写回经点击修改后的数组
    this.setData({
      carts: carts,
      total: &#39;￥&#39; + total
    });
  }

然后分别在bindMinus bindPlus bindCheckbox bindSelectAll onLoad中调用this.sum()

如图：

WeChat 애플릿으로 장바구니를 개발하기 위한 예제 코드

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

위 내용은 WeChat 애플릿으로 장바구니를 개발하기 위한 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：WeChat 미니 프로그램의 맞춤형 생성 사례 소개다음 기사：WeChat 미니 프로그램의 맞춤형 생성 사례 소개

관련 기사

더보기