uni-app 无法获取支付宝小程序原生自定义组件实例

uni-app 无法获取支付宝小程序原生自定义组件实例

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

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

操作步骤：

  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  
            }
  1. 页面使用
<!-- #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  
            }
  1. 页面使用
<!-- #ifdef MP-ALIPAY -->  
        <captcha4 id="captcha" @error="captcha4HandlerError" @close="captcha4HandlerClose" @fail="captcha4HandlerFail"  
            @ready="captcha4HandlerReady" @success="captcha4HandlerVerify" :useNativeButton="false"  
            captchaId="XXXX" />  
<!-- #endif -->

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


更多关于uni-app 无法获取支付宝小程序原生自定义组件实例的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

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

更多关于uni-app 无法获取支付宝小程序原生自定义组件实例的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢提示，原因应该如下， 正常写的话

不写ref，或者ref中return this;uni-app是不报错的， 阿里云的支付宝小程序的写法如下：

这样似乎会丢失this指向，导诊uni-app获取不到组件实例，希望后续可以完善这种情况的支持。 目前可以先暂时手动修改源码。

回复 李明卫: ok

在uni-app中，支付宝小程序原生自定义组件无法通过ref获取组件实例是正常现象。这是因为uni-app跨端框架的封装机制导致的限制。

支付宝小程序的原生自定义组件在uni-app中只能通过事件监听的方式进行通信，无法直接获取组件实例。这是uni-app为了保持多端一致性而做的设计。

解决方案：

  1. 使用事件监听机制：通过组件暴露的事件（如@ready、@success等）来处理业务逻辑
  2. 在captcha4HandlerReady事件中，可以获取到组件初始化完成的状态
  3. 通过组件属性传递参数来控制组件行为

示例改进：

methods: {
  captcha4HandlerReady(e) {
    // 组件准备就绪，可以开始验证流程
    console.log('验证码组件已就绪', e)
  },
  captcha4HandlerVerify(e) {
    // 验证成功回调
    console.log('验证结果', e)
  }
}
回到顶部