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

- 发布: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>
最佳回复

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