uni-app 快手小程序中 uni-popup 组件通过 ref 访问时其值为 null

uni-app 快手小程序中 uni-popup 组件通过 ref 访问时其值为 null

项目信息 值
产品分类 uniapp/小程序
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 14.2.1
第三方开发者工具版本号 1.64.0-2ac5ae3-arm64
基础库版本号 1.99.1
项目创建方式 CLI
CLI版本号 “vite”: “5.2.8”

操作步骤：

  • 运行上面代码

预期结果：

  • popupRef.value 的值不为null，能获取的组件实例。

实际结果：

  • popupRef.value 的值获取为null

bug描述：

<script setup lang="ts">  
import { ref } from 'vue'  
const popupRef = ref<any>()  

const open = () => {  

  console.log('---show =', popupRef.value)    // 打印：---show = null  
  popupRef.value?.open?.('bottom')  
}  
</script>  

<template>  
  <view>  
        <button @click="open">打开弹窗</button>  
        <uni-popup ref="popupRef" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup>  
    </view>  
</template>

如上代码所示，在快手小程序基础库版本号为 1.99.1 运行时，点击按钮获取 popupRef.value 为 null


更多关于uni-app 快手小程序中 uni-popup 组件通过 ref 访问时其值为 null的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

如你之前沟通，在快手上有兼容问题，我试一下最新版快手工程
更新： 问题已确认，参考 https://ask.dcloud.net.cn/question/204250 解决这个问题

更多关于uni-app 快手小程序中 uni-popup 组件通过 ref 访问时其值为 null的实战教程也可以访问 https://www.itying.com/category-93-b0.html


按照这个操作替换了文件还是一样的，是需要更新 HBuilderX缓存？

回复 3***@qq.com: 替换了文件要重启。如果还有问题，在哪个帖子上回复吧，后面发版会带上

目前安卓app上也遇到了这个问题，组件挂载生命周期已经执行，但是绑定的ref对象值为空

回复 1***@qq.com: “vite”: “^2.9.5” HbuildX:4.36 “vue”: “^3.2.33”,

回复 1***@qq.com: 升级到最新的 HBuilderX 试试，如果还不行单独开个帖子艾特我，提供你的复现工程

这是快手小程序平台对ref处理的兼容性问题，可以尝试以下解决方案：

  1. 使用nextTick确保组件已渲染：
import { nextTick } from 'vue'

const open = async () => {
  await nextTick()
  console.log(popupRef.value) // 应该能获取到实例
  popupRef.value?.open?.('bottom')
}
  1. 改用getCurrentInstance获取组件实例：
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
const open = () => {
  const popup = instance?.refs?.popupRef
  popup?.open?.('bottom')
}
回到顶部