小小米 (Vue Store, версия для WeChat)

Предисловие

Недавно я создал веб-сайт интернет-магазина Vue Store для ПК на основе имитации сайта Mi Store. Изучив документацию по WeChat Mini Programs, я решил создать версию для этой платформы.

Описание

• Этот проект использует бэкенд Vue Store и основан на существующем коде store-server. Я добавил API для входа через WeChat Mini Program.

• Проект был создан в свободное время во время онлайн-занятий, поэтому он может быть немного сырым. Если у вас есть вопросы или предложения, пожалуйста, создайте Issue.

• Поскольку это тестовая версия, она не имеет онлайн-превью.

• Веб-версия для ПК: Vue Store.

• Бэкенд: store-server.

• Если вам нравится этот проект, вы можете поддержать его, нажав «Star» в правом верхнем углу. Спасибо! ^_^

Обзор проекта

Чтобы отличить этот проект от официальной программы Mi Store, я назвал его Xiaoximi. Этот проект не связан с Mi Store и является моей личной разработкой. Если вы хотите приобрести продукты Mi, посетите официальный магазин Mi.

Проект включает в себя четыре вкладки: Home, Discover (для товаров), Shopping Cart и Me. Также есть страницы с подробной информацией о товарах, список моих коллекций, оформление заказа и мой заказ.

В проекте реализованы функции демонстрации товаров, поиска товаров по категориям и ключевым словам, отображения подробной информации о товарах, управления корзиной покупок, оформления заказов, списка моих коллекций.

Этот проект в целом следует примеру Vue Store и реализует все его функции. Это можно считать версией WeChat Mini Program для Vue Store.

Бэкенд использует код Vue Store и добавляет API для входа в систему через WeChat Mini Program на основе существующего кода store-server.

Технические средства

— Frontend: Native WeChat Mini Program

— Backend: Node.js, Koa framework

— Database: MySQL

Функциональные модули

Вход

При запуске программы WeChat Mini вызывает функцию wx.login для получения кода авторизации (code). Затем этот код передаётся на сервер проекта, где вызывается функция auth.code2Session для обмена на уникальный идентификатор пользователя OpenID и ключ сеанса session_key. Затем OpenID регистрируется в базе данных проекта для создания уникального идентификатора пользователя user_id, который используется для аутентификации в системе.

Главная страница

Главная страница в основном демонстрирует товары. Здесь есть карусель с рекомендуемыми товарами и популярные товары, представленные в виде сетки 9x9.

Поиск (все товары)

Страница поиска объединяет демонстрацию всех товаров, поиск товаров по категориям и поиск по ключевым словам.

Страница с подробной информацией о товаре

На странице с подробной информацией о товаре представлена подробная информация об определённом товаре. Пользователи могут добавить понравившиеся товары в корзину или список коллекций здесь.

Моя корзина

Для глобального управления состоянием корзины покупок используется omix. Реализованы функции добавления товаров в корзину, удаления товаров из корзины, увеличения количества товаров, выбора товаров для оплаты и полной оплаты товаров в корзине.

Оформление заказа

После того как пользователь выбрал товары для покупки в корзине, он может перейти на эту страницу, чтобы выбрать адрес доставки, подтвердить информацию о заказе и завершить покупку.

Мои коллекции

Пользователи могут добавлять понравившиеся товары в список коллекций на странице с подробной информацией о товаре, нажимая кнопку «Нравится».

Мой заказ

Здесь отображаются все заказы пользователя.

Моё

Информация о пользователе.

Запуск проекта

1. Клонируйте проект на свой компьютер: git clone https://github.com/hai-27/store-miniprogram.git.

2. Импортируйте проект в инструмент разработчика WeChat.

Автор: hai-27

31 марта 2020 года