store miniprogram
1.0.0
Vor einiger Zeit habe ich eine Vue-Store-Website für ein Einkaufszentrum erstellt, die Xiaomi Mall nachahmt. Ich habe kürzlich die Dokumentation des WeChat-Miniprogramms gelesen und damit begonnen, eine WeChat-Miniprogrammversion zu erstellen.
Dieses Projekt verwendet das Backend von vue-store wieder und fügt die Anmelde-API des WeChat-Applets basierend auf dem ursprünglichen Store-Server hinzu.
Ich nutze meine Freizeit in Online-Kursen, um zu lernen und es gleichzeitig zu tun. Wenn Sie Fragen oder gute Vorschläge haben, können Sie gerne Probleme einreichen.
Da es mit einem Testkonto erstellt wurde, gibt es keine Online-Vorschauversion.
PC-Webversion: vue-store.
Backend: Store-Server .
Wenn Sie denken, dass dieses Projekt gut ist, können Sie oben rechts auf
Starklicken, um es zu unterstützen. ^_^
Um das offizielle Miniprogramm der Xiaomi Mall hervorzuheben, habe ich dieses Projekt Xiaomi genannt. Dieses Projekt hat nichts mit der offiziellen Xiaomi-Website zu tun. Es ist ein rein persönliches Projekt. Wenn Sie Xiaomi-Produkte kaufen möchten, gehen Sie bitte zum offiziellen Xiaomi-Shop.
Das Projekt enthält 4 TabBars: Startseite, Entdeckungsseite (d. h. Produktanzeigeseite), Warenkorb und Mine. Es gibt auch die Produktdetailseite, meine Sammlung, die Bestellabwicklungsseite und meine Bestellung.
Es realisiert Produktanzeige, Produktklassifizierungsabfrage, Stichwortsuchprodukt, Anzeige detaillierter Produktinformationen, Benutzer-Warenkorb, Auftragsabrechnung, Benutzerbestellung und Benutzersammlungsliste.
Das Projekt als Ganzes bezieht sich auf die Vue-Store-Implementierung und implementiert im Wesentlichen alle seine Funktionen. Man kann sagen, dass es sich um die WeChat-Applet-Version handelt.
Das Backend verwendet das Backend von Vue-Store wieder und fügt die Anmelde-API des WeChat-Applets basierend auf dem ursprünglichen Store-Server hinzu.
Frontend: natives WeChat-Applet
Backend: Node.js , Koa框架
Datenbank: Mysql
Wenn das Applet gestartet wird, ruft es wx.login auf, um die Anmeldeinformationen ( code ) zu erhalten, sendet dann den Code zurück an den Back-End-Server des Projekts, ruft die Schnittstelle auth.code2Session auf und tauscht die eindeutige OpenID und den Sitzungsschlüssel des Benutzers aus session_key . Registrieren Sie dann OpenID in der Projektdatenbank, um eine eindeutige Benutzer-ID für dieses System zu generieren, die zur Geschäftsüberprüfung in diesem Projekt verwendet wird.
Die Homepage dient hauptsächlich der Anzeige von Produkten, mit einem Karussell mit empfohlenen Produkten, einem Neun-Quadrat-Raster mit beliebten Produktkategorien und einer Anzeige beliebter Produkte nach Kategorien.
Die Gesamtproduktseite integriert die gesamte Produktanzeige, Produktklassifizierungsabfrage und Produktsuchergebnisanzeige basierend auf Schlüsselwörtern.
Auf der Produktdetailseite werden hauptsächlich detaillierte Informationen zu einem bestimmten Produkt angezeigt, auf der Benutzer ihre Lieblingsprodukte in den Warenkorb oder in die Favoritenliste legen können.
Der Warenkorb verwendet Omix für die globale Statusverwaltung, was Funktionen wie Hinzufügen, Löschen, Erhöhen der Anzahl von Artikeln im Warenkorb, Auswählen von Artikeln zur Abrechnung und Auswählen aller Artikel im Warenkorb zur Abrechnung ermöglicht.
Nachdem der Nutzer im Warenkorb das zu kaufende Produkt ausgewählt und auf den Button „Zur Kasse gehen“ geklickt hat, gelangt er auf diese Seite. Hier wählt der Nutzer die Lieferadresse aus, bestätigt die relevanten Informationen zur Bestellung und bestätigt anschließend den Kauf.
Benutzer können ihre Lieblingsprodukte zur Favoritenliste hinzufügen, indem sie auf der Produktdetailseite auf die Schaltfläche „Gefällt mir hinzufügen“ klicken.
Alle vom Benutzer aufgegebenen Bestellungen anzeigen.
请clone项目到本地
git clone https://github.com/hai-27/store-miniprogram.git
导入项目到微信开发者工具即可
Autor hai-27
31. März 2020
