uni-app 支付宝小程序没有保持与微信一致 for循环出现丢失

uni-app 支付宝小程序没有保持与微信一致 for循环出现丢失

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/小程序/阿里

示例代码：

uuni-app代码示例

<template v-for="(item, index) in tireModelList">
<view v-for="(attr, attrIndex) in item.attrDetails" :key="attr.attributeId" class="tire-model-item pagesSale-flex-center">
<view class="pagesSale-flex-1">
<text class="pagesSale-font-size-12 pagesSale-font-color-grey-2">{{ item.positionName }}</text>
<text class="pagesSale-font-color-black pagesSale-font-weight-500">{{ attr.attributeValue }}</text>
</view>
<button @tap="select(index, attrIndex)" hover-class="app-button--active" class="app-button pagesSale-button--primary">立即选购</button>
</view>
</template>

转义后支付宝小程序的实例

<view
a:for="{{tireModelList}}"
a:for-index="index"
a:for-item="item"
class="tire-model-item pagesSale-flex-center"
a:key="attributeId" 
>
<view class="pagesSale-flex-1">
<text class="pagesSale-font-size-12 pagesSale-font-color-grey-2">
{{item.positionName}}
</text>
<text class="pagesSale-font-color-black pagesSale-font-weight-500">
{{attr.attributeValue}}
</text>  
</view>
<button  
  class="app-button pagesSale-button--primary"  
  hover-class="app-button--active"  
  data-event-opts="{{[['tap',[['select',[index,attrIndex]]]]]}}"  
  onTap="__e"  
>
  立即选购  
</button>  
</view>

转义后微信小程序示例

<block wx:for="{{tireModelList}}" wx:for-item="item" wx:for-index="index" wx:key="attributeId">
<block wx:for="{{item.attrDetails}}" wx:for-item="attr" wx:for-index="attrIndex" wx:key="attributeId">
<view class="tire-model-item pagesSale-flex-center">
<view class="pagesSale-flex-1">
<text class="pagesSale-font-size-12 pagesSale-font-color-grey-2">{{item.positionName}}</text>
<text class="pagesSale-font-color-black pagesSale-font-weight-500">{{attr.attributeValue}}</text>
</view>
<button class="app-button pagesSale-button--primary" hover-class="app-button--active" data-event-opts="{{[['tap',[['select',[index,attrIndex]]]]]}}" bindtap="__e">立即选购</button>
</view>
</block>
</block>

更多关于uni-app 支付宝小程序没有保持与微信一致 for循环出现丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

我使用下面的测试代码并没有复现问题，你试试支付宝小程序会不会出现编译内容丢失的情况。
<template>
<view class="wrapper">
<template v-for="item in list">
<view v-for="(val, idx) in item.value" :key="idx">
{{ item.key }} – {{ val }}
</view>
</template>
</view>
</template>

<script setup lang="ts"> import Test from "./Test.vue"; import { ref } from "vue"; const list = ref([ { key: "key1", value: [1, 2, 3], }, { key: "key2", value: [4, 5, 6], }, ]); </script> <style scoped> .wrapper { padding: 200rpx; font-size: 32rpx; } </style>

更多关于uni-app 支付宝小程序没有保持与微信一致 for循环出现丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


vue2测试一下呢

回复 1***@qq.com: 问题已复现，感谢反馈，已加分。

回复 DCloud_UNI_JBB: 感谢

回复 1***@qq.com: 可以先用block代替第一层循环的template节点

回复 DCloud_UNI_JBB: OK

4.81.2025091909-alpha 版本的HX已修复此问题，可升级到此版本

这是一个支付宝小程序平台差异问题。在uni-app中，嵌套循环的编译结果在支付宝和微信小程序上确实存在差异。

从编译结果可以看出：

  • 微信小程序正确编译出了双层循环结构，外层循环tireModelList，内层循环item.attrDetails
  • 支付宝小程序只编译出了外层循环，丢失了内层循环v-for="(attr, attrIndex) in item.attrDetails"

解决方案：

  1. 临时方案：将嵌套循环拆分为两个独立的循环结构
<template v-for="(item, index) in tireModelList">
  <view v-for="(attr, attrIndex) in item.attrDetails" :key="attr.attributeId">
    <!-- 内容 -->
  </view>
</template>

  1. 检查key值：确保内层循环的key值唯一且稳定，避免使用可能重复的attributeId

  2. 平台条件编译：如问题仅在支付宝出现，可使用条件编译

<!-- #ifdef MP-ALIPAY -->
<!-- 支付宝专用结构 -->
<!-- #endif -->
回到顶部