WeChat アプレットでショッピング カートを開発するためのサンプル コード

この記事では主にWeChatミニプログラムの関連情報とショッピングカートの簡単な例を紹介します。

これが必要な友達は、ショッピングカート機能を実装する小さなデモです。関数で参照できます。

概要: 製品数量の追加と減算、価格の集計、すべてを選択するか、すべて選択しない

デザインのアイデア:

1. ネットワーク

から次のJsonデータ形式配列にアップロード 1. ショッピングカートID:cid 2. タイトル title 3. 数量 num 4. 写真 住所 5. 価格 Price 6. 小計 7. 選択されているかどうか

が選択されている 2.

チェックボックスをクリック 切り替え操作 すでにされている場合逆に、クリックすると、cid の代わりにインデックスが使用され、トラバースに便利です。 3. 最初のクリックですべてが選択され、2 回目のクリックで選択が解除されます。 all ボタン 自体も同様にトグル変換

4. 決済ボタンをクリックして、ネットワーク経由でサーバーに送信するために選択した CID 配列を取り出します。これは、結果のデモとしてのトーストです。 5. ステッパーを使用して加算および減算演算を実行し、識別子としてインデックスも使用し、クリック後に数値を書き戻します。

6. レイアウト、すべてを選択し、

Android

の重量と同様に、ショッピングカートモールの適応高さに合わせてチェックアウトボタンの下部に合わせます。

手順:

初期データレンダリング

1.1 レイアウトとスタイルシート

上部は商品リスト、その下は全選択ボタンと即時決済ボタンです

商品リストの左側は商品

サムネイル画像

、右上は商品タイトル、右下は商品価格と数量です。商品数量はWXStepperを使用して加算と減算の演算を実装します

js: よく取得されるデータソースを初期化します。ネットワークから。

1.2 統合WXStepper

1.2.1 コンポーネントの内容をコピー

[2016-10-16]

stepper.

wxss

の内容をcart.wxssにコピーしますstepper.wxmlの内容をカートにコピーします。 wxml

前の単一コンポーネントとの違いは次のとおりです。ここで定義する必要があります。配列minusStatusesは、各プラスボタンとマイナスボタンに対応します。もちろんカートにまとめても問題ありません。

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

元の

静的

文字WXStepperは次のコードに置き換えられます

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

jsコードbindMinus 、bindPlus は次のように変更されます:

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

効果は次のようになります:

[2016-10-17]

配列に保存される手動変更の数を修正します

1.3 LXCheckboxGroup を統合します

レイアウト ファイルのコードを wxml にコピーします。ここで、選択されたステータスを確認する必要があります。通常、ショッピング カートのチェック ステータスはネットワーク上に記録されます。

index 値は、トラバーサルのために 値を渡すjs に使用されます。

/*外部容器*/
.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;
}

チェック ボックス

Rrree

バインド、チェック ボックス

インシデント

をクリックし、選択状態に対してカウンター選択操作を実行します。

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

レンダリング:

1.4 すべて選択ボタンと即時決済ボタンを追加します。

1.4.1 フレックスと固定高さを使用して、上記のボタンの下部の配置を実現するようにレイアウト ファイルを変更します。

それがまだ一番下にあるかどうかを確認するために 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
    });
  }

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

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

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

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

 bindCheckout: function() {
    // 初始化toastStr字符串
    var toastStr = 'cid:';
    // 遍历取出已勾选的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;

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 アプレットでショッピング カートを開発するためのサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。