Загрузка WeApp Workflow - Загрузка исходного кода WeApp Workflow

WeApp Workflow

AI Исходный код

1.0.0

Скачать

WeApp-Workflow: рабочий процесс внешней разработки апплета WeChat на основе Gulp.

представлять

WeApp-Workflow — это рабочий процесс внешней разработки, специально созданный для разработки мини-программ WeChat. Он разработан на основе Gulp 4 и направлен на решение проблем написания внешнего кода в процессе разработки мини-программ WeChat с помощью рабочего процесса. .

Домашняя страница проекта: https://github.com/Jeff2Ma/WeApp-Workflow.

Введение в статью: https://devework.com/weapp-workflow.html.

Функция

Компиляция SCSS в реальном времени в WXSS

Используйте препроцессор Sass, чтобы упростить написание CSS. Файл .scss будет в реальном времени скомпилирован в файл .wxss , поддерживаемый апплетом WeChat.

Преобразование единиц пикселей в rpx в мини-программе WXSS (CSS)

Используя официально рекомендованный iPhone 6 в качестве стандартного формата дизайна, вы можете автоматически конвертировать его в rpx , написав px непосредственно во время разработки.

// Input: src/pages/index/index.scss
. index__header {
	font-size : 14 px ;
	margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}

// Output: dist/pages/index/index.wxss
. index__header {
	font-size : 28 rpx ;
	margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}

Сжатие изображения

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

Автоматически загружать изображения в CDN и обновлять путь до абсолютного пути https.

Апплет не поддерживает ссылки на изображения с относительными путями, а только абсолютные пути с заголовками протокола https . Этот рабочий процесс позволяет загружать изображения относительного пути, указанные в файлах WXML и WXSS, в облачное хранилище CDN или загружать их на личный сервер через протокол FTP/SFTP. В настоящее время поддерживает Tencent Cloud и Qiniu Cloud.

// Input: src/pages/index/index.wxml
< image src =" %ASSETS_IMG%/t.png " > </ image >

// Output: dist/pages/index/index.wxml
< image src =" https://cdn.devework.com/weapp/devework/t.png " > </ image >

Файлы шрифтов, преобразованные в кодировку Base64.

Апплет не поддерживает файлы шрифтов с относительными путями. Этот рабочий процесс может перекодировать файлы шрифтов, указанные в CSS, в base64 и заменить исходные пути.

 // Input: src/pages/index/index.scss
@font-face {
  font-family: 'fontello';
  src: url("assets/fonts/fontello.ttf") format('truetype');
}

// Output: dist/pages/index/index.wxss
@font-face {
  font-family: 'fontello';
  src: url(data:application/font-sfnt;charset=utf-8;base64,AAEAAAAPAIAA....FsASNsQIARAAA) format("truetype");
}

Полностью автоматически создавайте изображения спрайтов и генерируйте соответствующий CSS.

Эта функция поддерживается плагином postcss-lazysprite. После подготовки изображения во время разработки просто напишите код типа @lazysprite "xxxx" чтобы автоматически построить изображение спрайта и сгенерировать соответствующий CSS.

// Input: src/app.scss
@lazysprite "filetype" ;

/ / Output : d is t / app. wxss
. icon-filetype-doc {
    background-image : url(.. / sprites/filetype.png);
    background-position : 0 0 ;
    width : 80 px ;
    height : 80 px ;
}

. icon-filetype-pdf {
    background-image : url(.. / sprites/filetype.png);
    background-position : -90 px 0 ;
    width : 80 px ;
    height : 80 px ;
}

@media only screen and ( -webkit-min-device-pixel-ratio : 2 ) , only screen and ( min-device-pixel-ratio : 2 ) {
    . icon-filetype-doc {
        background-image : url (.. / sprites / filetype@ 2 x.png);
        background-position : 0 0 ;
        background-size : 170 px 170 px ;
    }

    . icon-filetype-pdf {
        background-image : url (.. / sprites / filetype@ 2 x.png);
        background-position : -90 px 0 ;
        background-size : 170 px 170 px ;
    }
}

Основные моменты

Глоток4

Используйте новые функции последней версии Gulp 4, чтобы ускорить рабочий процесс.

Кратко, но не просто

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

Механизм инкрементного обновления, работает быстрее

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

Структура проекта

 .
├── config.custom.js // gulp自定义配置，会覆盖config.js
├── config.js // gulp 配置文件
├── gulpfile.js
├── package.json
├── src // 开发目录
│   ├── app.js
│   ├── app.json
│   ├── app.scss
│   ├── assets // 开发相关的静态文件原始资源
│   │   ├── fonts //字体文件
│   │   ├── images // 图片文件，可被上传到CDN
│   │   ├── scss // 一般放置SCSS 的minxins 等被import 的SCSS 文件
│   │   └── sprites // 生成雪碧图小图的目录
│   ├── image // 小程序专用的图片资源（如tabbar icon）目录
│   ├── pages
│   └── utils
├── tmp //  通过src 目录编译后生成的缓存目录
└── dist // 通过src 目录编译后生成的文件目录，也是小程序开发的项目目录

Начать

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

Установить

0. Пожалуйста, сначала следуйте Gulp-cli глобально.

 npm install gulp-cli -g

1. Загрузите файл проекта через git clone .

 git clone https://github.com/Jeff2Ma/WeApp-Workflow

2. Рекомендуется удалить каталог .git (пользователям Windows удалите его вручную).

 cd WeApp-Workflow
rm -rf .git

3. Установите необходимые модули.

 npm i

4. Начать разработку

Рекомендуется скопировать config.js и переименовать его в config.custom.js , а затем переписать соответствующую информацию о конфигурации в соответствии с вашими фактическими потребностями (каждый элемент конфигурации имеет комментарий). Затем выполните следующую команду в терминале, чтобы включить его:

 gulp

итерм

Оставшиеся задачи: gulp clean : очистить папки dist , tmp .

Конфигурация

После выполнения вышеуказанных операций вам необходимо выполнить соответствующие настройки в «Инструментах веб-разработчика WeChat» (основан на версии 1.x и больше не совместим с версией 0.x).

1. Создайте новый проект и непосредственно выберите весь каталог проекта, то есть каталог, в котором находится project.config.json , в качестве каталога проекта.

Конфигурация WeApp-Workflow

развивать

Далее можно войти в обычную разработку. В процессе разработки используйте сторонний редактор (WebStorm, Sublime Text и т. д.) для редактирования файлов в каталоге src . После сохранения изменений процесс gulp скомпилирует их в реальном времени в соответствующее место dist каталог. Инструмент веб-разработчика WeChat автоматически компилируется и обновляется и в настоящее время служит только функцией предварительного просмотра .

Ключевые моменты разработки:

Разработка SCSS : отредактируйте page-name.scss непосредственно в src/pages/page-name , он будет автоматически преобразован в page-name.wxss и помещен в соответствующее место каталога dist . В процессе разработки, где используются числовые значения, напрямую записывайте единицы px (в соответствии с iPhone6 в качестве стандартного проекта проекта), и они будут автоматически рассчитаны и преобразованы в единицы rpx . Если вы не хотите конвертировать при особых обстоятельствах, напишите PX заглавными буквами.
Разработка WXML : особых требований нет, за исключением того, что функция изображения CDN требует написания специального пути к изображению.
WebFont : сначала создайте изображение спрайта на веб-сайте, таком как Fontell.com, а затем загрузите файл формата TTF в src/assets/fonts . Затем его можно автоматически перекодировать в Base64, заключив его в кавычки обычным способом.
Изображения CDN : (Эта функция по умолчанию отключена, и ее необходимо включить в настройках.) wxss или wxml в апплете WeChat не поддерживают изображения с относительными путями и требуют абсолютного пути, начинающегося с https. Этот рабочий процесс позволяет вам писать относительные пути непосредственно во время разработки, а рабочий процесс поможет загрузить в CDN и заменить исходный путь. Такие изображения необходимо поместить в src/assets/images , а затем прописать путь в wxml или CSS, используя %ASSETS_IMG%/filename.png . %ASSETS_IMG% — это настраиваемый каталог для последующей замены строк.
Изображения спрайтов : Прежде всего, не рекомендуется использовать изображения спрайтов в небольших программах. Лучше использовать отдельные изображения или напрямую WebFont. Если вам необходимо его использовать, следуйте примеру небольшой программы в коде, чтобы поместить каталог маленьких изображений в src/assets/sprites , а затем вызовите его через @lazysprite "xxxx" в SCSS (рекомендуется поместить вызывающий код в app.scss ). Для расширенного использования изображений спрайтов нажмите здесь.

Вопросы и ответы

Вопрос: Почему в рабочем процессе нет функции AutoPrefixer?
О: Потому что опция «Завершение стиля» в «Проекте» инструментов разработчика WeChat уже предоставляет эту функцию;
Вопрос: Почему в рабочем процессе Babel не настроена функция преобразования ES6 в ES5?
О: Как указано выше, предоставляются инструменты разработчика WeChat.
Вопрос: Каковы преимущества по сравнению с небольшими средами разработки программ, такими как WePY?
Ответ: WePY, разработанный платежной командой WeChat, действительно является хорошим инструментом. По сравнению с WePY того же уровня, WeApp-Workflow не имеет никаких преимуществ. WeApp-Workflow — это инструмент рабочего процесса, а не среда разработки. Он ориентирован на разработку CSS в небольших программах. Для некоторых разработчиков их небольшим программам не нужна такая тяжелая среда разработки, как WePY.
Вопрос: В WeApp-Workflow нет соответствующих специальных задач компиляции (аналогично gulp build , npm run build )?
О: Да, потому что WeApp-Workflow подходит для разработки «маленьких» небольших программ, а не сложных небольших программ. Поэтому, учитывая скорость разработки, объем кода и т. д., здесь нет специального этапа разработки и одной задачи (разработка). На этапе завершения добавляется дополнительная задача компиляции (сборка). Всего одна задача.