uni-app 自定义标签属性编译到微信小程序后属性丢失

uni-app 自定义标签属性编译到微信小程序后属性丢失

示例代码：

<my-xx test="test"></my-xx>
<view type="xxx"></view>

操作步骤：

新建uniapp vue3 项目 test，在首页添加实例代码，编译到微信小程序打开

预期结果：

<my-xx test="test"></my-xx>
<view type="xxx"></view>

实际结果：

<my-xx wx:if="{{b}}" u-i="4834be67-1" bind:l="{{l}}" u-p="{{b}}"></my-xx>
<view type="xxx"></view>

bug描述：

自定义标签属性编译到微信小程序后属性丢失

Image Image

信息类别 详细信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 11专业版22631.5039
HBuilderX类型 正式
HBuilderX版本号 4.56
第三方开发者工具版本号 稳定版 Stable Build (1.06.2412050)
基础库版本号 3.7.10
项目创建方式 HBuilderX

更多关于uni-app 自定义标签属性编译到微信小程序后属性丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

如何在 uniapp 中使用微信小程序原生 UI 库，比如 ant-design-mini/weui?
原生UI 库是指只适配原生小程序写法的 UI 库，在 uniapp 中需要做简单调整，详情可以参考 ant design 提供的 使用说明
这里举例 uni-app如何接入 weui：

在 uniapp 中创建 wxcmoponents 文件夹，表示内部为原生组件
cd wxcomponets && npm init -y && npm i weui-miniprogram 安装 UI 库，在微信小程序工具里 “工具”菜单 --> “构建 npm”
复制 weui-miniprogram/weui-wxss/dist/style/weui.wxss 到项目 style 目录，并改名为 weui.css，在 app.vue 或者 main.js 中导入，这个是 weui 全局样式
在使用 weui 组件库的页面引入，参考下面 pages.json，下面代码表示在微信里引入了 ant-button 和 mp-dialog

“pages”: [{
“path”: “pages/index/index”,
“style”: {
“navigationBarTitleText”: “uni-app”,
“usingComponents”: {
// #ifdef MP-WEIXIN
“ant-button”: “/wxcomponents/miniprogram_npm/antd-mini/Button/index”,
“mp-dialog”: “/wxcomponents/miniprogram_npm/weui-miniprogram/dialog/dialog”
// #endif
}
}
},

在页面中就可以正常使用 ant-design/weui 组件了

<template> <view> <view>123</view> <ant-button type="default" danger icon="ForbidFill">带图标按钮</ant-button> 
<mp-dialog title="test" :show="true" @buttontap="tapDialogButton" :buttons="buttons">  
    <view>test content</view>  
</mp-dialog>
</view> </template> <script> export default{ data(){ return { buttons: [{text: '取消'}, {text: '确认'}] } }, methods:{ tapDialogButton(){ console.log('tap'); } } } </script>

效果图如下：

参考 weui 使用说明

更多关于uni-app 自定义标签属性编译到微信小程序后属性丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢！npm i weui-miniprogram安装UI库确实没有问题，但使用微信useExtendedLib进行UI库引入，就会出现组件属性问题，vue2版本项目正常，可否设置编译不压缩指定标签属性

主要为原vue2项目使用useExtendedLib引入减小包大小

回复 JQ0: vue3 下个版本会支持 useExtendedLib 写法。

回复 DCloud_UNI_OttoJi: 感谢！

描述下具体问题，是自定义组件的 props 接收有问题吗？

你好，不是props 接收问题。自定义组件上添加的属性在编译成小程序后属性名消失了。如demo中，自定义my-xx组件，使用时在组件上定义了test属性，编译到小程序后test 属性就没了，导致使用test属性异常

回复 JQ0: 说一下具体场景吧，props 会被压缩。如果是自动化测试的一些场景，可以考虑使用 data-xxx 这个会保留原始定义

回复 DCloud_UNI_OttoJi: 场景：使用微信提供的weui库，在使用weui组件的情况下，编译时应该是把属性自动当成自定义组件的props进行了压缩，导致编译后的程序无法正常使用weui组件的属性,如进行属性更改data-xxx,组件也无法使用，需保留原组件属性

HBuilderX 4.61.2025040322-alpha 已修复。

这是微信小程序平台对自定义组件属性的限制问题。在微信小程序中，自定义组件的属性需要通过properties显式声明才能被保留，否则会被编译器优化掉。

解决方案：

  1. 对于自定义组件my-xx，需要在组件内部声明properties：
// my-xx.vue
export default {
  properties: {
    test: String
  }
}
  1. 对于原生组件如view的扩展属性，微信小程序本身会保留这些属性，但需要注意：
  • 不要使用微信小程序保留的属性名
  • 属性名建议使用data-前缀，这是微信推荐的写法
  1. 如果必须保留自定义组件的未声明属性，可以尝试在组件选项中添加：
options: {
  styleIsolation: 'shared',
  addGlobalClass: true,
  virtualHost: true
}
回到顶部