store miniprogram

Xiaomi (vue-store WeChat applet version)

Preface

Some time ago, I made a PC-side mall website vue-store imitating Xiaomi Mall. I recently read the documentation of the WeChat mini program, so I started to make a WeChat mini program version.

illustrate

This project reuses the backend of vue-store, and adds the login API of the WeChat applet based on the original store-server.

I use my spare time in online classes to learn and do it at the same time. It’s a bit rough. If you have any questions or good suggestions, please feel free to submit Issues.

Since it is made with a test account, there is no online preview version.

PC web version: vue-store.

Backend: store-server .

If you think this project is good, you can click Star in the upper right corner to support it. Thank you! ^_^

Project introduction

In order to distinguish the official mini program of Xiaomi Mall, I named this project Xiaomi. This project has nothing to do with Xiaomi official website. It is purely a personal project. If you need to purchase Xiaomi products, please go to Xiaomi official store.

The project contains 4 tabBars: home page, discovery page (i.e. product display page), shopping cart, and mine. There are also product details page, my collection, order settlement page, and my order.

It realizes product display, product classification query, keyword search product, product detailed information display, user shopping cart, order settlement, user order, and user collection list.

The project as a whole refers to the vue-store implementation and basically implements all its functions. It can be said to be its WeChat applet version.

The backend reuses the backend of vue-store, and adds the login API of the WeChat applet based on the original store-server.

technology stack

• Front-end: native WeChat applet

• Backend: Node.js , Koa框架

• Database: Mysql

Function module

Log in

When the applet is started, it calls wx.login to obtain the login credentials ( code ), then sends the code back to the project's back-end server, calls the auth.code2Session interface, and exchanges the user's unique identifier OpenID and session key session_key . Then register OpenID into the project database to generate a unique user_id for this system, which is used for business verification in this project.

front page

The homepage is mainly for the display of products, with a carousel showing recommended products, a nine-square grid of popular product categories, and a display of popular products by category.

Discover (i.e. all products)

The all product page integrates all product display, product classification query, and display of product search results based on keywords.

Product details page

The product details page mainly displays the detailed information of a certain product, where users can add their favorite products to the shopping cart or favorites list.

My shopping cart

The shopping cart uses omix for global status management, which enables functions such as adding, deleting, increasing the number of items in the shopping cart, selecting items for settlement, and selecting all items in the shopping cart for settlement.

Order settlement

After the user selects the product to be purchased in the shopping cart and clicks the "Go to Checkout" button, he will come to this page. Here the user selects the delivery address, confirms the relevant information about the order, and then confirms the purchase.

my collection

Users can add their favorite products to the favorites list by clicking the Add Like button on the product details page.

my order

Display all orders placed by the user.

mine

Run the project

请clone项目到本地
git clone https://github.com/hai-27/store-miniprogram.git
导入项目到微信开发者工具即可

Author hai-27

March 31, 2020