uni-app编译到微信小程序时会过滤模板:key

uni-app编译到微信小程序时会过滤模板:key

开发环境 版本号 项目创建方式
Windows win10 HBuilderX
Android Android 10 -
手机厂商 手机机型 -
华为 p30 -

示例代码：

<share-element class="wh120" key="avatar" :transform="transformIdx == index"><image></image></share-element>

操作步骤：

<share-element class="wh120" key="avatar" :transform="transformIdx == index"><image></image></share-element>

预期结果：

<share-element class="wh120" key="avatar" :transform="transformIdx == index"><image></image></share-element>

实际结果：

<share-element class="wh120"  transform="transformIdx == index"><image></image></share-element>

bug描述：

uniapp编译到微信小程序时会过滤模板:key， 比如：

<share-element class="wh120" key="avatar" :transform="transformIdx == index"><image></image></share-element>

编译到微信小程序后 ，key=“avatar” 消失了。

微信小程序很多组件依靠 key 来同步操作，key 被过滤后，组件都出问题了


更多关于uni-app编译到微信小程序时会过滤模板:key的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

bug已确认，已加分。后续考虑优化
临时先手动加一下吧

更多关于uni-app编译到微信小程序时会过滤模板:key的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢

一年了

编译到微信小程序，正常的话:key会被编译为wx:key。
能否提供一份示例呢？

比如很多微信小程序的组件依靠 key ，比如共享元素组件： <share-element class="name" key="title" :transform="transformIdx == index">
<view class="ft16">{{ title }}</view>
</share-element> 以上使用uniapp 编译到微信小程序 key=“title” 消失了

不是 在 <view v-for="(tab, index) in tabBars" :key=“index” 以上位于 v-for 操作的 的 :key 值会被正常的编译，
但是，当在模板中使用 单纯的 key=“xxxx” 或者 :key=“xxx” 时，编译后， key=“xxxx” 就消失了。如： <share-element class="name" key="title" :transform="transformIdx == index"> 这个时候 ，编译后 key=“xxx” 就消失了

目前 Vue2 可以采用的方案 :key.props

在uni-app编译到微信小程序时，确实存在模板中的key属性被过滤的问题。这是因为uni-app的编译器在转换Vue语法到小程序模板时，会过滤掉非标准属性，而key在微信小程序中并非通用属性。

原因分析：

  • uni-app的编译机制会保留Vue和小程序的共有属性，但key在微信小程序组件中不是标准属性
  • 微信小程序的share-element组件确实依赖key属性进行动画同步
  • 编译器将自定义属性视为非必要属性而移除

解决方案：

  1. 使用data-key替代：
<share-element class="wh120" data-key="avatar" :transform="transformIdx == index">
  <image></image>
</share-element>
  1. 在mounted中通过setAttribute设置：
mounted() {
  const shareElement = this.$refs.shareElement
  if(shareElement) {
    shareElement.setAttribute('key', 'avatar')
  }
}
  1. 使用条件编译保留key：
<!-- #ifdef MP-WEIXIN -->
<share-element class="wh120" key="avatar" :transform="transformIdx == index">
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<share-element class="wh120" :transform="transformIdx == index">
<!-- #endif -->
  <image></image>
</share-element>
回到顶部