Скачать mini program tailwind - mini program tailwind скачать исходный код

mini program tailwind

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

1.5.6

Скачать

wechat-mp-плагин

Мини-программа Плагин Tailwind Webpack

Пусть ваша мини-программа использует оригинальный CSS Tailwind/Windi.

От Digital Creative, компании по исследованию, проектированию и разработке цифровых продуктов, расположенной в Шанхае.
Познакомьтесь с нами
Что мы делаем
О нас
Связаться с нами

Рекомендуется прочитать независимый документ для лучшего чтения. ♥️

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

Поскольку сам апплет не поддерживает некоторые специальные escape-символы (например, [ ! . и т. д.), содержащиеся в именах селекторов, генерируемых CSS Tailwind/Windi, это не позволяет вам использовать некоторые функции, которые следует использовать при разработке апплет Гибкий синтаксис и функция автоматического определения произвольных значений/значений, используемая в веб-приложениях, например w-[30px] translate-x-1/2 !bg-[#ff0000] и т. д. Это, несомненно, оказывает существенное влияние на эффективность нашего развития и умственную нагрузку.

Чтобы обойти это ограничение, мы разработали этот плагин, который поможет вам поддерживать единообразие процесса разработки веб-приложений при использовании Tailwind/Windi CSS для разработки небольших программ. Вам больше не нужно обращать внимание на то, какие строки не являются таковыми. Вместо того, чтобы решать проблему изменения метода написания, продолжайте писать стиль своей мини-программы в соответствии с официальным синтаксисом Tailwind/Windi CSS , а работа по совместимости, лежащая в основе этого, автоматически выполняется этим плагином.

Кроме того, в этот плагин встроена функция автоматического преобразования значений rpx . Эта функция может автоматически конвертировать значения единиц измерения rem и px которые мы написали в файле конфигурации CSS Tailwind/Windi и исходном коде, в значения единиц измерения rpx в окончательно сгенерированном файле стиля. Это позволяет разработчикам повторно использовать ту же конфигурацию темы, которая используется в веб-проектах, и позволяет небольшим программам продолжать использовать функции, предоставляемые адаптивным пикселем.

Узнайте больше о том, как работает этот плагин
Пусть ваша мини-программа использует оригинальный CSS Tailwind/Windi.

быстрый старт

Выберите один из типов мини-программ, который подходит вам для установки плагина.

Обычные апплеты Webpack (на примере MPX)

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

Поскольку среда MPX представляет собой типичную расширенную среду разработки мини-программ, использующую Webpack в качестве инструмента создания, в этой демонстрации установки используется проект MPX в качестве типичного случая, чтобы продемонстрировать, как устанавливать плагины для большинства проектов мини-программ, подобных Webpack. Следующие шаги установки широко применимы в проектах Webpack . Для большинства проектов мини-программ Webpack вам достаточно выполнить одни и те же шаги для установки.

Установите плагин Windicss-webpack-plugin.

npm i windicss-webpack-plugin -D

Более подробную информацию можно найти в официальной документации Windi CSS.
Интеграция Windi CSS Webpack

Установите @dcasia/mini-program-tailwind-webpack-plugin

npm i @dcasia/mini-program-tailwind-webpack-plugin -D

Обновить файл конфигурации веб-пакета

Использование плагина Webpack

 //webpack.base.conf.js
const WindiCSSWebpackPlugin = require ( "windicss-webpack-plugin" ) ;
const MiniProgramTailwindWebpackPlugin = require ( "@dcasia/mini-program-tailwind-webpack-plugin" )

module . exports = {
  plugins : [
    new WindiCSSWebpackPlugin ( ) ,
    new MiniProgramTailwindWebpackPlugin ( {
      // options
    } )
  ]
}

Создайте новый файл конфигурации Windi CSS.

Создайте новый файл конфигурации windi.config.js в корневом каталоге проекта.

 //windi.config.js
export default {
  preflight : false ,
  prefixer : false ,
  extract : {
    // 将 .mpx 文件纳入范围（其余 Webpack 类小程序根据项目本身的文件后缀酌情设置）
    include : [ 'src/**/*.{css,html,mpx}' ] ,
    // 忽略部分文件夹
    exclude : [ 'node_modules' , '.git' , 'dist' ]
  } ,
  corePlugins : {
    // 禁用掉在小程序环境中不可能用到的 plugins
    container : false
  }
}

Здесь также применяется файл конфигурации CSS Tailwind.
Более подробную информацию можно найти в официальной документации Windi CSS.
Правила совместимости профилей Windi CSS

Введение продуктов Windi CSS в файл ввода.

// app.mpx
< style src =" windi.css " > </ style >

Для других апплетов Webpack проектов, отличных от MPX, вы можете использовать аналогичный метод для добавления файла windi.css во входной файл, например:
 // main.js
import 'windi.css'
Более подробную информацию можно найти в официальной документации Windi CSS.
Представляем файлы стилей Windi CSS.

Заканчивать

Начните наслаждаться эффективным опытом разработки, предоставляемым Windi CSS, в мини-программных проектах?

Настраиваемые параметры

имя	тип	по умолчанию	описывать
включитьRpx	логическое значение	`true`	Включить ли автоматическое преобразование в единицу измерения rpx
дизайнШирина	Число	`350`	Значение ширины в пикселях черновика проекта. Этот размер повлияет на коэффициент расчета в процессе преобразования rpx.
утилитыSettings.spaceBetweenItems	`Array<string>`	`[]`	Имя дочернего компонента в контейнере, который использует утилиты Space Between. Четыре общих компонента: представление, кнопка, текст и изображение включены по умолчанию, поэтому в большинстве случаев разработчикам не требуется настраивать этот элемент. Если вам нужно добавить новые компоненты, вы можете добавить в массив имена новых компонентов.
утилитыSettings.divideItems	`Array<string>`	`[]`	Имя дочернего компонента в контейнере, который использует утилиту Divide width. Четыре общих компонента: представление, кнопка, текст и изображение включены по умолчанию, поэтому в большинстве случаев разработчикам не требуется настраивать этот элемент. Если вам нужно добавить новые компоненты, вы можете добавить в массив имена новых компонентов.

Случай

Кейс интеграции: проект MPX

?

Аплет Таро

Taro, мультитерминальное унифицированное решение для разработки

Этот плагин содержит плагин Taro, который можно легко адаптировать к апплету Taro посредством установки «в один клик».

Плагин Taro совместим со следующими интерфейсными платформами.
Реагировать
Вю 2
Вю 3
Предействовать
Он также совместим с использованием Tailwind/Windi CSS при разработке смешанных собственных компонентов.

Установите @dcasia/mini-program-tailwind-webpack-plugin

 npm i @dcasia/mini-program-tailwind-webpack-plugin -D

Использование плагина Таро

 // config/index.js
const config = {
  plugins : [
    [ '@dcasia/mini-program-tailwind-webpack-plugin/dist/taro' , {
      // ...options
    } ]
  ]
}

Создайте новый файл конфигурации Windi CSS.

Создайте новый файл конфигурации windi.config.js в корневом каталоге проекта.

 // windi.config.js
export default {
  prefixer : false ,
  extract : {
    // 忽略部分文件夹
    exclude : [ 'node_modules' , '.git' , 'dist' ]
  } ,
  corePlugins : {
    // 禁用掉在小程序环境中不可能用到的 plugins
    container : false
  }
}

Здесь также применяется файл конфигурации CSS Tailwind.
Более подробную информацию можно найти в официальной документации Windi CSS.
Правила совместимости профилей Windi CSS

Введение продуктов Windi CSS в файл ввода.

 // app.js
import 'windi.css' ;

Заканчивать

Начните наслаждаться эффективным опытом разработки, предоставляемым Windi CSS в Taro?

Настраиваемые параметры

имя	тип	по умолчанию	описывать
включитьWindiCSS	логическое значение	`true`	Включить ли Windi CSS, который поставляется с плагином
WindiCSSConfigFile	Нить	Прочтите файл конфигурации в корневом каталоге проекта.	При необходимости вручную укажите путь к файлу конфигурации Windi CSS.
включитьRpx	логическое значение	`false`	Включить ли автоматическое преобразование в значение единицы измерения rpx (поскольку в Taro есть эта функция, она отключена по умолчанию)
дизайнШирина	Число	`375`	Значение ширины в пикселях черновика проекта. Этот размер повлияет на коэффициент расчета в процессе преобразования rpx.
утилитыSettings.spaceBetweenItems	`Array<string>`	`[]`	Имя дочернего компонента в контейнере, который использует утилиты Space Between. Четыре общих компонента: представление, кнопка, текст и изображение включены по умолчанию, поэтому в большинстве случаев разработчикам не требуется настраивать этот элемент. Если вам нужно добавить новые компоненты, вы можете добавить в массив имена новых компонентов.
утилитыSettings.divideItems	`Array<string>`	`[]`	Имя дочернего компонента в контейнере, который использует утилиту Divide width. Четыре общих компонента: представление, кнопка, текст и изображение включены по умолчанию, поэтому в большинстве случаев разработчикам не требуется настраивать этот элемент. Если вам нужно добавить новые компоненты, вы можете добавить в массив имена новых компонентов.
утилитыSettings.customComponents	`Array<string>`	`[]`	Разработчикам, которые используют Uno CSS в качестве движка Atomic CSS, необходимо настроить его в соответствии с ситуацией в проекте. По умолчанию включены все названия компонентов, которые идут в комплекте с мини-программами, поэтому в большинстве случаев разработчикам не нужно настраивать этот пункт. Если вам нужно добавить новые компоненты, вы можете добавить в массив имена новых компонентов.
включитьDebugLog	логическое значение	`false`	Включить ли печать внутреннего журнала работы этого плагина

Случай

Кейс интеграции: Taro — проект React
Кейс интеграции: Taro — проект Vue 2
Кейс интеграции: Taro — проект Vue 3

? апплет uni-приложения

апплет uni-приложения

uni-app, разрабатывайте один раз и охватывайте несколько терминалов.

Эта статья содержит две демонстрации установки Vue 3 и Vue 2 uni-app.

Демонстрация установки Vue 3

Пожалуйста, обратитесь к следующему типу мини-программы: обычная мини-программа Vite (на примере uni-app).

Демонстрация установки Vue 2

Установите плагин Windicss-webpack-plugin.

npm i windicss-webpack-plugin -D

Более подробную информацию можно найти в официальной документации Windi CSS.
Интеграция Windi CSS Webpack

Установите @dcasia/mini-program-tailwind-webpack-plugin

npm i @dcasia/mini-program-tailwind-webpack-plugin -D

Создайте новый файл конфигурации Vue.

Создайте новый файл конфигурации vue.config.js в корневом каталоге проекта и используйте плагин Webpack.

 // vue.config.js
const WindiCSSWebpackPlugin = require ( "windicss-webpack-plugin" ) ;
const MiniProgramTailwindWebpackPlugin = require ( "@dcasia/mini-program-tailwind-webpack-plugin" )

module . exports = {  
  configureWebpack : {  
    plugins : [  
      new WindiCSSWebpackPlugin ( ) ,
      new MiniProgramTailwindWebpackPlugin ( {
        // options
      } )
    ]  
  }  
}

Создайте новый файл конфигурации Windi CSS.

Создайте новый файл конфигурации windi.config.js в корневом каталоге проекта.

 //windi.config.js
export default {
  preflight : false ,
  prefixer : false ,
  extract : {
    // 忽略部分文件夹
    exclude : [ 'node_modules' , '.git' , 'dist' ]
  } ,
  corePlugins : {
    // 禁用掉在小程序环境中不可能用到的 plugins
    container : false
  }
}

Здесь также применяется файл конфигурации CSS Tailwind.
Более подробную информацию можно найти в официальной документации Windi CSS.
Правила совместимости профилей Windi CSS

Введение продуктов Windi CSS в файл ввода.

 // main.js
import 'windi.css'

Заканчивать

Начните наслаждаться эффективным опытом разработки, предоставляемым Windi CSS, в мини-программных проектах?

Настраиваемые параметры

имя	тип	по умолчанию	описывать
включитьRpx	логическое значение	`true`	Включить ли автоматическое преобразование в единицу измерения rpx
дизайнШирина	Число	`350`	Значение ширины в пикселях черновика проекта. Этот размер повлияет на коэффициент расчета в процессе преобразования rpx.
утилитыSettings.spaceBetweenItems	`Array<string>`	`[]`	Имя дочернего компонента в контейнере, который использует утилиты Space Between. Четыре общих компонента: представление, кнопка, текст и изображение включены по умолчанию, поэтому в большинстве случаев разработчикам не требуется настраивать этот элемент. Если вам нужно добавить новые компоненты, вы можете добавить в массив имена новых компонентов.
утилитыSettings.divideItems	`Array<string>`	`[]`	Имя дочернего компонента в контейнере, который использует утилиту Divide width. Четыре общих компонента: представление, кнопка, текст и изображение включены по умолчанию, поэтому в большинстве случаев разработчикам не требуется настраивать этот элемент. Если вам нужно добавить новые компоненты, вы можете добавить в массив имена новых компонентов.
утилитыSettings.customComponents	`Array<string>`	`[]`	Разработчикам, которые используют Uno CSS в качестве движка Atomic CSS, необходимо настроить его в соответствии с ситуацией в проекте. По умолчанию включены все названия компонентов, которые идут в комплекте с мини-программами, поэтому в большинстве случаев разработчикам не нужно настраивать этот пункт. Если вам нужно добавить новые компоненты, вы можете добавить в массив имена новых компонентов.

Случай

Кейс интеграции: проект uni-app Vue 2

? Обычные апплеты в стиле Vite (в качестве примера возьмем uni-app)

Обычные апплеты Vite (в качестве примера рассмотрим uni-app)

uni-app, разрабатывайте один раз и охватывайте несколько терминалов.

Поскольку проект построен на основе Vite при использовании Vue 3 для разработки мини-программ в uni-app, в этой демонстрации установки используется проект uni-app Vue 3 в качестве типичного случая, чтобы продемонстрировать, как подключить большинство проектов мини-программ, подобных Vite. . Установить. Следующие шаги установки широко применимы к проектам Vite . Для большинства проектов апплетов, подобных Vite, вам нужно выполнить только одни и те же шаги для установки.

Установите Vite-plugin-windicss и Windicss

npm i vite-plugin-windicss windicss -D

Более подробную информацию можно найти в официальной документации Windi CSS.
Интеграция Windi CSS с Vite

Установите @dcasia/mini-program-tailwind-webpack-plugin

npm i @dcasia/mini-program-tailwind-webpack-plugin -D

Обновить файл конфигурации Vite

Используйте плагины в файле конфигурации vite.config.js

 // vite.config.js
import WindiCSS from 'vite-plugin-windicss' ;
import MiniProgramTailwind from '@dcasia/mini-program-tailwind-webpack-plugin/rollup' ;

export default {
  plugins : [
    WindiCSS ( ) ,
    MiniProgramTailwind ( )
  ]
}

Создайте новый файл конфигурации Windi CSS.

Создайте новый файл конфигурации windi.config.js в корневом каталоге проекта.

 //windi.config.js
export default {
  preflight : false ,
  prefixer : false ,
  extract : {
    // 忽略部分文件夹
    exclude : [ 'node_modules' , '.git' , 'dist' ]
  } ,
  corePlugins : {
    // 禁用掉在小程序环境中不可能用到的 plugins
    container : false
  }
}

Здесь также применяется файл конфигурации CSS Tailwind.
Более подробную информацию можно найти в официальной документации Windi CSS.
Правила совместимости профилей Windi CSS

Введение продуктов Windi CSS в файл ввода.

 // main.js
import 'virtual:windi.css'

Заканчивать

Начните наслаждаться эффективным опытом разработки, предоставляемым Windi CSS, в мини-программных проектах?

Настраиваемые параметры

имя	тип	по умолчанию	описывать
включитьRpx	логическое значение	`true`	Включить ли автоматическое преобразование в единицу измерения rpx
дизайнШирина	Число	`350`	Значение ширины в пикселях черновика проекта. Этот размер повлияет на коэффициент расчета в процессе преобразования rpx.
утилитыSettings.spaceBetweenItems	`Array<string>`	`[]`	Имя дочернего компонента в контейнере, который использует утилиты Space Between. Четыре общих компонента: представление, кнопка, текст и изображение включены по умолчанию, поэтому в большинстве случаев разработчикам не требуется настраивать этот элемент. Если вам нужно добавить новые компоненты, вы можете добавить в массив имена новых компонентов.
утилитыSettings.divideItems	`Array<string>`	`[]`	Имя дочернего компонента в контейнере, который использует утилиту Divide width. Четыре общих компонента: представление, кнопка, текст и изображение включены по умолчанию, поэтому в большинстве случаев разработчикам не требуется настраивать этот элемент. Если вам нужно добавить новые компоненты, вы можете добавить в массив имена новых компонентов.
утилитыSettings.customComponents	`Array<string>`	`[]`	Разработчикам, которые используют Uno CSS в качестве движка Atomic CSS, необходимо настроить его в соответствии с ситуацией в проекте. По умолчанию включены все названия компонентов, которые идут в комплекте с мини-программами, поэтому в большинстве случаев разработчикам не нужно настраивать этот пункт. Если вам нужно добавить новые компоненты, вы можете добавить в массив имена новых компонентов.

Случай

Кейс интеграции: проект uni-app Vue 3

? Собственные или специально созданные апплеты?

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

Независимо от того, на каком пакете или инструменте рабочего процесса разработан ваш проект, если есть программируемая служба мониторинга и обработки файлов, вы можете настроить ее. Но здесь необходимо прояснить одну вещь: если мы хотим интегрировать функции этого плагина на основе собственного режима разработки, мы должны запустить набор программируемых служб мониторинга и обработки файлов в качестве основы для плагина. В работе Эта услуга обычно предоставляется настроенными сторонними инструментами, такими как Webpack и Gulp.

Разработчики, использующие интерфейс командной строки Tailwind/Windi CSS, прочтите
Если вы разрабатываете небольшой пользовательский интерфейс программы через официальный CLI Tailwind/Windi CSS, к сожалению, поскольку CLI не поддерживает механизм плагинов и не поддерживает модификацию файлов шаблонов, мы не можем настроить его на этой основе.

Мы отделили и упаковали основные функции этого плагина в файл universal-handler.js . Если вы хотите интегрировать основные функции этого плагина в собственный инструмент сборки, вы можете добавить universal-handler в рабочий процесс. логика:

 const { handleTemplate , handleStyle } = require ( '@dcasia/mini-program-tailwind-webpack-plugin/universal-handler' )

Шаблон процесса:

 const rawContent = '<view class="w-10 h-[0.5px] text-[#ffffff]"></view>'
const handledTemplate = handleTemplate ( rawContent )

Стиль обработки:

 const rawContent = '.h-\[0\.5px\] {height: 0.5px;}'
const handledStyle = handleStyle ( rawContent , options )

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

Узнайте больше о практических деталях индивидуальной реализации.
Мини-программа интегрирует пользовательскую реализацию Windi CSS.

Настраиваемые параметры

имя	тип	по умолчанию	описывать
включитьRpx	логическое значение	`false`	Включить ли автоматическое преобразование в единицу измерения rpx
дизайнШирина	Число	`350`	Значение ширины в пикселях черновика проекта. Этот размер повлияет на коэффициент расчета в процессе преобразования rpx.
утилитыSettings.spaceBetweenItems	`Array<string>`	`[]`	Имя дочернего компонента в контейнере, который использует утилиты Space Between. Четыре общих компонента: представление, кнопка, текст и изображение включены по умолчанию, поэтому в большинстве случаев разработчикам не требуется настраивать этот элемент. Если вам нужно добавить новые компоненты, вы можете добавить в массив имена новых компонентов.
утилитыSettings.divideItems	`Array<string>`	`[]`	Имя дочернего компонента в контейнере, который использует утилиту Divide width. Четыре общих компонента: представление, кнопка, текст и изображение включены по умолчанию, поэтому в большинстве случаев разработчикам не требуется настраивать этот элемент. Если вам нужно добавить новые компоненты, вы можете добавить в массив имена новых компонентов.
утилитыSettings.customComponents	`Array<string>`	`[]`	Разработчикам, которые используют Uno CSS в качестве движка Atomic CSS, необходимо настроить его в соответствии с ситуацией в проекте. По умолчанию включены все названия компонентов, которые идут в комплекте с мини-программами, поэтому в большинстве случаев разработчикам не нужно настраивать этот пункт. Если вам нужно добавить новые компоненты, вы можете добавить в массив имена новых компонентов.

Случай

Кейс интеграции: Индивидуальная реализация на основе Gulp

В демонстрационных шагах в качестве примера рассматривается интеграция Windi CSS (Windi CSS имеет лучший опыт и совместим с Tailwind CSS).
Узнайте больше о Windi CSS
Ветер CSS

ловушка

Чтобы продукты CSS Tailwind/Windi в мини-программе могли влиять на стили компонентов, нам необходимо установить область стиля styleIsolation в файле конфигурации JSON каждого компонента. В противном случае, даже если CSS Tailwind/Windi работает нормально, он не сможет работать. Разработать компонентный пользовательский интерфейс.
На апплет Taro это ограничение не распространяется.
```
{
  "component" : true ,
  "styleIsolation" : " apply-shared "
}
```
Связанные вопросы
Выпуск №1
Поскольку текущая функция горячей перезагрузки инструментов разработчика WeChat не может обнаружить изменения в содержимом файла wxss, импортированного с помощью @import в файле стиля, когда функция горячей перезагрузки включена для разработки, симулятор не будет следовать вашим изменениям в Tailwind/Windi. CSS. Обновите пользовательский интерфейс на основе изменений. В настоящее время представители WeChat знают о существовании этой ошибки. Прежде чем ошибка будет исправлена, мы рекомендуем вам отключить горячую перезагрузку во время разработки и использовать традиционное автоматическое обновление страницы для предварительного просмотра каждого обновления пользовательского интерфейса. В настоящее время эта проблема исправлена в WeChat Developer Tools 1.06.2205231 RC.
Связанные вопросы
Выпуск №3
Для объявления классов внешнего стиля externalClasses в собственном апплете плагин поддерживает только объявление имени externalClasses как 'class' и не поддерживает другие имена.
```
 Component ( {
  externalClasses : [ 'class' ]
} )
```
Связанные вопросы
Выпуск № 44

Сравнение функций

грамматика	Не используйте этот плагин	Используйте этот плагин
Обычный : `h-10` `text-white`	✅	✅
Произвольные значения/вывод значений : `t-[25px]` `bg-[#ffffff]`		✅
Фракция : `translate-x-1/2` `w-8.5`		✅
Важно : `!p-1`		✅
Вывод значения RGB : `text-[rgb(25,25,25)]`		✅
Пробел между : `space-y-2` `space-y-reverse`		✅
Ширина разделения : `divide-x-2` `divide-y-reverse`		✅
Варианты : `dark:bg-gray-800`		✅
Группы вариантов : `hover:(bg-gray-400 font-medium)`		✅
Отзывчивый : `md:p-2`		✅
Универсальный селектор : `*`		✅
Значение `rpx` преобразованное из значения `rem` и `px`		✅

Диапазон совместимости

Веб-пакет >= 4.0.0
Таро >= 3.4.0
МПХ >= 2.7.5
uni-приложение

Расширять

Дополнительная информация

Версия 1.5.6
Тип AI Исходный код
Время обновления 2025-01-19
размер 2.45MB
От Github

Связанные приложения

Мини-ферма, китайская версия

2024-06-28
Мини Мини ФермаИгра

2024-02-22
Программа «Сфера Дайсона»

2022-08-09
мини-удар

2010-07-10
Мини-файловый хост

2009-04-28
Мини-файловый хост

2009-04-28