個(gè)開發(fā)工具插件，可以理解為 tailwindcss 的小程序版本。

weapp-tailwindcss 簡介

weapp-tailwindcss 是一系列專門為小程序開發(fā)而生的插件，主要解決在小程序中使用 tailwindcss 的問題，提升開發(fā)效率的全方面解決方案。

weapp-tailwindcss 官網(wǎng)

本質(zhì)上它是一個(gè)轉(zhuǎn)義器，負(fù)責(zé)把 tailwindcss 中所采集的類名，以及生成的結(jié)果，轉(zhuǎn)化成小程序中可以編譯的方式。

小程序版 tailwindcss

tailwindcss 是一款原子化的樣式生成器，特點(diǎn)是所寫即所得，可讀性很好，能夠自動(dòng)搖樹優(yōu)化沒有用到的樣式，也能通過插件和預(yù)設(shè)提煉項(xiàng)目公共的樣式部分，在前端領(lǐng)域非常受歡迎。weapp-tailwindcss 項(xiàng)目的作者是 sonofmagic ，他在2021 年接觸到了 tailwindcss 后非常喜歡，并且開始在很多項(xiàng)目中使用。

后來他發(fā)現(xiàn)在小程序中沒法直接使用像 tailwindcss 這樣的 web 庫，所以就產(chǎn)生了開發(fā) weapp-tailwindcss 的想法，發(fā)布后也很受歡迎，截止本文發(fā)文的2024年2月中旬，已經(jīng)得到了 833 Star！

技術(shù)特性

• 不但可以處理和轉(zhuǎn)義 wxml/wxss , 像微信小程序中的 js 和 wxs 產(chǎn)物也能處理；
• 提供多種使用方式，包括 webpack/vite/gulp 和 nodejs api，項(xiàng)目集成很方便；
• 生態(tài)以及解決方案豐富，提供大量現(xiàn)成模板，可以利用許多 tailwindcss 現(xiàn)有的生態(tài)來構(gòu)建小程序；
• 高效的解析和緩存機(jī)制，即使項(xiàng)目很大，熱更新響應(yīng)時(shí)間也是毫秒級(jí)；
• 貼合 tailwindcss 的設(shè)計(jì)思路，智能提示友好。

weapp-tailwindcss 文檔

為什么在小程序中不能直接使用tailwindcss？

在國內(nèi)的各家小程序開發(fā)中，由于小程序本身有自己的一套 獨(dú)特的 技術(shù)規(guī)范標(biāo)準(zhǔn)，會(huì)導(dǎo)致我們無法使用 web 中很多的特性，也沒辦法直接使用像 tailwindcss 這種 for web 的工具庫。

今天向大家推薦的 weapp-tailwindcss ，就是一款能讓你在小程序開發(fā)中使用 tailwindcss 大部分特性的開發(fā)插件。目前支持所有使用 webpack 和 vite 的主流小程序框架，以及使用 webpack / gulp 的原生小程序打包方式。

簡單地說，我們可以很容易在目前市面上的各個(gè)框架，或者原生開發(fā)中集成 tailwindcss。

開發(fā)上手

使用 weapp-tailwindcss 之前需要先安裝好 tailwindcss，官網(wǎng)有詳細(xì)的教程，這里不贅述了。開發(fā)支持很全面，幾乎涵蓋了所有的開發(fā)小程序的方式：

• uni-app vue2 webpack
• uni-app vue3 vite
• uni-app HbuilderX 使用方式
• Taro v3 (所有框架)
• Rax (react)
• mpx (原生增強(qiáng))
• 原生開發(fā)(打包方案)
• Nodejs API

uni-app HbuilderX 使用方式

我開發(fā)小程序使用的是 HbuilderX，默認(rèn)的需要配置 tailwind.config.js 文件：

// tailwind.config.js
const path = require("path");

const resolve = (p) => {
  return path.resolve(__dirname, p);
};
/** @type {import('tailwindcss').Config} */
module.exports = {
  // 注意此處，一定要 `path.resolve` 一下, 傳入絕對(duì)路徑
  // 如果有其他目錄，比如 components，也必須在這里，添加一下
  content: ["./index.html", "./pages/**/*.{html,js,ts,jsx,tsx,vue}"].map(resolve),
  // ...
  corePlugins: {
    preflight: false,
  },
};

同時(shí)配置 vite.config.js ：

import path from "path";
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from "weapp-tailwindcss/vite";
// 注意： 打包成 h5 和 app 都不需要開啟插件配置
const isH5 = process.env.UNI_PLATFORM === "h5";
const isApp = process.env.UNI_PLATFORM === "app";
const WeappTailwindcssDisabled = isH5 || isApp;

const resolve = (p) => {
  return path.resolve(__dirname, p);
};

export default defineConfig({
  plugins: [uni(), uvwt({
    rem2rpx: true,
    disabled: WeappTailwindcssDisabled
  })],
  css: {
    postcss: {
      plugins: [
        require("tailwindcss")({
          // 注意此處，手動(dòng)傳入 `tailwind.config.js` 的絕對(duì)路徑
          config: resolve("./tailwind.config.js"),
        }),
        require("autoprefixer"),
      ],
    },
  },
});

注意兩個(gè)配置文件都需要傳入 tailwindcss 的絕對(duì)路徑。配置完成后，就可以在頁面文件中使用 tailwindcss，最后在 uni-app 插件市場(chǎng)安裝「Tailwind CSS語言服務(wù)」這個(gè)插件，就可以開啟智能語法提示，可以大大提高開發(fā)效率。

視頻教程

作者還錄制的詳細(xì)的視頻教程，幫助大家快速上手。

免費(fèi)開源說明

weapp-tailwindcss 是一款免費(fèi)開源的小程序開發(fā)插件工具，源碼基于 MIT 開源協(xié)議托管在 Github 上，我們可以免費(fèi)下載來使用，也可以用在商業(yè)項(xiàng)目上。

↓↓點(diǎn)擊查看本次分享的網(wǎng)站。

weapp-tailwindcss - 在開發(fā)小程序中使用 tailwindcss 的最佳方式，免費(fèi)開源，支持國內(nèi)各家主流小程序平臺(tái)｜那些免費(fèi)的磚

紹

今天為大家?guī)淼氖且粋€(gè)用于在微信小程序中渲染html和Markdown的富文本組件，而且支持代碼高亮，它就是html2wxml！

Github

https://github.com/qwqoffice/html2wxml

三種版本介紹

• 插件版本準(zhǔn)備

1、打開小程序管理后臺(tái)，轉(zhuǎn)到設(shè)置 - 第三方服務(wù)，點(diǎn)擊添加插件

2、搜索 html2wxml ，選中并添加

3、添加成功

4、回到小程序開發(fā)環(huán)境，編輯 app.json ，添加插件聲明，最新版為 1.3.0

"plugins": {
 	"htmltowxml": {
 		"version": "1.3.0",
 		"provider": "wxa51b9c855ae38f3c"
 	}
 }

5、在對(duì)應(yīng)頁面的 json 文件，比如首頁 index.json，添加使用插件組件的聲明

 "usingComponents": {
 	"htmltowxml": "plugin://htmltowxml/view"
 }

• 組件版本準(zhǔn)備

1、復(fù)制整個(gè) html2wxml-component 文件夾到小程序目錄

2、在對(duì)應(yīng)頁面的 json 文件，比如首頁 index.json，添加使用組件的聲明，注意路徑

 "usingComponents": {
 	"htmltowxml": "path/to/html2wxml-component/html2wxml"
 } 

• 模板版本準(zhǔn)備

1、復(fù)制整個(gè) html2wxml-template 文件夾到小程序目錄

2、在對(duì)應(yīng)頁面的 js 文件，比如首頁 index.js，添加引用聲明，并使用html2wxml方法進(jìn)行數(shù)據(jù)綁定，注意路徑，參數(shù)分別為綁定的數(shù)據(jù)名、已解析的富文本數(shù)據(jù)、當(dāng)前頁面對(duì)象和容器與屏幕邊緣的單邊的距離

 var html2wxml = require('path/to/html2wxml-template/html2wxml.js');
 html2wxml.html2wxml('article', res.data, this, 5);

3、在對(duì)應(yīng)頁面的 wxml 文件，比如首頁 index.wxml，添加引用模板的聲明，并使用模板，注意路徑和綁定的數(shù)據(jù)名

 <import src="path/to/html2wxml-template/html2wxml.wxml" />
 <template is="html2wxml" data="{{wxmlData:article}}" />

4、在對(duì)應(yīng)頁面的 wxss 文件，比如首頁 index.wxss或app.wxss， 引入樣式表和你喜歡的代碼高亮樣式，注意路徑

@import "path/to/html2wxml-template/html2wxml.wxss";
@import "path/to/html2wxml-template/highlight-styles/darcula.wxss";

組件使用

• 示例

// 將Page中的content數(shù)據(jù)作為HTML格式渲染
<htmltowxml text="{{content}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 禁用代碼高亮功能
<htmltowxml text="{{content}}" highlight="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 禁用代碼行號(hào)顯示功能
<htmltowxml text="{{content}}" linenums="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 代碼高亮樣式改為tomorrow
<htmltowxml text="{{content}}" highlightStyle="tomorrow" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 設(shè)置代碼高亮檢測(cè)語言 (最多6個(gè)，自行搭建服務(wù)不受限制)
<htmltowxml text="{{content}}" highlightLanguages="{{['html','js','php','css','cpp','ruby']}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 對(duì)HTML數(shù)據(jù)中的img標(biāo)簽的相對(duì)路徑補(bǔ)全域名
<htmltowxml text="{{content}}" imghost="https://www.qwqoffice.com" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 禁用加載中動(dòng)畫
<htmltowxml text="{{content}}" showLoading="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 將Page中的text數(shù)據(jù)作為Markdown格式渲染
<htmltowxml text="{{text}}" type="md" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 直接渲染Page中的已經(jīng)過解析的obj數(shù)據(jù)
<htmltowxml json="{{obj}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

• 服務(wù)端用法

富文本的解析默認(rèn)是由QwqOffice完成，存在不穩(wěn)定因素，你可以自行搭建解析服務(wù)或?qū)⒔馕鼋M件引入到你的項(xiàng)目中。

1、復(fù)制整個(gè) html2wxml-php 文件夾到項(xiàng)目目錄中

2、引入類文件class.ToWXML.php

 include( 'path/to/html2wxml-php/class.ToWXML.php' );

3、實(shí)例化html2wxml，進(jìn)行解析并輸出，示例：

 $towxml = new ToWXML();
 $json = $towxml->towxml( '<h1>H1標(biāo)題</h1>', array(
 	'type' => 'html',
 	'highlight' => true,
 	'linenums' => true,
 	'imghost' => null,
 	'encode' => false,
 	'highlight_languages' => array( 'html', 'js', 'php', 'css' )
 ) );
 echo json_encode( $json, JSON_UNESCAPED_UNICODE );

可用的代碼高亮語言

S事件處理程序

之前一直對(duì)事件處理程序這個(gè)概念不是很清楚，正好趁著看js高程這本書，來總結(jié)一下。

事件處理程序是跨瀏覽器的，也就是說不通的瀏覽器處理事件處理程序不通（主要就是IE）。

事件處理程序，分為HTML事件處理程序，DOM0/DOM2級(jí)事件處理程序，以及IE事件處理程序。

一、什么是事件處理程序：

　　說起事件處理程序，需要首先理解什么是事件，事件就是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作。例如click，load等事件。

二、HTML事件處理程序

　　有兩種方式處理HTML事件處理程序，第一種是直接在html標(biāo)簽中定義，第二種在js中寫函數(shù)。

　　HTML事件處理程序都有一個(gè)event變量，通過event可以直接訪問事件對(duì)象。

　　HTML事件的缺點(diǎn)：

　　1、如果頁面沒有完全加載完畢會(huì)出錯(cuò)。

　　2、HTML與JS緊密耦合。

　　3、不同瀏覽器出現(xiàn)差異。

三、DOM0級(jí)事件處理程序

　　我們經(jīng)常使用的 element.onclick = function(){}，這種方式的事件處理程序就是DOM0級(jí)事件處理程序

　　DOM0級(jí)事件處理程序，是通過js指定事件處理程序的傳統(tǒng)方式，就是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩浴?/span>

　　DOM0級(jí)和HTML相比，有兩個(gè)優(yōu)點(diǎn)：
　　1、簡單

　　2、跨瀏覽器優(yōu)勢(shì)（所有瀏覽器都支持）

四、DOM2級(jí)事件處理程序

DOM2級(jí)事件，定義了兩種方方法來處理定義和刪除事件處理程序：addEventListener()和removeEventListener() .

這兩種方法都包含三個(gè)參數(shù)，屬性名，方法，和一個(gè)boolean值。如果布爾值是false，表示在冒泡階段調(diào)用事件處理程序，如果是true表示的是在捕獲階段處理事件處理程序。默認(rèn)值是false。

五、IE事件處理程序

IE實(shí)現(xiàn)了與DOM中類似的兩個(gè)方法，attachEvent()和detachEvent()。這兩個(gè)方法接收相同的參數(shù)，事件處理程序名稱和事件處理函數(shù)。

在IE瀏覽器中使用attachEvent()和DOM0級(jí)事件處理程序的主要區(qū)別是作用域方面。DOM0級(jí)事件處理程序的作用域是在當(dāng)前元素上，而attachEvent則是全局作用域，也就是說tihs指向window。

attachEvent同樣也是支持處理多個(gè)事件處理程序，但是它與DOM有個(gè)明顯的區(qū)別就是后定義的代碼先執(zhí)行。

使用attachEvent和DOM2有同樣的問題，如果把函數(shù)寫在里面的話是無法取消事件監(jiān)聽函數(shù)的。

六、跨瀏覽器的事件處理程序

為了兼容IE，在開發(fā)過程中只能使用跨瀏覽器的事件處理程序

閱讀更多內(nèi)容

JS循環(huán)的執(zhí)行機(jī)制