李明卫

发布：2025-08-27 10:33
更新：2025-08-27 13:17
阅读：18

【报Bug】无法获取支付宝小程序原生自定义组件实例

分类：uni-app

bug反馈

产品分类： uniapp/小程序/阿里

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： 11

HBuilderX类型：正式

HBuilderX版本号： 4.76

第三方开发者工具版本号： 3.9.56

基础库版本号： 2.9.73

项目创建方式： HBuilderX

操作步骤：

1、在目录下新建mycomponents放置原生组件，在pages.json引入支付宝小程序自定义组件

{  
            "path": "pages/book/book",  
            "style": {  
                "navigationBarTitleText": "就诊信息确认",  
                // #ifdef MP-WEIXIN  
                "usingComponents": {  
                    "t-captcha": "plugin://captcha/t-captcha"  
                },  
                // #endif  
                // #ifdef MP-ALIPAY  
                "usingComponents": {  
                    "captcha4": "/mycomponents/captcha4/captcha4"  
                },  
                // #endif  
                "enablePullDownRefresh": false  
            }

2、页面使用

<!-- #ifdef MP-ALIPAY -->  
        <captcha4 id="captcha" @error="captcha4HandlerError" @close="captcha4HandlerClose" @fail="captcha4HandlerFail"  
            @ready="captcha4HandlerReady" @success="captcha4HandlerVerify" :useNativeButton="false"  
            captchaId="XXXX" />  
        <!-- #endif -->

预期结果：

能通过ref拿到组件实例

实际结果：

不能通过ref拿到组件实例

bug描述：

我们要开发一个支付宝小程序的滑动验证码功能，使用的是阿里云的号码认证服务。

参考文档

该服务提供的图形验证码支付宝小程序SDK

按照文档做如下操作

1、在目录下新建mycomponents放置原生组件，在pages.json引入支付宝小程序自定义组件

{  
            "path": "pages/book/book",  
            "style": {  
                "navigationBarTitleText": "就诊信息确认",  
                // #ifdef MP-WEIXIN  
                "usingComponents": {  
                    "t-captcha": "plugin://captcha/t-captcha"  
                },  
                // #endif  
                // #ifdef MP-ALIPAY  
                "usingComponents": {  
                    "captcha4": "/mycomponents/captcha4/captcha4"  
                },  
                // #endif  
                "enablePullDownRefresh": false  
            }

2、页面使用

<!-- #ifdef MP-ALIPAY -->  
        <captcha4 id="captcha" @error="captcha4HandlerError" @close="captcha4HandlerClose" @fail="captcha4HandlerFail"  
            @ready="captcha4HandlerReady" @success="captcha4HandlerVerify" :useNativeButton="false"  
            captchaId="XXXX" />  
        <!-- #endif -->

出现问题如附件所示。
另外也无法通过ref获取组件实例。

2025-08-27 10:33 负责人:DCloud_UNI_JBB 分享

1 个回复

DCloud_UNI_JBB

原生组件随便写个简单的组件试试能不能正常获取

李明卫 (作者)

谢谢提示，原因应该如下，

正常写的话

Component({  

    data: {  

        x: 2  

    },  

    ref(){  

        return this;  

    }  

})

不写ref，或者ref中return this;uni-app是不报错的，

阿里云的支付宝小程序的写法如下：

Component({  

    data: {  

        x: 2  

    },  

    ref(){  

        return {  

            a(){  



            }  

        }  

    }  

})

这样似乎会丢失this指向，导诊uni-app获取不到组件实例，希望后续可以完善这种情况的支持。

目前可以先暂时手动修改源码。

2025-08-27 14:08

DCloud_UNI_JBB

回复李明卫: ok

2025-08-27 14:10

要回复问题请先登录或注册

【报Bug】无法获取支付宝小程序原生自定义组件实例

预期结果：

能通过ref拿到组件实例

实际结果：

不能通过ref拿到组件实例

bug描述：

1 个回复

公告

相关问题

【报Bug】无法获取支付宝小程序原生自定义组件实例

预期结果： 能通过ref拿到组件实例

实际结果： 不能通过ref拿到组件实例

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

预期结果：

能通过ref拿到组件实例

实际结果：

不能通过ref拿到组件实例