WeChatミニプログラム - 模倣Hema Fresh Food

ミニプログラムは初心者にとっては、公式ドキュメントを読めば比較的完成度の高いミニプログラムを作ることができるので、簡単に始められ、機能も簡単です。ミニプログラムはますます人気があり、商業的価値も高まっています。この記事では、WeChat アプレットを模倣した Hema Xiansheng について説明します。

プロジェクトの概要

Hemaは、アリババがオフラインスーパーマーケット向けに完全に再構築した新しい小売業態であり、非常に人気があります。

プロジェクト関数

* 用户信息注册
* 首页几个轮播和界面交互
* 分类商品管理购买
* 购物车界面交互及其操作
* 个人信息界面

ミニプログラム設計プロセス

初心者にとっては、公式ドキュメントを読んで始めるのが簡単です。手軽に始められ、機能も簡単に実装できるからこそ、ミニプログラムはますます普及し、商品価値も高まっています。

1. プロジェクトツールとドキュメント

1. WeChat Web 開発者ツール: WeChat ミニ プログラム公式 Web サイト これは比較的使いやすいエディターで、ミニ プログラムの編集に非常に便利です。

2. 開発ドキュメント: WeChat ミニ プログラム コレクションとシークレット これを使用して、WeChat ミニ プログラムの API、コンポーネント、フレームワークなどを検索します。

3. アイコンライブラリ: Iconfont-Alibaba Vector Icon Library 必要な小さなアイコンがほぼすべて見つかり、非常に便利です。

4. Easy Mork: easy-mock は、JSON データを取得するためのバックグラウンド シミュレーションに使用されます。

5. weui フレームワークが導入されており、weui

2 で迅速かつ便利に実行できます。プロジェクト開発

WeChat ミニ プログラムの開発は、従来の H5 開発とはまだ多少異なり、トラブルに巻き込まれやすいです。

アプレットは MVVM に基づいたフレームワークです。 インターフェースを更新するにはデータ バインディングを適切に使用することが非常に重要です。
開発するときは、一度にすべてを記述しないでください。コンポーネントを誤ってネイティブに作成したことがわかります。 。

3. プロジェクトのリリース

開発プラットフォームに入り、プロジェクト情報を登録 -> エディターでバージョンをアップロード -> 開発バージョンでレビュー用に送信を選択 -> 承認 -> オンラインでプロジェクトを実行

まず私のプロジェクトディレクトリを見てみましょう

    "pages": [
     "pages/index/index",  //主界面
      "pages/person/person", //个人界面
     "pages/classify/classify", //分类商品界面
     "pages/class/myFruits/myFruits", //水果商店
     "pages/class/myMeat/myMeat", //肉类食品商店
     "pages/myCart/myCart"    //购物车
     ],

1. ホームページのカルーセル画像

カルーセルには、一般的な水平ポスター画像表示、水平および垂直商品リスト表示、見出し情報ボックスの回転

siwper コンポーネントなど、いくつかの形式があります。

        <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
            <block wx:for="{{imgUrls}}" wx:key="index">
                <swiper-item>
                    <image src="{{item}}" class="slide-image"  />
                </swiper-item>
            </block>
        </swiper>

など、水平方向のポスター画像表示の非常に優れた実装です。ただし、水平方向のスライドでは他の詳細に注意を払う必要があります

まず、scroll-x-="true" を swiper コンポーネントに追加します
次に、カルーセルの子要素の親コンテナ: inline-block;white-space: nowrap;

見出し情報ボックスの変換は、スクロールビューのネストされたスワイパーを使用して、上下の回転を採用しています

    <scroll-view scroll-y-="true"  >
                <swiper autoplay="{{autoplay}}" interval="{{interval1}}" duration="{{duration}}" vertical="true">
                    <block wx:for="{{something}}" wx:key="index">
                         //内容 
                    </block>
                </swiper>
    </scroll-view>

2。 IndexインターフェースでonLoadライフサイクル関数を渡し

easy-mocでバックグラウンドデータを取得し、必要な情報をグローバルglobalDataに送信

wx.request({
      url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',
      complete: res => {
        this.globalData.classifyList = res.data;
      },
    })

データ処理にはどれがグローバル情報でどれがローカル情報かを明確にする必要がある
たとえば、すべての商品とショッピングカート内の商品の情報はグローバルに配置する必要があり、現在のインターフェースのステータスなどの一部は通常、現在のインターフェースのデータに保存されます

。生年月日やアカウント情報などの個人情報は、wx.setStorage および wx.getStorage Storage を通じてローカルに配置できます

3. ショッピング カートの操作

ショッピング カート内の操作は、必要なものは加算と減算だけです。ボタンの表示やバインドタップなどの操作で商品情報を修正し、ショッピングカート内の商品数を減らす

4. weui フレームワークの紹介

グローバル CSS スタイルで追加された CSS はすべてのページに適用されるため、weui を導入でき、いくつかのインターフェイスを作成するのに非常に便利です

reduceItems: function (e) {
    let carts = app.globalData.carts;    //获取购物车的信息
    let classifyList = app.globalData.classifyList;  //获取商品的信息
    for (let key of carts) {                        //遍历购物车数组
      if (key.id === e.target.dataset.id) {         //通过WXML中 view里面的bind-id传过来的参数进行查找
        key.cartSelected = true;
        if (key.num === 1) {                  //如果数量为1还要减
          key.num--;
          key.cartSelected = false;           //购物车不选中
          key.selected = false;               //商品中不选中
          app.globalData.carts = carts.filter((item) => {    //进行购物车中商品剔除
            return item.id != e.target.dataset.id;
          })
        } else {
          key.num--;
        }
      }
    }
    let num = 0;                                 //实时更新购物车小计界面显示
    let totalPrice = 0;
    for (let key of carts) {
      if (key.cartSelected) {
        num += key.num;
        totalPrice += key.num * key.price;
      }
    }
    this.setData({                          //通过setData进行当前页面Data数据管理
      cart: app.globalData.carts,
      cartTotal: num,
      cartTotalPrice: totalPrice,
    })
  },

概要

WeChat アプレットのコンポーネント、 API は非常に強力であり、継続的な探索、継続的な学習、より多くのドキュメントの読み取りが必要です

iconfont esay -moc weui などの効果的なリソースを上手に活用してください
ページをカットするときは注意してください。柔軟なレイアウトやその他のレイアウト方法を使用するのが得意です。小さなプログラムの rpx は非常に使いやすいです
関数が再利用可能な場合は、コードを適切にカプセル化する必要があります。保守と読み取りが簡単です
プロジェクトアドレス:

4. https://github.com/fishman17/... 詳細なコメントが含まれています

個人プロフィール

github: https://github .com/fishman17

メール: 734583898@qq.com

最後に、このプロジェクトが気に入ったら、スターを付けてください。ありがとうございます。

プロジェクトの概要

Hema Xianshengを真似ていくつかの機能を実現します。

Hema Freshは、アリババがオフラインスーパーマーケット向けに完全に再構築した新しい小売フォーマットです。非常に人気があります

プロジェクト機能

* 用户信息注册
* 首页几个轮播和界面交互
* 分类商品管理购买
* 购物车界面交互及其操作
* 个人信息界面

ミニプログラム設計プロセス

初心者にとっては、公式ドキュメントをよく読めば、簡単に始められ、機能も簡単なので、最初は比較的完成度の高い小さなプログラムを作ることができます。ますます人気が高まっており、商品価値も高まっています。

1. プロジェクトツールとドキュメント

1. WeChat Web 開発者ツール: WeChat ミニ プログラム公式 Web サイト これは比較的使いやすいエディターで、ミニ プログラムの編集に非常に便利です。

2. 開発ドキュメント: WeChat ミニ プログラム コレクションとシークレット これを使用して、WeChat ミニ プログラムの API、コンポーネント、フレームワークなどを検索します。

3. アイコンライブラリ: Iconfont-Alibaba Vector Icon Library 必要な小さなアイコンがほぼすべて見つかり、非常に便利です。

4. Easy Mork: easy-mock は、JSON データを取得するためのバックグラウンド シミュレーションに使用されます。

5. weui フレームワークが導入されており、weui

2 で迅速かつ便利に実行できます。プロジェクト開発

WeChat ミニ プログラムの開発は、従来の H5 開発とはまだ多少異なり、トラブルに巻き込まれやすいです。

アプレットは MVVM に基づいたフレームワークです。 インターフェースを更新するにはデータ バインディングを適切に使用することが非常に重要です。
開発するときは、一度にすべてを記述しないでください。コンポーネントを誤ってネイティブに作成したことがわかります。 。

3. プロジェクトのリリース

開発プラットフォームに入り、プロジェクト情報を登録 -> エディターでバージョンをアップロード -> 開発バージョンでレビュー用に送信を選択 -> 承認 -> オンラインでプロジェクトを実行

まず私のプロジェクトディレクトリを見てみましょう

    "pages": [
     "pages/index/index",  //主界面
      "pages/person/person", //个人界面
     "pages/classify/classify", //分类商品界面
     "pages/class/myFruits/myFruits", //水果商店
     "pages/class/myMeat/myMeat", //肉类食品商店
     "pages/myCart/myCart"    //购物车
     ],

1. ホームページのカルーセル画像

カルーセルには、一般的な水平ポスター画像表示、水平および垂直商品リスト表示、見出し情報ボックスの回転

siwper コンポーネントなど、いくつかの形式があります。

        <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
            <block wx:for="{{imgUrls}}" wx:key="index">
                <swiper-item>
                    <image src="{{item}}" class="slide-image"  />
                </swiper-item>
            </block>
        </swiper>

など、水平方向のポスター画像表示の非常に優れた実装です。ただし、水平方向のスライドでは他の詳細に注意を払う必要があります

まず、scroll-x-="true" を swiper コンポーネントに追加します
次に、カルーセルの子要素の親コンテナ: inline-block;white-space: nowrap;

見出し情報ボックスの変換は、スクロールビューのネストされたスワイパーを使用して、上下の回転を採用しています

    <scroll-view scroll-y-="true"  >
                <swiper autoplay="{{autoplay}}" interval="{{interval1}}" duration="{{duration}}" vertical="true">
                    <block wx:for="{{something}}" wx:key="index">
                         //内容 
                    </block>
                </swiper>
    </scroll-view>

2。 IndexインターフェースでonLoadライフサイクル関数を渡し

easy-mocでバックグラウンドデータを取得し、必要な情報をグローバルglobalDataに送信

wx.request({
      url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',
      complete: res => {
        this.globalData.classifyList = res.data;
      },
    })

データ処理にはどれがグローバル情報でどれがローカル情報かを明確にする必要がある
たとえば、すべての商品とショッピングカート内の商品の情報はグローバルに配置する必要があり、現在のインターフェースのステータスなどの一部は通常、現在のインターフェースのデータに保存されます

。生年月日やアカウント情報などの個人情報は、wx.setStorage および wx.getStorage Storage を通じてローカルに配置できます

3. ショッピング カートの操作

ショッピング カート内の操作は、必要なものは加算と減算だけです。ボタンの表示やバインドタップなどの操作で商品情報を修正し、ショッピングカート内の商品数を減らす

4. weui フレームワークの紹介

グローバル CSS スタイルで追加された CSS はすべてのページに適用されるため、weui を導入でき、いくつかのインターフェイスを作成するのに非常に便利です

reduceItems: function (e) {
    let carts = app.globalData.carts;    //获取购物车的信息
    let classifyList = app.globalData.classifyList;  //获取商品的信息
    for (let key of carts) {                        //遍历购物车数组
      if (key.id === e.target.dataset.id) {         //通过WXML中 view里面的bind-id传过来的参数进行查找
        key.cartSelected = true;
        if (key.num === 1) {                  //如果数量为1还要减
          key.num--;
          key.cartSelected = false;           //购物车不选中
          key.selected = false;               //商品中不选中
          app.globalData.carts = carts.filter((item) => {    //进行购物车中商品剔除
            return item.id != e.target.dataset.id;
          })
        } else {
          key.num--;
        }
      }
    }
    let num = 0;                                 //实时更新购物车小计界面显示
    let totalPrice = 0;
    for (let key of carts) {
      if (key.cartSelected) {
        num += key.num;
        totalPrice += key.num * key.price;
      }
    }
    this.setData({                          //通过setData进行当前页面Data数据管理
      cart: app.globalData.carts,
      cartTotal: num,
      cartTotalPrice: totalPrice,
    })
  },

概要

WeChat アプレットのコンポーネント、 API は非常に強力であり、継続的な探索、継続的な学習、より多くのドキュメントの読み取りが必要です

iconfont esay -moc weui などの効果的なリソースを上手に活用してください
ページをカットするときは注意してください。柔軟なレイアウトやその他のレイアウト方法を使用するのが得意です。小さなプログラムの rpx は非常に使いやすいです
関数が再利用可能な場合は、コードを適切にカプセル化する必要があります。保守も読み取りも簡単です。
上記の内容はHema WeChatアプレットです。皆様のお役に立てれば幸いです。

4. 関連する推奨事項:

WeChatミニプログラム開発の導入例

WeChatミニプログラムのビデオ、音楽、画像コンポーネントの詳細な説明

WeChatミニプログラムがWeChat演習ステップを取得する方法のケーススタディ(写真)

以上がWeChatミニプログラム - 模倣Hema Fresh Foodの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。