在小程序中使用 tailwindcss 的最佳方式，支持各家主流小程序平台

个开发工具插件，可以理解为 tailwindcss 的小程序版本。

weapp-tailwindcss 简介

weapp-tailwindcss 是一系列专门为小程序开发而生的插件，主要解决在小程序中使用 tailwindcss 的问题，提升开发效率的全方面解决方案。

weapp-tailwindcss 官网

本质上它是一个转义器，负责把 tailwindcss 中所采集的类名，以及生成的结果，转化成小程序中可以编译的方式。

小程序版 tailwindcss

tailwindcss 是一款原子化的样式生成器，特点是所写即所得，可读性很好，能够自动摇树优化没有用到的样式，也能通过插件和预设提炼项目公共的样式部分，在前端领域非常受欢迎。weapp-tailwindcss 项目的作者是 sonofmagic ，他在2021 年接触到了 tailwindcss 后非常喜欢，并且开始在很多项目中使用。

后来他发现在小程序中没法直接使用像 tailwindcss 这样的 web 库，所以就产生了开发 weapp-tailwindcss 的想法，发布后也很受欢迎，截止本文发文的2024年2月中旬，已经得到了 833 Star！

技术特性

不但可以处理和转义 wxml/wxss , 像微信小程序中的 js 和 wxs 产物也能处理；
提供多种使用方式，包括 webpack/vite/gulp 和 nodejs api，项目集成很方便；
生态以及解决方案丰富，提供大量现成模板，可以利用许多 tailwindcss 现有的生态来构建小程序；
高效的解析和缓存机制，即使项目很大，热更新响应时间也是毫秒级；
贴合 tailwindcss 的设计思路，智能提示友好。

weapp-tailwindcss 文档

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

在国内的各家小程序开发中，由于小程序本身有自己的一套 独特的 技术规范标准，会导致我们无法使用 web 中很多的特性，也没办法直接使用像 tailwindcss 这种 for web 的工具库。

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

简单地说，我们可以很容易在目前市面上的各个框架，或者原生开发中集成 tailwindcss。

开发上手

使用 weapp-tailwindcss 之前需要先安装好 tailwindcss，官网有详细的教程，这里不赘述了。开发支持很全面，几乎涵盖了所有的开发小程序的方式：

uni-app vue2 webpack
uni-app vue3 vite
uni-app HbuilderX 使用方式
Taro v3 (所有框架)
Rax (react)
mpx (原生增强)
原生开发(打包方案)
Nodejs API

uni-app HbuilderX 使用方式

我开发小程序使用的是 HbuilderX，默认的需要配置 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` 一下, 传入绝对路径
  // 如果有其他目录，比如 components，也必须在这里，添加一下
  content: ["./index.html", "./pages/**/*.{html,js,ts,jsx,tsx,vue}"].map(resolve),
  // ...
  corePlugins: {
    preflight: false,
  },
};

同时配置 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")({
          // 注意此处，手动传入 `tailwind.config.js` 的绝对路径
          config: resolve("./tailwind.config.js"),
        }),
        require("autoprefixer"),
      ],
    },
  },
});

注意两个配置文件都需要传入 tailwindcss 的绝对路径。配置完成后，就可以在页面文件中使用 tailwindcss，最后在 uni-app 插件市场安装「Tailwind CSS语言服务」这个插件，就可以开启智能语法提示，可以大大提高开发效率。

视频教程

作者还录制的详细的视频教程，帮助大家快速上手。

免费开源说明

weapp-tailwindcss 是一款免费开源的小程序开发插件工具，源码基于 MIT 开源协议托管在 Github 上，我们可以免费下载来使用，也可以用在商业项目上。

↓↓点击查看本次分享的网站。

weapp-tailwindcss - 在开发小程序中使用 tailwindcss 的最佳方式，免费开源，支持国内各家主流小程序平台｜那些免费的砖

绍

今天为大家带来的是一个用于在微信小程序中渲染html和Markdown的富文本组件，而且支持代码高亮，它就是html2wxml！

Github

https://github.com/qwqoffice/html2wxml

三种版本介绍

插件版本准备

1、打开小程序管理后台，转到设置 - 第三方服务，点击添加插件

2、搜索 html2wxml ，选中并添加

3、添加成功

4、回到小程序开发环境，编辑 app.json ，添加插件声明，最新版为 1.3.0

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

5、在对应页面的 json 文件，比如首页 index.json，添加使用插件组件的声明

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

组件版本准备

1、复制整个 html2wxml-component 文件夹到小程序目录

2、在对应页面的 json 文件，比如首页 index.json，添加使用组件的声明，注意路径

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

模板版本准备

1、复制整个 html2wxml-template 文件夹到小程序目录

2、在对应页面的 js 文件，比如首页 index.js，添加引用声明，并使用html2wxml方法进行数据绑定，注意路径，参数分别为绑定的数据名、已解析的富文本数据、当前页面对象和容器与屏幕边缘的单边的距离

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

3、在对应页面的 wxml 文件，比如首页 index.wxml，添加引用模板的声明，并使用模板，注意路径和绑定的数据名

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

4、在对应页面的 wxss 文件，比如首页 index.wxss或app.wxss，引入样式表和你喜欢的代码高亮样式，注意路径

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

组件使用

示例

// 将Page中的content数据作为HTML格式渲染
<htmltowxml text="{{content}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

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

// 禁用代码行号显示功能
<htmltowxml text="{{content}}" linenums="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 代码高亮样式改为tomorrow
<htmltowxml text="{{content}}" highlightStyle="tomorrow" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 设置代码高亮检测语言 (最多6个，自行搭建服务不受限制)
<htmltowxml text="{{content}}" highlightLanguages="{{['html','js','php','css','cpp','ruby']}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 对HTML数据中的img标签的相对路径补全域名
<htmltowxml text="{{content}}" imghost="https://www.qwqoffice.com" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 禁用加载中动画
<htmltowxml text="{{content}}" showLoading="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 将Page中的text数据作为Markdown格式渲染
<htmltowxml text="{{text}}" type="md" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 直接渲染Page中的已经过解析的obj数据
<htmltowxml json="{{obj}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

服务端用法

富文本的解析默认是由QwqOffice完成，存在不稳定因素，你可以自行搭建解析服务或将解析组件引入到你的项目中。

1、复制整个 html2wxml-php 文件夹到项目目录中

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

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

3、实例化html2wxml，进行解析并输出，示例：

 $towxml = new ToWXML();
 $json = $towxml->towxml( '<h1>H1标题</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事件处理程序

之前一直对事件处理程序这个概念不是很清楚，正好趁着看js高程这本书，来总结一下。

事件处理程序是跨浏览器的，也就是说不通的浏览器处理事件处理程序不通（主要就是IE）。

事件处理程序，分为HTML事件处理程序，DOM0/DOM2级事件处理程序，以及IE事件处理程序。

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

　　说起事件处理程序，需要首先理解什么是事件，事件就是用户或浏览器自身执行的某种动作。例如click，load等事件。

二、HTML事件处理程序

　　有两种方式处理HTML事件处理程序，第一种是直接在html标签中定义，第二种在js中写函数。

　　HTML事件处理程序都有一个event变量，通过event可以直接访问事件对象。

　　HTML事件的缺点：

　　1、如果页面没有完全加载完毕会出错。

　　2、HTML与JS紧密耦合。

　　3、不同浏览器出现差异。

三、DOM0级事件处理程序

　　我们经常使用的 element.onclick = function(){}，这种方式的事件处理程序就是DOM0级事件处理程序

　　DOM0级事件处理程序，是通过js指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。

　　DOM0级和HTML相比，有两个优点：
　　1、简单

　　2、跨浏览器优势（所有浏览器都支持）

四、DOM2级事件处理程序

DOM2级事件，定义了两种方方法来处理定义和删除事件处理程序：addEventListener()和removeEventListener() .

这两种方法都包含三个参数，属性名，方法，和一个boolean值。如果布尔值是false，表示在冒泡阶段调用事件处理程序，如果是true表示的是在捕获阶段处理事件处理程序。默认值是false。

五、IE事件处理程序

IE实现了与DOM中类似的两个方法，attachEvent()和detachEvent()。这两个方法接收相同的参数，事件处理程序名称和事件处理函数。

在IE浏览器中使用attachEvent()和DOM0级事件处理程序的主要区别是作用域方面。DOM0级事件处理程序的作用域是在当前元素上，而attachEvent则是全局作用域，也就是说tihs指向window。

attachEvent同样也是支持处理多个事件处理程序，但是它与DOM有个明显的区别就是后定义的代码先执行。

使用attachEvent和DOM2有同样的问题，如果把函数写在里面的话是无法取消事件监听函数的。

六、跨浏览器的事件处理程序

为了兼容IE，在开发过程中只能使用跨浏览器的事件处理程序

阅读更多内容

JS循环的执行机制

在线咨询

上一篇：JavaScript (HTML5) 图表控件AnyChart v7.10.1发布
下一篇：新书速览-HTML5+CSS3 Web前端开发与实例教程：微课视频版

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商