<my-xx test="test"></my-xx>
<view type="xxx"></view>
JQ0
- 发布：2025-03-13 23:24
- 更新：2025-03-18 18:00
- 阅读：134
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 11专业版22631.5039
HBuilderX类型： 正式
HBuilderX版本号： 4.56
第三方开发者工具版本号： 稳定版 Stable Build (1.06.2412050)
基础库版本号： 3.7.10
项目创建方式： HBuilderX
示例代码：
操作步骤：
新建uniapp vue3 项目 test，在首页添加实例代码，编译到微信小程序打开
新建uniapp vue3 项目 test，在首页添加实例代码，编译到微信小程序打开
预期结果：
<my-xx test="test"></my-xx>
<view type="xxx"></view>
<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>
<my-xx wx:if="{{b}}" u-i="4834be67-1" bind:l="l" u-p="{{b}}"></my-xx>
<view type="xxx"></view>
bug描述：
自定义标签属性编译到微信小程序后属性丢失
最佳回复
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
如何在 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 使用说明
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
描述下具体问题，是自定义组件的 props 接收有问题吗？
-
JQ0 (作者)
你好，不是props 接收问题。自定义组件上添加的属性在编译成小程序后属性名消失了。如demo中，自定义my-xx组件，使用时在组件上定义了test属性，编译到小程序后test 属性就没了，导致使用test属性异常
2025-03-17 14:29
-
回复 JQ0: 说一下具体场景吧，props 会被压缩。如果是自动化测试的一些场景，可以考虑使用 data-xxx 这个会保留原始定义
2025-03-17 16:03
-
JQ0 (作者)
回复 DCloud_UNI_OttoJi: 场景：使用微信提供的weui库，在使用weui组件的情况下，编译时应该是把属性自动当成自定义组件的props进行了压缩，导致编译后的程序无法正常使用weui组件的属性,如进行属性更改data-xxx,组件也无法使用，需保留原组件属性
2025-03-18 10:45
JQ0 (作者)
感谢！npm i weui-miniprogram安装UI库确实没有问题，但使用微信useExtendedLib进行UI库引入，就会出现组件属性问题，vue2版本项目正常，可否设置编译不压缩指定标签属性
2025-03-19 09:16
JQ0 (作者)
主要为原vue2项目使用useExtendedLib引入减小包大小
2025-03-19 09:18
DCloud_UNI_OttoJi
回复 JQ0: vue3 下个版本会支持 useExtendedLib 写法。
2025-03-20 17:02