WeChat アプレットにショッピング カート機能を実装するにはどうすればよいですか? （手法の紹介）

WeChat アプレットにショッピング カート機能を実装するにはどうすればよいですか?次の記事では、WeChat アプレットにショッピング カート機能を実装する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

ショッピング モールでもケータリング アプレットでも、注文することでトランザクションを完了する必要があるため、ショッピング カートに追加する操作があります。従来、ショッピング カート機能は基本的に多数の DOM 操作によって実装されていましたが、アプレットは Web ベースではないため、DOM を作成できません。 WeChat アプレットはショッピング カート機能を実装します実際、これは vue.js の使用法と非常によく似ています。

まず、ショッピング カートのニーズを把握しましょう。

#単一選択、全選択とキャンセル、選択した商品に応じて合計金額が計算されます

単一商品の購入数量の増減

商品を削除します。ショッピング カートが空になると、ページは空のショッピング カートのレイアウトに変わります。

設計図によると、まず静的ページを実装できます。次に、ショッピング カートに必要なデータの種類を見てみましょう。

最初は商品リスト（カート）です。リスト内の項目は、商品画像（image）、商品名（title）、単価（price）、数量（num）、選択されているかどうか（ selected)、製品 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は初期化時に1回しか実行されないので、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();                           // 重新获取总价
}

すべて選択イベント

すべて選択とは、全選択ステータスに応じて各製品の選択数量を変更することです selectAllStatus

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

数字をクリックし、num に 1 を加え、数字 > 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 を 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();           //重新计算总价格
    }  
}

ミニ プログラム ショッピングカート機能の開発は機能モジュールごとに分割 開発の考え方はWebやAPPの開発と基本的に同じです。ショッピング カート機能は比較的シンプルですが、WeChat アプレットにはまだ多くの知識ポイントが含まれています。

推奨事項: 「

ミニ プログラム開発チュートリアル 」

以上がWeChat アプレットにショッピング カート機能を実装するにはどうすればよいですか? （手法の紹介）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。