uni-app 模板语法修复说明

错误描述

在非H5平台（如微信小程序）上，出现了以下模板语法错误：

1. :key 表达式错误

   :key 不支持表达式 owner.$orig.id||index

2. :class 方法调用错误

   :class不支持 getAuditStatusClass(owner.isaudit) 语法

错误原因

uni-app 在编译到不同平台时，对模板语法有不同的限制：

H5平台

• 支持复杂的表达式

• 支持在模板中直接调用方法

• 语法更接近标准Vue

小程序平台

• 表达式支持有限

• 不支持在模板中直接调用方法

• 需要使用更简单的语法

修复方案

1. 修复 :key 表达式

修复前：

:key="owner.id || index"
:key="'owner_' + index"  // 第一次修复，但仍有问题

修复后：

:key="index"

说明：

• 微信小程序不支持字符串拼接表达式

• 直接使用index作为key

• 确保key的唯一性和简洁性

2. 修复 :class 对象语法和字符串拼接

修复前：

:class="{ 'selected': selectedOwner && selectedOwner.id === owner.id }"
:class="{ disabled: !selectedAddress.building }"
:class="'status-text ' + getAuditStatusClass(owner.isaudit)"

修复后：

:class="selectedOwner && selectedOwner.id === owner.id ? 'owner-item selected' : 'owner-item'"
:class="!selectedAddress.building ? 'selector-trigger disabled' : 'selector-trigger'"
:class="getOwnerStatusClass(owner.isaudit)"

说明：

• 使用三元操作符替代对象语法

• 避免字符串拼接表达式

• 创建专门的方法处理复杂class逻辑

• 保持样式逻辑不变

具体修复内容

文件：pagesB/butler/qrcode-generator.vue

修复位置1：业主列表项

行号： 约101-128行

修复内容：

<!-- 修复前 -->
<view
    class="owner-item"
    v-for="(owner, index) in filteredOwnerList"
    :key="owner.id || index"
    :class="{ 'selected': selectedOwner && selectedOwner.id === owner.id }"
    @click="selectOwner(owner)"
>
    <!-- ... -->
    <text class="status-text" :class="getAuditStatusClass(owner.isaudit)">
        {{ getAuditStatusText(owner.isaudit) }}
    </text>

    <!-- ... -->
</view>

<!-- 修复后 -->
<view
    class="owner-item"
    v-for="(owner, index) in filteredOwnerList"
    :key="'owner_' + index"
    :class="selectedOwner && selectedOwner.id === owner.id ? 'owner-item selected' : 'owner-item'"
    @click="selectOwner(owner)"
>
    <!-- ... -->
    <text class="status-text" :class="'status-text ' + getAuditStatusClass(owner.isaudit)">
        {{ getAuditStatusText(owner.isaudit) }}
    </text>

    <!-- ... -->
</view>

uni-app 模板语法最佳实践

1. :key 属性

<!-- ✅ 推荐：使用简单表达式 -->
:key="'item_' + index"
:key="item.id"

<!-- ❌ 避免：复杂表达式 -->
:key="item.id || index"
:key="item.id + '_' + item.type"

2. :class 属性

<!-- ✅ 推荐：使用三元操作符 -->
:class="isActive ? 'active' : 'inactive'"
:class="'base-class ' + dynamicClass"

<!-- ❌ 避免：对象语法和方法调用 -->
:class="{ active: isActive, disabled: isDisabled }"
:class="getClassName(item)"

3. 条件渲染

<!-- ✅ 推荐：使用简单条件 -->
v-if="item.visible"
v-show="showContent"

<!-- ❌ 避免：复杂表达式 -->
v-if="item.status === 'active' && item.type !== 'hidden'"

4. 事件处理

<!-- ✅ 推荐：直接调用方法 -->
@click="handleClick"
@click="handleClick(item)"

<!-- ✅ 也可以：简单表达式 -->
@click="isEditing = !isEditing"

<!-- ❌ 避免：复杂逻辑 -->
@click="item.status = item.status === 'active' ? 'inactive' : 'active'"

兼容性检查清单

在开发uni-app时，建议检查以下内容：

• :key 使用简单表达式

• :class 避免方法调用

• v-for 循环变量命名规范

• 事件处理器使用方法名

• 避免在模板中使用复杂计算

• 使用computed属性处理复杂逻辑