最新版本(3.0.0-4070620250821001) 在 uni-app 支付宝小程序端 获取不到 ref 的引用

最新版本(3.0.0-4070620250821001) 在 uni-app 支付宝小程序端 获取不到 ref 的引用

开发环境 版本号 项目创建方式
Windows 11 CLI

示例代码:

<template>  
    <view>组件</view>  
</template>  

<script lang="ts" setup>  
import { ref } from 'vue'  

const count = ref(0)  

const increment = () => {  
  count.value++  
}  

defineExpose({  
  increment  
})  
</script>
<template>  
  <view class="content">  
    <view>使用组件</view>  
    <upload ref="upRef" />  
  </view>  
</template>  

<script setup lang="ts">  
import { ref, onMounted } from 'vue'  
import Upload from '../../components/upload.vue'  

const upRef = ref()  

onMounted(() => {  
    // 这里在支付宝端输出为 undefined  
    console.log(upRef.value)  
})  
</script>

操作步骤:

  1. 写一个自定义组件
  2. 获取组件的引用 <uploader ref="upRef">
  3. const upRef = ref()
  4. 在onShow 里打印一下 upRef , 如 console.log(upRef)
  5. 编译的支付宝小程序,使用支付宝的开发工具运行
  6. 会发现打印的结果为 undefined

预期结果:

正常应该输出组件的引用对象 , 如下

Proxy(Object){__v_skip: true, increment: ƒ}

实际结果:

实际上支付宝端输出

undefined

希望能尽早修复问题。

bug描述:

在uniapp的 3.0.0-4070620250821001 版本中,支付宝小程序 无法使用 ref 引用

值得注意的是 在测试中 微信小程序 和 H5 都是正常的,只有支付宝小程序不可以。

const upRef = ref()  

onMounted(() => {  
    // 这里在支付宝端输出为 undefined  
    console.log(upRef.value)  
})

更多关于最新版本(3.0.0-4070620250821001) 在 uni-app 支付宝小程序端 获取不到 ref 的引用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于最新版本(3.0.0-4070620250821001) 在 uni-app 支付宝小程序端 获取不到 ref 的引用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个在 uni-app 3.0.0-4070620250821001 版本中支付宝小程序平台特有的 ref 引用问题。从代码分析来看,你的 ref 使用方式符合 Vue 3 规范,在微信小程序和 H5 端工作正常,说明核心逻辑没有问题。

问题出现在支付宝小程序的 ref 绑定机制上。在支付宝小程序环境中,ref 的绑定时机可能与组件的挂载时机存在差异。建议尝试以下解决方案:

  1. 使用 nextTick 延迟获取
import { nextTick } from 'vue'

onMounted(async () => {
  await nextTick()
  console.log(upRef.value) // 此时应该能正常获取
})
  1. 检查组件注册方式: 确保在支付宝小程序中组件注册正确,可以尝试显式注册:
import Upload from '../../components/upload.vue'

const upRef = ref<InstanceType<typeof Upload> | null>(null)
回到顶部