uni-app—— uni-app + Tailwind CSS 微信小程序真机调试报错 `unexpected character \` 的解决方案

问题描述

在使用uni-app + Tailwind CSS开发微信小程序时，在微信开发者工具中点击「真机调试」或「预览」时，报错：

message：真机调试 Error: 1:503:unexpected character `\` File: pages/xxx/detail.wxml

错误指向编译后的.wxml文件中存在非法的反斜杠字符\。

问题原因

根本原因

uni-app 编译器在处理动态:class绑定与Tailwind CSS 任意值类名组合时，会在生成的 WXML 文件中产生转义双引号\"。

微信小程序的 WXML 模板引擎不支持这种转义语法，导致真机调试时解析失败。

问题代码示例

<!-- 问题写法：动态 :class 中使用 Tailwind 任意值语法 --> <view :class="{ 'text-[--theme-color]': isActive }" > 内容 </view>

编译后生成的 WXML：

<!-- 编译产物（有问题） --><viewclass="{ {['p--32rpx-',\"text---h-999-\",isActive&&\"text----theme-color-\"]}}">内容</view>

注意其中的\"text---h-999-\"包含了转义双引号\"，这在 WXML 中是非法字符。

触发条件

以下情况容易触发此问题：

1. 使用:class动态绑定 + Tailwind 任意值类名（如text-[#333]、p-[32rpx]）
2. 使用 CSS 变量语法（如text-[--theme-color]）
3. 静态 class 与动态 :class 混用时包含方括号语法

解决方案

方案一：编译后自动修复（推荐）

创建一个后处理脚本，在编译完成后自动将 WXML 文件中的\"替换为单引号'。

1. 创建修复脚本

在项目根目录创建scripts/fix-wxml.js：

/** * 修复 WXML 文件中的转义双引号问题 * 将 \" 替换为 '（单引号） */constfs=require('fs');constpath=require('path'