OSCHINA-MIRROR/easytuan-taro-msparis

Передняя часть

Taro — это набор решений для многоплатформенной разработки, который следует синтаксису React. В настоящее время существует множество форм фронтенда: Web, React-Native, мини-программы WeChat и другие. Когда бизнесу требуется присутствие на разных платформах, разработка отдельных приложений становится слишком затратной.

Используя Taro, можно написать один код и с помощью инструментов компиляции Taro получить приложения, которые будут работать на различных платформах: мини-программах WeChat/Baidu/Alipay/Tencent, H5, React Native и других.

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

Если у вас проблемы с сетью, перейдите по ссылке на ускоренные узлы внутри страны.

Демонстрация эффекта

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

H5 и мини-программа WeChat

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

React + Taro + Dva + Sass + ES6/ES7

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

git clone git@github.com:EasyTuan/taro-msparis.git
# 国内镜像加速节点:git@gitee.com:easytuan/taro-msparis.git
cd taro-msparis
# 全局安装taro脚手架
npm install -g @tarojs/cli@1.2.2
# 项目依赖为1.2.2版本，如要升级，请同时升级项目依赖
# 如用1.2.2版本，请忽略这句
taro update project
# 安装项目依践
npm install
# 微信小程序
npm run dev:weapp
# 支付宝小程序
npm run dev:alipay
# 百度小程序
npm run dev:swan
# 字节跳动小程序
npm run dev:tt
# H5
npm run dev:h5
# React Native
npm run dev:rn
# pages模版快速生成
npm run tep `文件名`

Перерыв

Описание проекта

Разветвление git:

init: структура фреймворка, без какой-либо бизнес-логики master: стабильная версия проекта feature: ветка разработки проекта

Адаптация

H5 — идеальная адаптация
Мини-программа WeChat — идеальная адаптация
Мини-программа Alipay — 95% адаптации
Мини-программа Baidu — 95% адаптации
Мини-программа Tencent — адаптация в процессе
React Native — адаптация в процессе
Быстрая программа — адаптация в процессе

Целевые функции

Список одежды — завершено
Детали одежды — завершено
Регистрация и вход — завершено
Личный кабинет — завершено
Купоны — завершено
Сумка (корзина) — завершено
Адрес доставки — завершено
Центр участников — разработка в процессе

Бизнес-введение

Структура каталогов:

├── .temp                  // H5 компиляция результатов каталога
├── .rn_temp               // RN компиляция результатов каталога
├── dist                   // компиляция мини-программных результатов каталога
├── config                 // каталог конфигурации Taro
│   ├── dev.js                 // конфигурация разработки
│   ├── index.js               // конфигурация по умолчанию
│   └── prod.js                // конфигурация упаковки
├── screenshots            // снимки проекта, не связанные с разработкой
├── site                   // статические файлы H5 (упакованные файлы)
├── src                    // исходный каталог
│   ├── components             // компоненты
│   ├── config                 // конфигурация проекта
│   ├── images                 // файлы изображений
│   ├── models                 // модели redux
│   ├── pages                  // каталог файлов страниц
│   │   └── home
│   │       ├── index.js           // логика страницы
│   │       ├── index.scss         // стиль страницы
│   │       ├── model.js           // модели страниц
│   │       └── service.js        // API страниц
│   ├── styles             // файлы стилей
│   ├── utils              // часто используемые классы инструментов
│   ├── app.js             // файл входа
│   └── index.html
├── package.json
└── template.js            // скрипт шаблона страниц, выполните команду npm run tep `имя файла`

Некоторые скриншоты:

Главная страница и детали товара*

Сумка и моя

Вход и купоны

Примечание

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

Или вы можете «follow» меня, я буду продолжать открывать больше интересных проектов

Если у вас есть какие-либо вопросы, пожалуйста, напрямую создайте Issues или если вы обнаружите проблему и у вас есть очень хорошее решение, добро пожаловать в PR 👍

Документация

Документация по разработке Taro

https://nervjs.github.io/taro/docs/README.html

Документация dva по разработке

https://dvajs.com/

Официальный документ мини-программы WeChat

https://mp.weixin.qq.com/debug/wxadoc/dev/

Официальная документация мини-программы Baidu

https://smartprogram.baidu.com/docs/introduction/register/index.html

Официальные документы мини-программы Alipay

https://docs.alipay.com/mini/developer/getting-started

Официальные документы мини-программы Tencent