tdesign miniprogram starter retail

Образец апплета шаблона розничной торговли TDesign

Образец апплета шаблона розничной торговли TDesign создан с использованием апплета системы проектирования корпоративного уровня TDesign и опирается на библиотеку компонентов апплета TDesign WeChat для удовлетворения всех основных требований сценария розничной торговли.

Предварительный просмотр

Используйте WeChat для сканирования следующего QR-кода:

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

1. Знакомство с бизнесом

Апплет шаблона розничной торговли — это классический апплет электронной коммерции для одного магазина, охватывающий процесс «золотой ссылки» электронной коммерции: продукты -> корзина покупок -> расчет -> заказы и т. д. Мини-программа содержит в общей сложности 28 полных страниц, охватывающих основные страницы, такие как домашняя страница, страница с описанием продукта, личный центр и процесс послепродажного обслуживания. Используя макетные данные для отображения, он обеспечивает полную демонстрацию розничной продукции, транзакцию и процесс послепродажного обслуживания. Детали страницы:

Скриншоты основных страниц следующие:

2. Состав проекта

Апплет шаблона розничной торговли построен с использованием базового JavaScript + WXSS + ESLint, что снижает порог использования.

Структура каталогов проекта следующая:

 |-- tdesign-miniprogram-starter
    |-- README.md
    |-- app.js
    |-- app.json
    |-- app.wxss
    |-- components	//	公共组件库
    |-- config	//	基础配置
    |-- custom-tab-bar	//	自定义 tabbar
    |-- model	//	mock 数据
    |-- pages
    |   |-- cart	//	购物车相关页面
    |   |-- coupon	//	优惠券相关页面
    |   |-- goods	//	商品相关页面
    |   |-- home	//	首页
    |   |-- order	//	订单售后相关页面
    |   |-- promotion-detail	//	营销活动页面
    |   |-- usercenter	//	个人中心及收货地址相关页面
    |-- services	//	请求接口
    |-- style	//	公共样式与iconfont
    |-- utils	//	工具库

3. Моделирование данных

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

4. Добавить новую страницу

1. Создайте соответствующую папку страницы в каталоге pages
2. Добавьте путь к странице в массив "pages" в файле app.json .
3. [Необязательно] Добавьте конфигурацию страницы в "miniprogram-list" в файле project.config.json

? Построить и запустить

1. npm install
2. Внедрение проектов в инструменты разработки небольших программ
3. Сборка npm

? Управление стилем кода

eslint prettier

Базовая версия библиотеки

Минимальная версия базовой библиотеки ^2.6.5

обратная связь

Группа Enterprise WeChat Команда TDesign оперативно опубликует версии и информацию об устранении проблем в корпоративной группе WeChat, а также пройдут обсуждения по созданию библиотек компонентов. Добро пожаловать, чтобы отсканировать QR-код в WeChat или Enterprise WeChat, чтобы присоединиться к группе для общения. :

Электронная почта: [email protected]

?Разработать другие реализации стека технологий?

• Реализация мобильной мини-программы: мобильная минипрограмма
• Реализация Desktop Vue 2: web-vue
• Реализация Desktop Vue 3: web-vue-next
• Реализация Desktop React: веб-реакция

? Соглашение об открытом исходном коде

TDesign соответствует лицензии MIT.