uni-app编译时模板里边的多行class为何没有合并到一行 导致微信小程序报错

uni-app编译时模板里边的多行class为何没有合并到一行 导致微信小程序报错

开发环境 版本号 项目创建方式
Windows win10 HBuilderX
HBuilderX 3.2.9
第三方开发者工具 1.05.2110110
基础库 2.20.0

产品分类：uniapp/小程序/微信

操作步骤：

<div
class="title
text-white text-lg
flex
align-center
justify-center"
@click="$Router.push({ name: 'orgs' })"
>
<div>{{ _currentOrg ? _currentOrg.name : "个人中心" }}</div>
<div class="margin-left-xs" v-if="_user">
<wl-icon icon="cuIcon-right" color="#fff" />
</div>
</div>

预期结果：

<div class=" title text-white text-lg flex align-center justify-center"

实际结果：

class="
title
text-white text-lg
flex
align-center
justify-center

bug描述：

就是class编译时候没有合并成一行，微信小程序报错！

更多关于uni-app编译时模板里边的多行class为何没有合并到一行 导致微信小程序报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app编译时模板里边的多行class为何没有合并到一行 导致微信小程序报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题的根本原因是微信小程序对 class 属性的格式有严格限制，要求属性值必须写在同一行内，不能换行。

在 uni-app 编译过程中，模板中的换行和空格会被保留，导致生成的微信小程序代码中 class 属性值分散在多行，从而触发微信小程序的语法错误。

解决方案：

  1. 修改模板写法（推荐） 将多行 class 合并到一行，用空格分隔类名：

    <div class="title text-white text-lg flex align-center justify-center">

  2. 使用数组绑定（动态类名场景） 如果需要动态绑定类名，可以使用数组形式：

    <div :class="['title', 'text-white', 'text-lg', 'flex', 'align-center', 'justify-center']">

  3. 使用对象绑定（条件类名场景） 如果需要条件判断，可以使用对象形式：

    <div :class="{
  'title': true,
  'text-white': true,
  'text-lg': true,
  'flex': true,
  'align-center': true,
  'justify-center': true
}">
回到顶部