store miniprogram

Xiaomi (версия апплета WeChat vue-store)

Предисловие

Некоторое время назад я создал vue-store для торгового центра на ПК, имитирующий Xiaomi Mall. Недавно я прочитал документацию мини-программы WeChat и начал создавать мини-версию программы WeChat.

иллюстрировать

Этот проект повторно использует серверную часть vue-store и добавляет API входа в апплет WeChat на основе исходного сервера магазина.

Я использую свое свободное время на онлайн-классах, чтобы учиться и делать это одновременно. Это немного сложно. Если у вас есть какие-либо вопросы или хорошие предложения, не стесняйтесь сообщать о проблемах.

Поскольку оно создано с использованием тестовой учетной записи, предварительной онлайн-версии не существует.

Веб-версия для ПК: vue-store.

Бэкэнд: магазин-сервер.

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

Введение в проект

Чтобы отличить официальную мини-программу Xiaomi Mall, я назвал этот проект Xiaomi. Этот проект не имеет ничего общего с официальным сайтом Xiaomi. Это чисто личный проект. Если вам нужно купить продукцию Xiaomi, зайдите в официальный магазин Xiaomi.

Проект содержит 4 панели вкладок: домашнюю страницу, страницу обнаружения (т. е. страницу отображения продукта), корзину покупок и мою. Также есть страница сведений о продукте, моя коллекция, страница оплаты заказа и мой заказ.

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

Проект в целом относится к реализации vue-store и по сути реализует все его функции. Можно сказать, что это его версия апплета WeChat.

Бэкэнд повторно использует бэкэнд vue-store и добавляет API входа в апплет WeChat на основе исходного сервера-магазина.

стек технологий

• Интерфейс: встроенный апплет WeChat.

• Бэкенд: Node.js , Koa框架

• База данных: Mysql

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

Авторизоваться

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

первая страница

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

Откройте для себя (т. е. все продукты)

Страница всех продуктов объединяет отображение всех продуктов, запрос классификации продуктов и отображение результатов поиска продуктов на основе ключевых слов.

Страница сведений о продукте

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

Моя корзина

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

Заказать расчет

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

моя коллекция

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

мой заказ

Отображение всех заказов, размещенных пользователем.

мой

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

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

Автор hai-27

31 марта 2020 г.