store miniprogram
1.0.0
Il y a quelque temps, j'ai créé un site Web de centre commercial côté PC, vue-store, imitant Xiaomi Mall. J'ai récemment lu la documentation du mini-programme WeChat, j'ai donc commencé à créer une version du mini-programme WeChat.
Ce projet réutilise le backend de vue-store et ajoute l'API de connexion de l'applet WeChat basée sur le serveur de magasin d'origine.
J'utilise mon temps libre dans les cours en ligne pour apprendre et le faire en même temps. C'est un peu difficile. Si vous avez des questions ou de bonnes suggestions, n'hésitez pas à soumettre des problèmes.
Puisqu’il est réalisé avec un compte test, il n’existe pas de version d’aperçu en ligne.
Version Web PC : vue-store.
Backend : magasin-serveur .
Si vous pensez que ce projet est bon, vous pouvez cliquer sur
Stardans le coin supérieur droit pour le soutenir. Merci ! ^_^
Afin de distinguer le mini programme officiel de Xiaomi Mall, j'ai nommé ce projet Xiaomi. Ce projet n'a rien à voir avec le site officiel de Xiaomi. Il s'agit d'un projet purement personnel. Si vous avez besoin d'acheter des produits Xiaomi, veuillez vous rendre sur la boutique officielle de Xiaomi.
Le projet contient 4 tabBars : page d'accueil, page de découverte (c'est-à-dire page d'affichage du produit), panier et le mien. Il y a aussi la page de détails du produit, ma collection, la page de règlement des commandes et ma commande.
Il réalise l'affichage des produits, la requête de classification des produits, la recherche de produits par mots clés, l'affichage des informations détaillées sur les produits, le panier d'achat des utilisateurs, le règlement des commandes, la commande des utilisateurs et la liste de collecte des utilisateurs.
Le projet dans son ensemble fait référence à l'implémentation de vue-store et implémente essentiellement toutes ses fonctions. On peut dire qu'il s'agit de sa version applet WeChat.
Le backend réutilise le backend de vue-store et ajoute l'API de connexion de l'applet WeChat basée sur le serveur de magasin d'origine.
Front-end : applet WeChat natif
Back-end : Node.js , Koa框架
Base de données : Mysql
Lorsque l'applet est démarrée, elle appelle wx.login pour obtenir les informations de connexion ( code ), puis renvoie le code au serveur principal du projet, appelle l'interface auth.code2Session et échange l'identifiant unique de l'utilisateur OpenID et la clé de session. clé_session . Enregistrez ensuite OpenID dans la base de données du projet pour générer un user_id unique pour ce système, qui est utilisé pour la vérification commerciale dans ce projet.
La page d'accueil est principalement destinée à l'affichage des produits, avec un carrousel présentant les produits recommandés, une grille de neuf carrés de catégories de produits populaires et un affichage des produits populaires par catégorie.
La page de tous les produits intègre tous les affichages de produits, les requêtes de classification de produits et l'affichage des résultats de recherche de produits en fonction de mots-clés.
La page de détails du produit affiche principalement les informations détaillées d'un certain produit, où les utilisateurs peuvent ajouter leurs produits préférés au panier ou à la liste des favoris.
Le panier utilise omix pour la gestion globale du statut, qui permet des fonctions telles que l'ajout, la suppression, l'augmentation du nombre d'articles dans le panier, la sélection des articles à régler et la sélection de tous les articles dans le panier à régler.
Une fois que l'utilisateur a sélectionné le produit à acheter dans le panier et cliqué sur le bouton « Passer à la caisse », il arrive sur cette page. Ici, l'utilisateur sélectionne l'adresse de livraison, confirme les informations pertinentes sur la commande, puis confirme l'achat.
Les utilisateurs peuvent ajouter leurs produits préférés à la liste des favoris en cliquant sur le bouton Ajouter J'aime sur la page de détails du produit.
Afficher toutes les commandes passées par l'utilisateur.
请clone项目到本地
git clone https://github.com/hai-27/store-miniprogram.git
导入项目到微信开发者工具即可
Auteur hai-27
31 mars 2020
