Hema Fresh Food imité par le mini programme WeChat

Le mini programme est une chose facile à utiliser. Pour les novices, si vous lisez plus de documents officiels, vous pouvez dans un premier temps créer un mini programme relativement complet, précisément parce qu'il est facile à démarrer et que les fonctions sont simples à mettre en œuvre, Les mini-programmes deviennent de plus en plus populaires. La valeur commerciale augmente également. Dans cet article, nous allons vous apprendre une imitation d'applet WeChat Hema Xiansheng.

Vue préliminaire du projet

Hema Fresh est le nouveau format de vente au détail d'Alibaba qui a complètement reconstruit les supermarchés hors ligne et est très populaire.

Fonction du projet

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

Processus de conception du mini programme

Le mini programme est une chose facile pour démarrer. Pour les novices, lisez plus de documents officiels pour créer un Mini préliminaire plus complet. les programmes deviennent de plus en plus populaires précisément parce qu'ils sont faciles à utiliser et que leurs fonctions sont simples à mettre en œuvre, et que leur valeur commerciale augmente également.

1. Outils et documents du projet

1. Outils de développement Web WeChat : site officiel du programme WeChat Mini Il s'agit d'un éditeur relativement facile à utiliser, très pratique pour édition de mini-programmes.

2. Documents de développement : collection et secrets du programme WeChat Mini Utilisez-le pour trouver des API, des composants, des cadres, etc. des programmes WeChat Mini.

3. Bibliothèque d'icônes : Bibliothèque d'icônes vectorielles Iconfont-Alibaba Vous pouvez trouver presque toutes les petites icônes que vous souhaitez, ce qui est très pratique.

4. Easy Mork : easy-mock est utilisé pour la simulation en arrière-plan afin d'obtenir des données JSON

5. Le framework weui est introduit, comme l'interface d'informations personnelles ; , l'utilisation de weui peut être effectuée rapidement et facilement

2. Développement de projet

Le développement d'applets WeChat est encore quelque peu différent du développement H5 traditionnel, et il est facile d'y accéder inquiéter.
L'applet est un framework basé sur MVVM. Il est très important de faire un usage raisonnable de la liaison de données pour mettre à jour l'interface
Lors du développement, n'écrivez pas et n'écrivez pas en même temps. documentation. Vous constaterez que vous écrivez accidentellement un composant. .

3. Sortie du projet

Entrez dans la plateforme de développement, enregistrez les informations sur le projet->Téléchargez la version dans l'éditeur->Sélectionnez soumettre pour révision dans la version de développement->Réussite réussie- > Le projet est en ligne

Analyse des fonctions partielles

Jetons d'abord un coup d'œil au répertoire de mon projet

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

1. >Il existe plusieurs types de formulaires de carrousel, tels que l'affichage horizontal d'images d'affiches courantes, ainsi que l'affichage horizontal et vertical de la liste de produits, la rotation de la boîte d'informations sur les titres

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

Puis définissez display: inline-block; space: nowrap;
La conversion de la zone d'informations du titre adopte une rotation de haut en bas et est complétée à l'aide d'un swiper imbriqué avec vue défilante

2.Gestion des produits classifiés

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

Obtenez les données de fond via easy-moc et envoyez les informations nécessaires au global globalData

Pour le traitement des données, vous devez clarifier quelles sont les informations globales et lesquelles sont les informations locales

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

Et certaines informations personnelles, telles que la date de naissance, les informations du compte peuvent être stockées localement via wx.setStorage et wx.getStorage

Modifier le produit informations et traiter l'état du panier grâce à des opérations telles que l'affichage et l'appui sur les boutons

Par exemple, réduire le nombre de produits dans le panier

4. Introduction du framework 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,
    })
  },

@import './styles/weui.wxss';

Les composants de l'applet WeChat, l'API sont très puissantes et nécessitent une exploration constante, un apprentissage continu et la lecture de plus de documents

1. Être doué pour utiliser des ressources efficaces, telles que comme iconfont esay-moc weui, etc.

2. Soyez prudent lorsque vous coupez des pages et maîtrisez l'utilisation d'une mise en page flexible et d'autres méthodes de mise en page. Le rpx des mini-programmes est vraiment facile à utiliser<.>

3. N'écrivez pas de code en une seule fois. Lorsque les fonctions sont réutilisables, elles doivent être abstraites et encapsulées afin que le code soit facile à maintenir et à lire

4. Adresse du projet :
   https://github.com/fishman17/... Contient des notes détaillées

Email : 734583898@qq.com

Enfin, si vous aimez ce projet, merci de lui donner une étoile.

Vue préliminaire du projet

Imiter Hema Xiansheng et réaliser certaines fonctions.

Hema Fresh est un nouveau format de vente au détail qu'Alibaba a entièrement reconstruit pour les supermarchés hors ligne. Il est très populaire

.

Fonction de projet

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

Copier après la connexion

Copier après la connexion

Processus de conception de mini-programme

Le mini-programme est une chose facile à obtenir commencé avec. Pour les novices, si vous lisez plus de documents officiels, vous pouvez dans un premier temps réaliser un mini programme relativement complet. Justement parce qu'il est facile de démarrer et que les fonctions sont simples à mettre en œuvre, les mini programmes sont de plus en plus populaires et leur commercial. la valeur augmente également.

1. Outils et documents du projet

1. Outils de développement Web WeChat : site officiel du programme WeChat Mini Il s'agit d'un éditeur relativement facile à utiliser, très pratique pour édition de mini-programmes.

2. Documents de développement : collection et secrets du programme WeChat Mini Utilisez-le pour trouver des API, des composants, des cadres, etc. des programmes WeChat Mini.

3. Bibliothèque d'icônes : Bibliothèque d'icônes vectorielles Iconfont-Alibaba Vous pouvez trouver presque toutes les petites icônes que vous souhaitez, ce qui est très pratique.

4. Easy Mork : easy-mock est utilisé pour la simulation en arrière-plan afin d'obtenir des données JSON

5. le framework weui est introduit, comme l'interface d'informations personnelles ; , l'utilisation de weui peut être effectuée rapidement et facilement

2. Développement de projet

Le développement d'applets WeChat est encore quelque peu différent du développement H5 traditionnel, et il est facile d'y accéder inquiéter.
L'applet est un framework basé sur MVVM. Il est très important de faire un usage raisonnable de la liaison de données pour mettre à jour l'interface
Lors du développement, n'écrivez pas et n'écrivez pas en même temps. documentation. Vous constaterez que vous écrivez accidentellement un composant. .

3. Sortie du projet

Entrez dans la plateforme de développement, enregistrez les informations sur le projet->Téléchargez la version dans l'éditeur->Sélectionnez soumettre pour révision dans la version de développement->Réussite réussie- > Le projet est en ligne

Analyse des fonctions partielles

Jetons d'abord un coup d'œil au répertoire de mon projet

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

Copier après la connexion

Copier après la connexion

1. >Il existe plusieurs types de formulaires de carrousel, tels que l'affichage horizontal d'images d'affiches courantes, ainsi que l'affichage horizontal et vertical de la liste de produits, la rotation de la boîte d'informations sur les titres

Le composant siwper implémente très bien l'affichage horizontal d'images d'affiches, comme

Cependant, le glissement horizontal, vous devez faire attention à d'autres détails

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

Copier après la connexion

Copier après la connexion

Tout d'abord, ajoutez scroll-x-="true" au composant swiper

Puis définissez display: inline-block; space: nowrap;
La conversion de la zone d'informations du titre adopte une rotation de haut en bas et est complétée à l'aide d'un swiper imbriqué avec vue défilante

2.Gestion des produits classifiés

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

Copier après la connexion

Copier après la connexion

Passez d'abord la fonction de cycle de vie onLoad sur l'interface d'indexation,

Obtenez les données de fond via easy-moc et envoyez les informations nécessaires au global globalData

Pour le traitement des données, vous devez clarifier quelles sont les informations globales et lesquelles sont les informations locales

Par exemple Toutes les informations sur les produits, y compris les produits dans le panier, doivent être placées dans la vue globale. l'état de l'interface actuelle, sont généralement enregistrés dans les données de l'interface actuelle

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

Copier après la connexion

Copier après la connexion

Et certaines informations personnelles, telles que la date de naissance, les informations du compte peuvent être stockées localement via wx.setStorage et wx.getStorage

3. Fonctionnement du panier

Les opérations dans le panier ne sont rien de plus que l'ajout, l'ajout, la soustraction, et vous devez constamment déboguer pour découvrir ce qui ne va pas

Modifier le produit informations et traiter l'état du panier via des opérations telles que l'affichage et l'appui sur les boutons

Par exemple, réduire le nombre de produits dans le panier

4.Introduction au cadre 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,
    })
  },

Copier après la connexion

Copier après la connexion

Le CSS ajouté dans le style CSS global est adapté à toutes les pages, donc weui peut être introduit, ce qui est vraiment pratique pour réaliser certaines interfaces

Résumé

@import './styles/weui.wxss';

Copier après la connexion

Copier après la connexion

Les composants de l'applet WeChat, l'API est très puissante et nécessitent une exploration constante, un apprentissage continu et la lecture de plus de documents

1. Être doué pour utiliser des ressources efficaces, telles que Iconfont Esay -moc weui, etc.

2. Soyez prudent lorsque vous coupez des pages et maîtrisez l'utilisation d'une mise en page flexible et d'autres méthodes de mise en page. Le rpx des mini-programmes est vraiment facile à utiliser
<.>

3. N'écrivez pas de code en une seule fois. Lorsque les fonctions sont réutilisables, elles doivent être abstraites et encapsulées afin que le code soit facile à maintenir et à lire.

4. Le contenu ci-dessus est une imitation de l'applet Hema WeChat. J'espère qu'il pourra aider tout le monde.

Recommandations associées :

Exemples d'introduction du développement du mini-programme WeChat

Explication détaillée des composants vidéo, musique et image du mini-programme WeChat

Une étude de cas sur la façon dont l'applet WeChat peut obtenir les étapes des exercices WeChat (photo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!