ดาวน์โหลด mini program tailwind - ดาวน์โหลดซอร์สโค้ด mini program tailwind

mini program tailwind

โค้ดแหล่งที่มา AI

1.5.6

ดาวน์โหลด

wechat-mp-ปลั๊กอิน

ปลั๊กอิน Mini Program Tailwind Webpack

ให้มินิโปรแกรมของคุณใช้ Tailwind/Windi CSS ดั้งเดิม

จาก Digital Creative บริษัทวิจัย ออกแบบ และพัฒนาผลิตภัณฑ์ดิจิทัลที่ตั้งอยู่ในเซี่ยงไฮ้
มารู้จักเรากันเถอะ
สิ่งที่เราทำ
เกี่ยวกับเรา
ติดต่อเรา

ขอแนะนำให้อ่านเอกสารอิสระเพื่อประสบการณ์การอ่านที่ดียิ่งขึ้น

แนะนำ

เนื่องจากตัวแอปเพล็ตไม่รองรับอักขระหลีกพิเศษบางตัว (เช่น [ ! . ฯลฯ) ที่อยู่ในชื่อตัวเลือกที่สร้างโดย Tailwind/Windi CSS สิ่งนี้จะป้องกันไม่ให้คุณใช้คุณสมบัติบางอย่างที่ควรใช้เมื่อพัฒนา แอปเพล็ต ไวยากรณ์ที่ยืดหยุ่นและฟังก์ชันอนุมานค่าอัตโนมัติ/ค่าที่กำหนดเองที่ใช้ในเว็บแอปพลิเคชัน เช่น w-[30px] translate-x-1/2 !bg-[#ff0000] เป็นต้น ไม่ต้องสงสัยเลยว่าสิ่งนี้มีผลกระทบอย่างมากต่อประสิทธิภาพการพัฒนาและภาระทางจิตของเรา

เพื่อทำลายข้อจำกัดนี้ เราได้พัฒนาปลั๊กอินนี้เพื่อช่วยให้คุณรักษาประสบการณ์การพัฒนาที่สอดคล้องกันอย่างมากกับการพัฒนาแอปพลิเคชันเว็บเมื่อใช้ Tailwind/Windi CSS เพื่อพัฒนาโปรแกรมขนาดเล็ก คุณไม่จำเป็นต้องใส่ใจอีกต่อไปว่าสตริงใดที่ไม่ใช่ ใช้แล้ว แทนที่จะสนับสนุนปัญหาที่ต้องเปลี่ยนวิธีการเขียน ให้เขียนรูปแบบมินิโปรแกรมของคุณต่อไปตามไวยากรณ์อย่างเป็นทางการของ Tailwind/Windi CSS และการทำงานที่เข้ากันได้เบื้องหลังจะได้รับการจัดการอย่างเงียบๆ โดยปลั๊กอินนี้

นอกจากนี้ ปลั๊กอินนี้ยังรวมฟังก์ชันการแปลงค่า rpx โดยอัตโนมัติอีกด้วย ฟังก์ชั่นนี้สามารถแปลงค่าหน่วย rem และ px ที่เราเขียนในไฟล์การกำหนดค่า Tailwind/Windi CSS และซอร์สโค้ดเป็นค่าหน่วย rpx ในไฟล์สไตล์ที่สร้างขึ้นขั้นสุดท้ายได้โดยอัตโนมัติ สิ่งนี้ช่วยให้นักพัฒนาสามารถนำการกำหนดค่าธีมเดิมที่ใช้ในโปรเจ็กต์เว็บกลับมาใช้ใหม่ได้ และช่วยให้โปรแกรมขนาดเล็กสามารถใช้คุณสมบัติที่มาจากพิกเซลที่ตอบสนองได้ต่อไป

เรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทำงานของปลั๊กอินนี้
ให้มินิโปรแกรมของคุณใช้ Tailwind/Windi CSS ดั้งเดิม

เริ่มต้นอย่างรวดเร็ว

เลือกหนึ่งในประเภทโปรแกรมขนาดเล็กที่เหมาะกับคุณในการติดตั้งปลั๊กอิน

แอปเพล็ต 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

 //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
  }
}

ไฟล์การกำหนดค่า Tailwind CSS จะมีผลที่นี่ด้วย
โปรดดูเอกสารอย่างเป็นทางการของ 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
utilitiesSettings.spaceBetweenItems	`Array<string>`	`[]`	ชื่อของคอมโพเนนต์ลูกในคอนเทนเนอร์ที่ใช้ยูทิลิตี้ Space Between ส่วนประกอบทั่วไปสี่รายการ ได้แก่ มุมมอง ปุ่ม ข้อความ และรูปภาพ จะถูกรวมไว้ตามค่าเริ่มต้น ดังนั้นในกรณีส่วนใหญ่ นักพัฒนาไม่จำเป็นต้องกำหนดค่ารายการนี้ หากคุณต้องการเพิ่มส่วนประกอบใหม่ คุณสามารถเพิ่มชื่อส่วนประกอบใหม่ในอาร์เรย์ได้
utilitiesSettings.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

ใช้ปลั๊กอิน Taro

 // 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
  }
}

ไฟล์การกำหนดค่า Tailwind CSS จะมีผลที่นี่ด้วย
โปรดดูเอกสารอย่างเป็นทางการของ Windi CSS สำหรับรายละเอียดเพิ่มเติม
กฎความเข้ากันได้ของโปรไฟล์ Windi CSS

แนะนำผลิตภัณฑ์ Windi CSS ลงในไฟล์รายการ

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

เสร็จ

เริ่มเพลิดเพลินกับประสบการณ์การพัฒนาที่มีประสิทธิภาพที่ Windi CSS นำเสนอใน Taro ใช่ไหม

พารามิเตอร์ที่กำหนดค่าได้

ชื่อ	พิมพ์	ค่าเริ่มต้น	อธิบาย
เปิดใช้งานWindiCSS	บูลีน	`true`	ไม่ว่าจะเปิดใช้งาน Windi CSS ที่มาพร้อมกับปลั๊กอินหรือไม่
windiCSSConfigFile.windi	สตริง	อ่านไฟล์การกำหนดค่าในไดเร็กทอรีรากของโปรเจ็กต์	กำหนดเส้นทางไปยังไฟล์การกำหนดค่า Windi CSS ด้วยตนเองหากจำเป็น
เปิดใช้งาน Rpx	บูลีน	`false`	ว่าจะเปิดใช้งานการแปลงอัตโนมัติเป็นค่าหน่วย rpx หรือไม่ (เนื่องจาก Taro มาพร้อมกับฟังก์ชันนี้ จึงปิดไว้ตามค่าเริ่มต้น)
การออกแบบความกว้าง	ตัวเลข	`375`	ค่าความกว้างพิกเซลของแบบร่างการออกแบบ ขนาดนี้จะส่งผลต่ออัตราส่วนการคำนวณในระหว่างกระบวนการแปลง rpx
utilitiesSettings.spaceBetweenItems	`Array<string>`	`[]`	ชื่อของคอมโพเนนต์ลูกในคอนเทนเนอร์ที่ใช้ยูทิลิตี้ Space Between ส่วนประกอบทั่วไปสี่ส่วน มุมมอง ปุ่ม ข้อความ และรูปภาพ จะถูกรวมไว้ตามค่าเริ่มต้น ดังนั้นในกรณีส่วนใหญ่ นักพัฒนาไม่จำเป็นต้องกำหนดค่ารายการนี้ หากคุณต้องการเพิ่มส่วนประกอบใหม่ คุณสามารถเพิ่มชื่อส่วนประกอบใหม่ในอาร์เรย์ได้
utilitiesSettings.divideItems	`Array<string>`	`[]`	ชื่อของคอมโพเนนต์ลูกในคอนเทนเนอร์ที่ใช้ยูทิลิตี Divide width ส่วนประกอบทั่วไปสี่ส่วน มุมมอง ปุ่ม ข้อความ และรูปภาพ จะถูกรวมไว้ตามค่าเริ่มต้น ดังนั้นในกรณีส่วนใหญ่ นักพัฒนาไม่จำเป็นต้องกำหนดค่ารายการนี้ หากคุณต้องการเพิ่มส่วนประกอบใหม่ คุณสามารถเพิ่มชื่อส่วนประกอบใหม่ในอาร์เรย์ได้
utilitiesSettings.customComponents	`Array<string>`	`[]`	นักพัฒนาที่ใช้ Uno CSS เป็นเอ็นจิ้น Atomic CSS จำเป็นต้องกำหนดค่าตามสถานการณ์ของโครงการ ตามค่าเริ่มต้น ชื่อส่วนประกอบทั้งหมดที่มาพร้อมกับมินิโปรแกรมจะรวมอยู่ด้วย ดังนั้นในกรณีส่วนใหญ่ นักพัฒนาไม่จำเป็นต้องกำหนดค่ารายการนี้ หากคุณต้องการเพิ่มส่วนประกอบใหม่ คุณสามารถเพิ่มชื่อส่วนประกอบใหม่ในอาร์เรย์ได้
เปิดใช้งาน DebugLog	บูลีน	`false`	ว่าจะเปิดใช้งานการพิมพ์บันทึกการทำงานภายในของปลั๊กอินนี้หรือไม่

กรณี

กรณีบูรณาการ: โครงการ Taro - React
กรณีบูรณาการ: โครงการ Taro - Vue 2
กรณีบูรณาการ: โครงการ Taro - Vue 3

? แอพเพล็ตเดียว

แอพเพล็ต uni-app

uni-app พัฒนาเพียงครั้งเดียวและครอบคลุมหลายเทอร์มินัล

บทความนี้ประกอบด้วยการสาธิตการติดตั้ง Vue 3 และ Vue 2 ของ uni-app สองรายการ

สาธิตการติดตั้ง Vue 3

โปรดดูมินิโปรแกรมประเภทถัดไป: Vite mini program ปกติ (ใช้ uni-app เป็นตัวอย่าง)

สาธิตการติดตั้ง Vue2

ติดตั้ง 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
  }
}

ไฟล์การกำหนดค่า Tailwind CSS จะมีผลที่นี่ด้วย
โปรดดูเอกสารอย่างเป็นทางการของ Windi CSS สำหรับรายละเอียดเพิ่มเติม
กฎความเข้ากันได้ของโปรไฟล์ Windi CSS

แนะนำผลิตภัณฑ์ Windi CSS ลงในไฟล์รายการ

 // main.js
import 'windi.css'

เสร็จ

เริ่มเพลิดเพลินกับประสบการณ์การพัฒนาที่มีประสิทธิภาพที่ Windi CSS นำเสนอในโครงการมินิโปรแกรมหรือไม่

พารามิเตอร์ที่กำหนดค่าได้

ชื่อ	พิมพ์	ค่าเริ่มต้น	อธิบาย
เปิดใช้งาน Rpx	บูลีน	`true`	ว่าจะเปิดใช้งานการแปลงอัตโนมัติเป็นค่าหน่วย rpx หรือไม่
การออกแบบความกว้าง	ตัวเลข	`350`	ค่าความกว้างพิกเซลของแบบร่างการออกแบบ ขนาดนี้จะส่งผลต่ออัตราส่วนการคำนวณในระหว่างกระบวนการแปลง rpx
utilitiesSettings.spaceBetweenItems	`Array<string>`	`[]`	ชื่อของคอมโพเนนต์ลูกในคอนเทนเนอร์ที่ใช้ยูทิลิตี้ Space Between ส่วนประกอบทั่วไปสี่ส่วน มุมมอง ปุ่ม ข้อความ และรูปภาพ จะถูกรวมไว้ตามค่าเริ่มต้น ดังนั้นในกรณีส่วนใหญ่ นักพัฒนาไม่จำเป็นต้องกำหนดค่ารายการนี้ หากคุณต้องการเพิ่มส่วนประกอบใหม่ คุณสามารถเพิ่มชื่อส่วนประกอบใหม่ในอาร์เรย์ได้
utilitiesSettings.divideItems	`Array<string>`	`[]`	ชื่อของคอมโพเนนต์ลูกในคอนเทนเนอร์ที่ใช้ยูทิลิตี Divide width ส่วนประกอบทั่วไปสี่ส่วน มุมมอง ปุ่ม ข้อความ และรูปภาพ จะถูกรวมไว้ตามค่าเริ่มต้น ดังนั้นในกรณีส่วนใหญ่ นักพัฒนาไม่จำเป็นต้องกำหนดค่ารายการนี้ หากคุณต้องการเพิ่มส่วนประกอบใหม่ คุณสามารถเพิ่มชื่อส่วนประกอบใหม่ในอาร์เรย์ได้
utilitiesSettings.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
  }
}

ไฟล์การกำหนดค่า Tailwind CSS จะมีผลที่นี่ด้วย
โปรดดูเอกสารอย่างเป็นทางการของ Windi CSS สำหรับรายละเอียดเพิ่มเติม
กฎความเข้ากันได้ของโปรไฟล์ Windi CSS

แนะนำผลิตภัณฑ์ Windi CSS ลงในไฟล์รายการ

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

เสร็จ

เริ่มเพลิดเพลินกับประสบการณ์การพัฒนาที่มีประสิทธิภาพที่ Windi CSS นำเสนอในโครงการมินิโปรแกรมหรือไม่

พารามิเตอร์ที่กำหนดค่าได้

ชื่อ	พิมพ์	ค่าเริ่มต้น	อธิบาย
เปิดใช้งาน Rpx	บูลีน	`true`	ว่าจะเปิดใช้งานการแปลงอัตโนมัติเป็นค่าหน่วย rpx หรือไม่
การออกแบบความกว้าง	ตัวเลข	`350`	ค่าความกว้างพิกเซลของแบบร่างการออกแบบ ขนาดนี้จะส่งผลต่ออัตราส่วนการคำนวณในระหว่างกระบวนการแปลง rpx
utilitiesSettings.spaceBetweenItems	`Array<string>`	`[]`	ชื่อของคอมโพเนนต์ลูกในคอนเทนเนอร์ที่ใช้ยูทิลิตี้ Space Between ส่วนประกอบทั่วไปสี่รายการ ได้แก่ มุมมอง ปุ่ม ข้อความ และรูปภาพ จะถูกรวมไว้ตามค่าเริ่มต้น ดังนั้นในกรณีส่วนใหญ่ นักพัฒนาไม่จำเป็นต้องกำหนดค่ารายการนี้ หากคุณต้องการเพิ่มส่วนประกอบใหม่ คุณสามารถเพิ่มชื่อส่วนประกอบใหม่ในอาร์เรย์ได้
utilitiesSettings.divideItems	`Array<string>`	`[]`	ชื่อของคอมโพเนนต์ลูกในคอนเทนเนอร์ที่ใช้ยูทิลิตี Divide width ส่วนประกอบทั่วไปสี่รายการ ได้แก่ มุมมอง ปุ่ม ข้อความ และรูปภาพ จะถูกรวมไว้ตามค่าเริ่มต้น ดังนั้นในกรณีส่วนใหญ่ นักพัฒนาไม่จำเป็นต้องกำหนดค่ารายการนี้ หากคุณต้องการเพิ่มส่วนประกอบใหม่ คุณสามารถเพิ่มชื่อส่วนประกอบใหม่ในอาร์เรย์ได้
utilitiesSettings.customComponents	`Array<string>`	`[]`	นักพัฒนาที่ใช้ Uno CSS เป็นเอ็นจิ้น Atomic CSS จำเป็นต้องกำหนดค่าตามสถานการณ์ของโครงการ ตามค่าเริ่มต้น ชื่อส่วนประกอบทั้งหมดที่มาพร้อมกับมินิโปรแกรมจะรวมอยู่ด้วย ดังนั้นในกรณีส่วนใหญ่ นักพัฒนาไม่จำเป็นต้องกำหนดค่ารายการนี้ หากคุณต้องการเพิ่มส่วนประกอบใหม่ คุณสามารถเพิ่มชื่อส่วนประกอบใหม่ในอาร์เรย์ได้

กรณี

กรณีการรวม: โครงการ uni-app Vue 3

? แอปเพล็ตที่พัฒนาเองหรือสร้างขึ้นเอง

มินิโปรแกรมสำหรับการพัฒนาแบบเนทิฟหรือเครื่องมือสร้างแบบกำหนดเอง

ไม่ว่าโปรเจ็กต์ของคุณจะพัฒนาด้วยเครื่องมือบันเดิลหรือเวิร์กโฟลว์ใด ตราบใดที่มีบริการตรวจสอบและประมวลผลไฟล์ที่ตั้งโปรแกรมได้ คุณก็สามารถปรับแต่งได้ แต่สิ่งหนึ่งที่ต้องทำให้ชัดเจนในที่นี้คือ หากเราต้องการรวมฟังก์ชันของปลั๊กอินนี้ตามโหมดการพัฒนาแบบเนทีฟ เราต้องเริ่มชุดบริการตรวจสอบและประมวลผลไฟล์ที่ตั้งโปรแกรมได้เป็นพื้นฐานสำหรับปลั๊กอิน การดำเนินการของ บริการนี้มักจะให้บริการโดยเครื่องมือของบุคคลที่สามที่กำหนดค่าไว้เช่น Webpack และ Gulp เสร็จสมบูรณ์

นักพัฒนาซอฟต์แวร์ที่ใช้ Tailwind/Windi CSS CLI โปรดอ่าน
หากคุณพัฒนา UI ของโปรแกรมขนาดเล็กผ่าน 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
utilitiesSettings.spaceBetweenItems	`Array<string>`	`[]`	ชื่อของคอมโพเนนต์ลูกในคอนเทนเนอร์ที่ใช้ยูทิลิตี้ Space Between ส่วนประกอบทั่วไปสี่ส่วน มุมมอง ปุ่ม ข้อความ และรูปภาพ จะถูกรวมไว้ตามค่าเริ่มต้น ดังนั้นในกรณีส่วนใหญ่ นักพัฒนาไม่จำเป็นต้องกำหนดค่ารายการนี้ หากคุณต้องการเพิ่มส่วนประกอบใหม่ คุณสามารถเพิ่มชื่อส่วนประกอบใหม่ในอาร์เรย์ได้
utilitiesSettings.divideItems	`Array<string>`	`[]`	ชื่อของคอมโพเนนต์ลูกในคอนเทนเนอร์ที่ใช้ยูทิลิตี Divide width ส่วนประกอบทั่วไปสี่ส่วน มุมมอง ปุ่ม ข้อความ และรูปภาพ จะถูกรวมไว้ตามค่าเริ่มต้น ดังนั้นในกรณีส่วนใหญ่ นักพัฒนาไม่จำเป็นต้องกำหนดค่ารายการนี้ หากคุณต้องการเพิ่มส่วนประกอบใหม่ คุณสามารถเพิ่มชื่อส่วนประกอบใหม่ในอาร์เรย์ได้
utilitiesSettings.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 จะทำงานได้ตามปกติก็ตาม นำมาใช้ พัฒนาส่วนประกอบ UI
แอปเพล็ต Taro ไม่ได้รับผลกระทบจากข้อจำกัดนี้
```
{
  "component" : true ,
  "styleIsolation" : " apply-shared "
}
```
ประเด็นที่เกี่ยวข้อง
ฉบับที่ #1
เนื่องจากฟังก์ชัน hot reload ปัจจุบันของเครื่องมือนักพัฒนา WeChat ไม่สามารถตรวจพบการเปลี่ยนแปลงในเนื้อหาของไฟล์ wxss ที่นำเข้าโดย @import ในไฟล์สไตล์ เมื่อเปิดใช้งานฟังก์ชัน hot reload เพื่อการพัฒนา ตัวจำลองจะไม่ติดตามการเปลี่ยนแปลงของคุณกับ Tailwind/Windi CSS อัปเดต UI ตามการเปลี่ยนแปลง ในปัจจุบัน เจ้าหน้าที่ WeChat ทราบถึงการมีอยู่ของจุดบกพร่องนี้ ก่อนที่จะแก้ไขจุดบกพร่อง เราขอแนะนำให้คุณปิดการโหลดซ้ำในระหว่างการพัฒนา และใช้การรีเฟรชหน้าอัตโนมัติแบบเดิมเพื่อดูตัวอย่างการอัปเดต UI แต่ละรายการ ขณะนี้ปัญหานี้ได้รับการแก้ไขแล้วใน WeChat Developer Tools 1.06.2205231 RC
ประเด็นที่เกี่ยวข้อง
ฉบับที่ #3
สำหรับการประกาศคลาสสไตล์ภายนอก externalClasses ในแอปเพล็ตดั้งเดิม ปลั๊กอินรองรับเฉพาะการประกาศชื่อ externalClasses เป็น 'class' และไม่รองรับชื่ออื่น
```
 Component ( {
  externalClasses : [ 'class' ]
} )
```
ประเด็นที่เกี่ยวข้อง
ฉบับที่ #44

การเปรียบเทียบฟังก์ชัน

ไวยากรณ์	อย่าใช้ปลั๊กอินนี้	ใช้ปลั๊กอินนี้
Regular : `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`