電子商取引の商品表示とショッピングカート機能を実装するためのUniAppの設定と使用ガイド

UniApp は、Vue.js に基づいて開発されたクロスプラットフォーム アプリケーション開発フレームワークで、WeChat アプレット、H5 アプリケーション、アプリなどの開発に使用できます。中でも、ECの商品表示やショッピングカート機能の実現は、ECアプリケーションを開発する際に欠かせない機能の1つです。この記事では、UniApp でこれらの関数を構成して使用する方法と、対応するコード例を紹介します。

まず最初に用意する必要があるのは商品データです。 JavaScript 配列を使用して、製品名、価格、写真などの製品情報を保存できます。例:

var goodsList = [
  {
    name: '商品1',
    price: 10,
    image: 'image1.jpg'
  },
  {
    name: '商品2',
    price: 20,
    image: 'image2.jpg'
  },
  ...
];

次に、製品リストを表示するページを作成する必要があります。 pages フォルダーの下に新しい goodsList フォルダーを作成し、その中に goodsList.vue ファイルを作成できます。このファイルでは、v-for ディレクティブを使用して製品リストをループし、uni-image コンポーネントを使用して製品画像を表示できます。サンプル コードは次のとおりです。

<template>
  <view>
    <view v-for="(item, index) in goodsList" :key="index">
      <uni-image :src="item.image"></uni-image>
      <text>{{ item.name }}</text>
      <text>￥{{ item.price }}</text>
      <button @click="addToCart(item)">加入购物车</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goodsList: goodsList
    };
  },
  methods: {
    addToCart(item) {
      // 将商品加入购物车
    }
  }
};
</script>

上記のコードでは、v-for ディレクティブと :src バインディング属性を使用して、製品のレンダリングをループします。商品画像を一覧表示します。同時に、@click を通じてボタンのクリック イベントをリッスンし、addToCart メソッドを呼び出して、ショッピング カートに商品を追加する機能を実装します。

次に、ショッピング カート ページを作成する必要があります。また、pages フォルダーの下に新しい cart フォルダーを作成し、その中に cart.vue ファイルを作成します。このファイルでは、配列を使用してショッピング カート内の製品情報を保存し、v-for 命令を使用してショッピング カート内の製品のリストをループできます。同時に、uni-badge コンポーネントを使用して製品の数量を表示できます。サンプル コードは次のとおりです。

<template>
  <view>
    <view v-for="(item, index) in cartList" :key="index">
      <uni-image :src="item.image"></uni-image>
      <text>{{ item.name }}</text>
      <text>￥{{ item.price }}</text>
      <button @click="removeFromCart(item)">删除</button>
    </view>
    <uni-badge :content="cartList.length"></uni-badge>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cartList: []
    };
  },
  methods: {
    removeFromCart(item) {
      // 从购物车中移除商品
    }
  }
};
</script>

上記のコードでは、v-for ディレクティブと :src バインディング属性を使用して、次のリストをループします。ショッピングカート内の商品を選択し、商品画像を表示します。同時に、@click を通じてボタンのクリック イベントをリッスンし、removeFromCart メソッドを呼び出して、ショッピング カートから商品を削除する機能を実装します。さらに、uni-badge コンポーネントを使用して、ショッピング カート内の商品数を表示します。

最後に、商品一覧やショッピングカートを表示したいページにジャンプリンクを追加します。たとえば、ホームページにボタンを追加し、クリックすると商品一覧ページにジャンプするサンプルコードは次のとおりです:

<button @click="goToGoodsList">商品列表</button>

対応するスクリプトにメソッド goToGoodsList を追加し、メソッド uni.navigateTo メソッド内でこれを使用して、ページにジャンプします。サンプルコードは以下のとおりです。

goToGoodsList() {
  uni.navigateTo({
    url: '/pages/goodsList/goodsList'
  });
}

このように、ホームページ上の「商品一覧」ボタンをクリックすると、商品一覧ページにジャンプします。

上記のコード例を通じて、UniApp での電子商取引製品の表示とショッピング カート機能の構成と使用を完了できます。開発者は、独自のニーズに応じてコードを変更および拡張できます。この記事が UniApp 開発の皆様のお役に立てれば幸いです!

以上が電子商取引の商品表示とショッピングカート機能を実装するためのUniAppの設定と使用ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。