Шаблон быстрого приложения

🔨 Стремимся создать более элегантный шаблон для разработки быстрых приложений.

Шаблон быстрого приложения

Цели и философия

Быстрое приложение — это новый тип приложения, основанный на мобильной аппаратной платформе. Стандарт был разработан совместными усилиями основных производителей мобильных телефонов в рамках альянса быстрых приложений. Его цель — создание стандартной платформы для разработчиков, которая будет способствовать развитию интерфейсов разработки, возможностей подключения, услуг для разработчиков и других аспектов. Платформа будет основана на модели экосистемы, ориентированной на индивидуальных разработчиков и корпоративных разработчиков. Быстрые приложения предлагают полный опыт работы с традиционными приложениями, но без необходимости установки и с мгновенным доступом. Они охватывают 1 миллиард устройств и глубоко интегрированы с операционными системами, исследуя новые сценарии использования приложений. Быстрое приложение — это простой ответ на сложные жизненные ситуации, который делает жизнь более гладкой.

Быстрые приложения представляют собой новый тип приложений, разработанный совместно девятью ведущими производителями мобильных телефонов на основе аппаратной платформы. Они обеспечивают мгновенный доступ к приложениям, что упрощает их распространение и удержание, а также предоставляет пользователям более эффективные услуги. В обозримом будущем они будут иметь хорошие сценарии применения и перспективы развития. Этот репозиторий quickapp-boilerplate-template предназначен для изучения того, как создавать более элегантные быстрые приложения, предоставляя разработчикам быстрых приложений удобство и справочную информацию, максимально повышая эффективность разработки, оптимизируя процесс разработки и позволяя создавать более качественные быстрые приложения за более короткое время. Для получения более подробной информации о разработке быстрых приложений см. список ресурсов по обучению быстрым приложениям.

Структура организации

├── sign                # Хранит модуль подписи пакета rpk;
└── src
│   ├── assets          # Общие ресурсы (изображения/стили/шрифты...)
│   │   ├──images       # Хранит общие ресурсы изображений (png/jpg/svg)
│   │   ├──js           # Хранит общий код JavaScript
│   │   └──styles       # Хранит стили less/css/sass и другие
│   ├── helper          # Проектные вспомогательные инструменты
│   │   ├──apis         # Хранит связанные с запросами к бэкэнду (уже инкапсулированные)
│   │   ├──ajax.js      # Инкапсулирует систему fetch API в цепочку
│   │   └──utils        # Хранит проектные утилиты
│   ├── pages           # Единое хранилище кода страниц проекта
│   ├── app.ux          # Код приложения
│   └── manifest.json   # Конфигурация базовой информации быстрого приложения
└── package.json        # Определяет необходимые модули проекта и конфигурацию

Как использовать

git clone https://github.com/nicejade/quickapp-boilerplate-template.git
cd quickapp-boilerplate-template && yarn
yarn start # Рекомендуется ✅✅

# Или запустите следующую команду
yarn server & yarn watch

# Или в одном терминале Tab запустите:
yarn server
# В другом терминале Tab запустите:
yarn watch

# ✨ Добавьте страницу быстрого приложения
yarn gen YourPageName

Используйте Android-телефон, загрузите и установите отладчик быстрого приложения (https://www.quickapp.cn/docCenter/post/69), откройте его и отсканируйте QR-код, созданный командой выше, чтобы увидеть эффект. Для получения дополнительной информации см. раздел «Настройка среды быстрого приложения».

Преимущества улучшения

Необходимо упомянуть, что этот проект основан на философии, изложенной в статье «Эффективное решение для веб-разработки одностраничных приложений» (https://nice.lovejade.cn/zh/article/vue-webpack-boilerplate-template.html): разработка для эффективности. По сравнению с его встроенным простым демонстрационным примером, он имеет следующие преимущества:

• Оптимизация структуры проекта; как показано в организационной структуре выше, различные модули ресурсов более профессионально разделены, что облегчает написание, обслуживание и поиск, а также основано на общепринятых принципах разработки фронтенда, которые легче понять и освоить новичкам;

• Более элегантная обработка запросов данных; используется Promise для инкапсуляции системных встроенных запросов @system.fetch и выбрасывается глобально, что позволяет легко вызывать цепочку и обрабатывать возвращаемые данные, а также использовать finally. Подробности см. в разделе «Как элегантно обрабатывать запросы данных быстрого приложения»;

• Встроенная схема обработки стилей; быстрые приложения поддерживают предварительную компиляцию less и sass. Здесь используется схема less и некоторые встроенные переменные и часто используемые методы смешивания, что позволяет легко начать писать, повторно использовать и изменять стили;

• Инкапсуляция общих методов; в helper/utils... Путь, есть методы, которые используются для работы с датами, строками и системой, они упакованы отдельно и единообразно представлены в global.$utils. Это делает обслуживание более разумным и надёжным, а также позволяет удобно и эффективно разрабатывать; конечно, вы можете добавлять, удалять или расширять их по своему усмотрению;

• Браузер открывает главную страницу отладки с помощью QR-кода. Запустите yarn start, чтобы запустить HTTP-сервер отладки, и адрес будет отображаться в командной строке терминала. Используйте приложение QuickApp Debugger на мобильном устройстве, чтобы отсканировать QR-код и загрузить и запустить пакет rpk. Когда объём информации, накопленной в терминале, становится большим, сканирование может быть затруднено. Поэтому был добавлен QR-код для открытия главной страницы отладки в браузере. Если вы не хотите использовать эту функцию, установите autoOpenBrowser в файле command/server.js в значение false;

• Интеграция лёгкого статистического анализа. Лёгкий статистический анализ (NiceLizi) является официальной рекомендуемой схемой статистики, и этот фреймворк уже интегрирован. При использовании просто измените app_key в statistics.config.js на ключ, который вы получили при регистрации в NiceLizi;

• Добавление командного скрипта для создания новых страниц. Это позволяет создавать новые страницы одним щелчком мыши, просто запустив команду: yarn gen YourPageName (рекомендуется использовать имена, начинающиеся с заглавной буквы, и это создаст папку с файлом новой страницы в пути pages). Конечно, вы также можете настроить шаблон по своему усмотрению:/command/gen/template.ux;

• Интеграция Prettier и Eslint. В процессе проверки кода на наличие потенциальных проблем эти инструменты унифицируют стандарты кодирования команды и стиль (js, less, scss и т. д.), что способствует созданию высококачественного кода и повышению эффективности работы (особенно полезно для командной разработки);

• Написание плагина Prettier для QuickApp. Создание плагина Prettier для QuickApp позволяет ему хорошо работать с файлами .ux/.mix, что дополнительно улучшает стиль и стандарты кода;

• Новая команда для отслеживания файлов. Внедрение зависимости onchange позволяет отслеживать изменения файлов во время разработки. Запустив команду yarn prettier-watch, можно форматировать изменённые файлы .md .ux .js и другие с помощью Prettier, что значительно повышает эффективность написания кода;

Встроенные команды

Рекомендуется использовать IDE для QuickApp (https://doc.quickapp.cn/ide/new.html), дополнительную информацию можно найти в серии статей о разработке QuickApp (https://forum.lovejade.cn/t/quickapp). Если вы используете редакторы, такие как VsCode или SublimeText, для разработки QuickApp, следующие команды могут быть полезны:

Связанные ссылки

• NiceLinks
• About Me
• Личный блог
• Вспомогательный блог
• Sina Weibo
• Zhihu
• Jianshu
• SegmentFault
• Twitter
• Facebook

Номер WeChat	Группа WeChat для фронтенд-разработчиков	Рекомендуемое веб-приложение
😉 静晴轩	✨ 大前端联盟	🎉 NiceLinks

Лицензия

MIT

Copyright (c) 2018-present, nicejade