eコマースショッピングと注文管理のためのUniApp導入ガイド

UniApp は、モバイル アプリケーションを迅速かつ簡単に作成できる、Vue.js に基づくクロスプラットフォーム開発フレームワークです。この記事では、UniApp を使用して e コマース ショッピングおよび注文管理機能を実装する方法と、対応するコード例を紹介します。

1. プロジェクトの準備
まず、UniApp 開発環境をインストールする必要があります。 Node.js と Vue CLI がインストールされていることを確認してください。次に、次のコマンドを使用して UniApp をグローバルにインストールできます:

npm install -g @vue/cli @vue/cli-init

インストールが完了したら、次のコマンドを使用して新しい UniApp プロジェクトを作成できます:

vue init dcloudio/uni-preset-vue demo

Where "demo"は必要な値です。 作成するプロジェクトの名前です。作成後、プロジェクト ディレクトリに入り、開発サーバーを起動します:

cd demo
npm run dev:mp-weixin

これで、WeChat 開発者ツールでプロジェクトを開いて開発を開始できます。

2. EC ショッピング機能の実装

1. 商品リスト
   UniApp では、uni-list と uni-list を使用できます。 -item 製品リストを実装するコンポーネント。ページの template セクションに次のコードを追加できます:

<template>
  <view>
    <uni-list>
      <uni-list-item v-for="item in productList" :key="item.id">
        <view slot="title">{{ item.name }}</view>
        <view slot="note">{{ item.price }}</view>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      productList: [
        { id: 1, name: '商品1', price: 10 },
        { id: 2, name: '商品2', price: 20 },
        { id: 3, name: '商品3', price: 30 },
      ],
    };
  },
};
</script>

2. カートに追加
   製品リストに次のコードを追加できます。 uni -button を使用してアイテムをショッピング カートに追加します。ページの template セクションに次のコードを追加できます:

<template>
  <view>
    <uni-list>
      <uni-list-item v-for="item in productList" :key="item.id">
        <view slot="title">{{ item.name }}</view>
        <view slot="note">{{ item.price }}</view>
        <view slot="action">
          <uni-button @click="addToCart(item)">添加到购物车</uni-button>
        </view>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      productList: [
        { id: 1, name: '商品1', price: 10 },
        { id: 2, name: '商品2', price: 20 },
        { id: 3, name: '商品3', price: 30 },
      ],
      cartList: [],
    };
  },
  methods: {
    addToCart(item) {
      this.cartList.push(item);
    },
  },
};
</script>

3. Shopping Cart Page
   アイテムを表示する新しいページを作成できます。ショッピングカート。 UniApp では、uni-list コンポーネントと uni-list-item コンポーネントを使用してショッピング カート リストを表示できます。ページの template 部分に次のコードを追加できます。

<template>
  <view>
    <uni-list>
      <uni-list-item v-for="item in cartList" :key="item.id">
        <view slot="title">{{ item.name }}</view>
        <view slot="note">{{ item.price }}</view>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cartList: [],
    };
  },
};
</script>

3. 注文管理機能の実装

1. Create order
   ショッピングカート内 このページでは、uni-button を使用して注文を作成できます。ページの template セクションに次のコードを追加できます:

<template>
  <view>
    <uni-list>
      <uni-list-item v-for="item in cartList" :key="item.id">
        <view slot="title">{{ item.name }}</view>
        <view slot="note">{{ item.price }}</view>
        <view slot="action">
          <uni-button @click="createOrder(item)">创建订单</uni-button>
        </view>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cartList: [],
      orderList: [],
    };
  },
  methods: {
    createOrder(item) {
      this.orderList.push(item);
      const index = this.cartList.indexOf(item);
      this.cartList.splice(index, 1);
    },
  },
};
</script>

2. Order List
   UniApp では、 を使用してこれを行うことができます。 uni-list および uni-list-item コンポーネントを使用して注文リストを表示します。注文を表示する新しいページを作成できます。ページの template セクションに次のコードを追加します。

<template>
  <view>
    <uni-list>
      <uni-list-item v-for="item in orderList" :key="item.id">
        <view slot="title">{{ item.name }}</view>
        <view slot="note">{{ item.price }}</view>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderList: [],
    };
  },
};
</script>

上記は、UniApp を使用して e コマース ショッピングと注文管理を実装するためのガイドです。上記の手順により、商品リスト、ショッピングカートへの追加、ショッピングカートページ、注文および注文リストの作成などの機能を実装できます。この記事がお役に立てば幸いです。

以上がeコマースショッピングと注文管理のためのUniApp導入ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。