uni-app CLI 4.45 环境下 第三方UI库组件中的id无法绑定在view组件上

发布于 1周前 作者 vueper 来自 Uni-App

uni-app CLI 4.45 环境下 第三方UI库组件中的id无法绑定在view组件上

操作步骤：

  1. 使用uniapp CLI初始化项目；
  2. 在项目中安装图鸟UI依赖 -> [@tuniao](/user/tuniao)/tnui-vue3-uniapp；
  3. 在微信小程序页面中按照图鸟UI要求引入<tn-sticky></tn-sticky>组件；
  4. 使用uni -p mp-weixin命令启动开发，等待微信小程序渲染完成，查看sticky组件对应元素节点是否有id。

预期结果：

sticky组件下class名称为tn-sticky的元素节点应显示其id属性值为ts-xxxx(xxxx为随机数)

实际结果：

sticky组件下class名称为tn-sticky的元素节点无id属性

bug描述：

依赖包：@tuniao/tnui-vue3-uniapp，版本：1.0.22
node版本：v22.12.0

bug描述：CLI版本从4.36升级至4.45后，图鸟UI（就是上面的@tuniao/tnui-vue3-uniapp）中的sticky组件无法将id绑至view组件上（尝试过使用固定的id也不行），微信小程序渲染完成后view上面没有id，注：问题代码是图鸟UI的代码，也就是node_modules里图鸟UI依赖包中的代码，不是src里用户自己写的代码

Image 1 Image 2 Image 3

开发环境 版本号
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 15.2
第三方开发者工具版本号 4.45
基础库版本号 3.7.1
项目创建方式 CLI
CLI版本号 4.45

Harmonyos Next教程
4 回复

在你项目下执行一下npm info看看uni-app相关依赖版本是多少。我这使用3.0.0-4040520250104002测试没遇到你说的问题。另外你的小程序开发工具版本、基础库版本是多少？


uni-app相关依赖和你使用的相同是3.0.0-4040520250104002，小程序开发工具版本：微信开发者工具（Stable 1.06.2409140）基础库版本：WeChatLib: 3.7.1，电脑是M1芯片的Macbook

回复 p***@126.com: 把你的项目带着lock文件打包一份发我看下，最好编译产物也带着。我这微信开发者工具（Stable 1.06.2409140）版本选不了3.7.1基础库，3.6.6之后就是3.7.2了

在uni-app CLI 4.45 环境下，如果你遇到第三方UI库组件中的 id 无法绑定在 view 组件上的问题，通常可能是由于第三方UI库内部实现或uni-app框架的限制导致的。不过，在大多数情况下，通过正确的方式绑定 id 应该是可行的。以下是一个基本的示例，展示如何在uni-app中绑定 id 到 view 组件上，同时也展示了如何在第三方UI库组件中尝试类似操作。

示例代码

首先，确保你的项目已经安装了uni-app CLI 4.45，并且已经引入了所需的第三方UI库（例如Vant Weapp）。

1. 创建一个新的uni-app项目

vue create -p dcloudio/uni-preset-vue my-uni-app
cd my-uni-app
npm install @dcloudio/uni-ui
# 假设我们使用Vant Weapp作为第三方UI库
npm install @vant/weapp -S --production

2. 在 pages/index/index.vue 中使用第三方UI库组件和 view 组件

<template>
  <view>
    <!-- 使用Vant Weapp的Button组件 -->
    <van-button id="van-button-id" type="primary">Primary Button</van-button>
    
    <!-- 自定义view组件，绑定id -->
    <view :id="customViewId">Custom View</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      customViewId: 'custom-view-id'
    };
  },
  mounted() {
    // 验证id是否绑定成功
    console.log(document.getElementById('van-button-id')); // 可能返回null，取决于Vant Weapp的实现
    console.log(document.getElementById('custom-view-id')); // 应该返回对应的view元素
  }
};
</script>

<style>
/* 样式可以根据需要调整 */
</style>

3. 注意事项

  • 第三方UI库限制：有些第三方UI库可能会将内部元素渲染为Shadow DOM或其他结构，这可能导致外部无法直接通过 id 选择器访问到这些元素。如果 van-button 的 id 无法通过 document.getElementById 获取，这可能是Vant Weapp的内部实现导致的。
  • 动态绑定：在上面的示例中，customViewId 是通过数据绑定动态设置的，这证明了在原生 view 组件上绑定 id 是可行的。
  • 调试：如果 id 绑定不生效，可以尝试检查控制台是否有错误提示，或者查看渲染后的DOM结构是否符合预期。

通过以上示例，你应该能够在uni-app项目中正确绑定 id 到 view 组件上，并了解如何在第三方UI库组件中尝试类似操作。如果问题依旧存在，可能需要查看第三方UI库的文档或提交issue到相关仓库。

回到顶部