Maison >Applet WeChat >Développement de mini-programmes >Hema Fresh Food imité par le mini programme WeChat
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.
* 用户信息注册 * 首页几个轮播和界面交互 * 分类商品管理购买 * 购物车界面交互及其操作 * 个人信息界面
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.
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.
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.
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.
Easy Mork : easy-mock est utilisé pour la simulation en arrière-plan afin d'obtenir des données JSON
Le framework weui est introduit, comme l'interface d'informations personnelles ; , l'utilisation de weui peut être effectuée rapidement et facilement
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. .
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
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" //购物车 ],
<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>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>Passez d'abord la fonction de cycle de vie onLoad sur l'interface d'indexation,
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
Par exemple, réduire le nombre de produits dans le panier
4. Introduction du framework weui
Le CSS ajouté dans le style CSS global est adapté à toutes les pages. A partir de là, weui peut être introduit, ce qui est vraiment pratique pour réaliser certaines interfacesreduceItems: 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, }) },Résumé.
@import './styles/weui.wxss';
Être doué pour utiliser des ressources efficaces, telles que comme iconfont esay-moc weui, etc.
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<.>
Email : 734583898@qq.com
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
* 用户信息注册 * 首页几个轮播和界面交互 * 分类商品管理购买 * 购物车界面交互及其操作 * 个人信息界面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
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.
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.
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.
Easy Mork : easy-mock est utilisé pour la simulation en arrière-plan afin d'obtenir des données JSON
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
Le composant siwper implémente très bien l'affichage horizontal d'images d'affiches, commeCependant, 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>Tout d'abord, ajoutez scroll-x-="true" au composant swiperPuis 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éfilante2.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>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
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
Pour le traitement des données, vous devez clarifier quelles sont les informations globales et lesquelles sont les informations localeswx.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
3. Fonctionnement du panierLes 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 pasModifier 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, }) },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 interfacesRésumé
@import './styles/weui.wxss';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
Exemples d'introduction du développement du mini-programme WeChat
- Être doué pour utiliser des ressources efficaces, telles que Iconfont Esay -moc weui, etc.
- 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
<.>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.
- Recommandations associées :
Le contenu ci-dessus est une imitation de l'applet Hema WeChat. J'espère qu'il pourra aider tout le monde.
Explication détaillée des composants vidéo, musique et image du mini-programme WeChat
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!