uni-app 微信小程序新组件share-element设置key属性后编译消失

uni-app 微信小程序新组件share-element设置key属性后编译消失

示例代码：

<share-element  key="title1" transform="true"></share-element>

操作步骤：

  • 只需要使用该组件，并设置key，即可重现

预期结果：

  • 希望支持key属性

实际结果：

  • 编译后，在开发者工具中，看到不key属性

bug描述：

  • 使用微信小程序组件share-element，在模板中已经有设置了key属性，但是编译后在开发者工具中查看节点信息，看不到key属性

Image Image

信息类别 信息内容
产品分类 uniapp/小程序/微信
PC开发环境 Windows
操作系统版本 win10
第三方工具版本 最新
基础库版本 最新
项目创建方式 CLI
CLI版本 最新

更多关于uni-app 微信小程序新组件share-element设置key属性后编译消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

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

更多关于uni-app 微信小程序新组件share-element设置key属性后编译消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


暂时不想用 vue3，迁移太麻烦了

回复 7***@qq.com: 目前 Vue2 可以采用的方案 :key.props

是的呀，现在我的做法是开发时把 key 换个名字，比如 rename-key=“box” ，编译完成时全局替换掉 rename-key 为 key，这基于你能在开发时想象效果且理解 vue 中 key 的作用

12-20还是没有解决

还没有解决，哎

我遇到的是编译后 transform 属性丢失

:key.props后面的等号里面要加(’’)

用这位老师的方法可以，非常神奇，这是什么原理？

这是一个已知的编译时属性过滤问题。在uni-app编译到微信小程序时，share-element组件的key属性会被编译器过滤掉，因为微信小程序原生share-element组件本身并不支持key属性。

目前可以通过以下方式解决：

  1. 使用id替代：微信小程序的share-element组件支持id属性，可以用作元素标识：
<share-element id="title1" transform="true"></share-element>
  1. *使用data-属性：如果需要传递自定义数据，可以使用data-*属性：
<share-element data-key="title1" transform="true"></share-element>
回到顶部