JQ0
JQ0
  • 发布:2025-03-13 23:24
  • 更新:2025-04-04 08:07
  • 阅读:277

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

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 11专业版22631.5039

HBuilderX类型: 正式

HBuilderX版本号: 4.56

第三方开发者工具版本号: 稳定版 Stable Build (1.06.2412050)

基础库版本号: 3.7.10

项目创建方式: HBuilderX

示例代码:

<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描述:

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

2025-03-13 23:24 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

如何在 uniapp 中使用微信小程序原生 UI 库,比如 ant-design-mini/weui?

原生UI 库是指只适配原生小程序写法的 UI 库,在 uniapp 中需要做简单调整,详情可以参考 ant design 提供的 使用说明

这里举例 uni-app如何接入 weui:

  1. 在 uniapp 中创建 wxcmoponents 文件夹,表示内部为原生组件
  2. cd wxcomponets && npm init -y && npm i weui-miniprogram 安装 UI 库,在微信小程序工具里 “工具”菜单 --> “构建 npm”
  3. 复制 weui-miniprogram/weui-wxss/dist/style/weui.wxss 到项目 style 目录,并改名为 weui.css,在 app.vue 或者 main.js 中导入,这个是 weui 全局样式
  4. 在使用 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  
        }  
      }  
    },
  1. 在页面中就可以正常使用 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 使用说明

  • 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

  • JQ0 (作者)

    回复 DCloud_UNI_OttoJi: 感谢!

    2025-03-26 10:16

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

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

  • JQ0 (作者)

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

    2025-03-17 14:29

  • DCloud_UNI_OttoJi

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

    2025-03-17 16:03

  • JQ0 (作者)

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

    2025-03-18 10:45

DCloud

DCloud

HBuilderX 4.61.2025040322-alpha 已修复。

要回复问题请先登录注册