feat: 支持传递函数作为三方组件参数

[WEN-JY]

这个 PR 做了什么? (简要描述所做更改)
支持传递函数作为参数给三方组件使用，修复关联issue；
支持如下传入函数参数：

import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import './index.scss'
import Component2 from './component'

export default class Index extends Component {
  handleCustomClick = (...args) => {
    console.log('child custom component clicked',...args)
  }
  render() {
    return (
      <View className='index'>
        {/* 三方原生组件 */}
        <custom-comp1
          onComponentClick={this.handleCustomClick}
          onComponentClick1={this.handleCustomClick}
          onComponentClick2={this.handleCustomClick}
          onComponentClick23={this.handleCustomClick}
          onComponentClick4={this.handleCustomClick}
          onComponentClick5={this.handleCustomClick}
          componentClick={this.handleCustomClick}
          someAttr='1'
        ></custom-comp1>
        <Component2 queryParams={this.handleCustomClick} onClick={this.handleCustomClick} />
        <view onTap={this.handleCustomClick}>内置原生组件</view>
      </View>
    )
  }
}

主要改动：
修改了@tarojs/plugin-platform-alipay，使其支持三方组件函数传参，不走原来的事件合成管理逻辑，本身这类参数也是三方组件内部的逻辑，不属于原生事件，注意：遵循小程序自定义组件参数绑定规则，函数需要在page实例上实现
修改了@tarojs/react,在设置函数类属性的时候判断是否为三方组件，如果是，透传属性到attr（以on开头的）和props（普通函数）；
修改了@tarojs/runtime,在setAttribute时判断时三方组件且参数为函数，绑定到页面实例上，供三方组件使用；

这个 PR 是什么类型? (至少选择一个)

• 错误修复(Bugfix) issue id 小程序三方组件传参不支持函数 #11992
• 新功能(Feature)
• 代码重构(Refactor)
• TypeScript 类型定义修改(Typings)
• 文档修改(Docs)
• 代码风格更新(Code style update)
• 其他，请描述(Other, please describe):

这个 PR 涉及以下平台:

• 所有小程序
• 微信小程序
• 支付宝小程序
• 百度小程序
• 字节跳动小程序
• QQ 轻应用
• 京东小程序
• 快应用平台（QuickApp）
• Web 平台（H5）
• 移动端（React-Native）

[taro-bot2]

欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献！🌷🌷🌷

一般 PR 会在一到两周内进行 review，成功合入后会随下一个版本进行发布。

Review 需要耗费大量时间，所以请遵循以下规范，协助我们提高 review 效率🙏🙏🙏

1. 详细介绍 PR 的背景（非常重要，例如解决了什么问题，该问题如何复现等）
2. 确保 CI 顺利运行。
3. 最好能提供对应的测试用例。

为了更好地进行沟通，请加入 Taro 开发者微信群：

[taro-bot2]

欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献！🌷🌷🌷

一般 PR 会在一到两周内进行 review，成功合入后会随下一个版本进行发布。

Review 需要耗费大量时间，所以请遵循以下规范，协助我们提高 review 效率🙏🙏🙏

1. 详细介绍 PR 的背景（非常重要，例如解决了什么问题，该问题如何复现等）
2. 确保 CI 顺利运行。
3. 最好能提供对应的测试用例。

为了更好地进行沟通，请加入 Taro 开发者微信群：

[taro-bot2]

欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献！🌷🌷🌷

一般 PR 会在一到两周内进行 review，成功合入后会随下一个版本进行发布。

Review 需要耗费大量时间，所以请遵循以下规范，协助我们提高 review 效率🙏🙏🙏

1. 详细介绍 PR 的背景（非常重要，例如解决了什么问题，该问题如何复现等）
2. 确保 CI 顺利运行。
3. 最好能提供对应的测试用例。

为了更好地进行沟通，请加入 Taro 开发者微信群：

[taro-bot2]

欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献！🌷🌷🌷

一般 PR 会在一到两周内进行 review，成功合入后会随下一个版本进行发布。

Review 需要耗费大量时间，所以请遵循以下规范，协助我们提高 review 效率🙏🙏🙏

1. 详细介绍 PR 的背景（非常重要，例如解决了什么问题，该问题如何复现等）
2. 确保 CI 顺利运行。
3. 最好能提供对应的测试用例。

为了更好地进行沟通，请加入 Taro 开发者微信群：

[taro-bot2]

欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献！🌷🌷🌷

一般 PR 会在一到两周内进行 review，成功合入后会随下一个版本进行发布。

Review 需要耗费大量时间，所以请遵循以下规范，协助我们提高 review 效率🙏🙏🙏

1. 详细介绍 PR 的背景（非常重要，例如解决了什么问题，该问题如何复现等）
2. 确保 CI 顺利运行。
3. 最好能提供对应的测试用例。

为了更好地进行沟通，请加入 Taro 开发者微信群：

[taro-bot2]

欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献！🌷🌷🌷

一般 PR 会在一到两周内进行 review，成功合入后会随下一个版本进行发布。

Review 需要耗费大量时间，所以请遵循以下规范，协助我们提高 review 效率🙏🙏🙏

1. 详细介绍 PR 的背景（非常重要，例如解决了什么问题，该问题如何复现等）
2. 确保 CI 顺利运行。
3. 最好能提供对应的测试用例。

为了更好地进行沟通，请加入 Taro 开发者微信群：

[taro-bot2]

欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献！🌷🌷🌷

一般 PR 会在一到两周内进行 review，成功合入后会随下一个版本进行发布。

Review 需要耗费大量时间，所以请遵循以下规范，协助我们提高 review 效率🙏🙏🙏

1. 详细介绍 PR 的背景（非常重要，例如解决了什么问题，该问题如何复现等）
2. 确保 CI 顺利运行。
3. 最好能提供对应的测试用例。

为了更好地进行沟通，请加入 Taro 开发者微信群：

[taro-bot2]

欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献！🌷🌷🌷

一般 PR 会在一到两周内进行 review，成功合入后会随下一个版本进行发布。

Review 需要耗费大量时间，所以请遵循以下规范，协助我们提高 review 效率🙏🙏🙏

1. 详细介绍 PR 的背景（非常重要，例如解决了什么问题，该问题如何复现等）
2. 确保 CI 顺利运行。
3. 最好能提供对应的测试用例。

为了更好地进行沟通，请加入 Taro 开发者微信群：

[taro-bot2]

欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献！🌷🌷🌷

一般 PR 会在一到两周内进行 review，成功合入后会随下一个版本进行发布。

Review 需要耗费大量时间，所以请遵循以下规范，协助我们提高 review 效率🙏🙏🙏

1. 详细介绍 PR 的背景（非常重要，例如解决了什么问题，该问题如何复现等）
2. 确保 CI 顺利运行。
3. 最好能提供对应的测试用例。

为了更好地进行沟通，请加入 Taro 开发者微信群：

[taro-bot2]

欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献！🌷🌷🌷

一般 PR 会在一到两周内进行 review，成功合入后会随下一个版本进行发布。

Review 需要耗费大量时间，所以请遵循以下规范，协助我们提高 review 效率🙏🙏🙏

1. 详细介绍 PR 的背景（非常重要，例如解决了什么问题，该问题如何复现等）
2. 确保 CI 顺利运行。
3. 最好能提供对应的测试用例。

为了更好地进行沟通，请加入 Taro 开发者微信群：

[WEN-JY]

@Chen-jj 帮看下，是不是有更好的方案，实测https://github.com/WEN-JY/taro-demo/tree/feature-support-function-params
已经支持各种类型函数传递，修复了 #11992 担心哪里不够友好，看看有没有建议

[WEN-JY]

通过绑定三方组件自身的sid，实现渲染多个三方组件时，参数互不干扰

[Chen-jj]

@WEN-JY 666我们看看

[vini123]

虚幻之物对应着冥冥之路！：《羽》

[Chen-jj]

修改了@tarojs/plugin-platform-alipay，使其支持三方组件函数传参，不走原来的事件合成管理逻辑，本身这类参数也是三方组件内部的逻辑，不属于原生事件，注意：遵循小程序自定义组件参数绑定规则，函数需要在page实例上实现

@WEN-JY 关于这部分有疑问，onEvent 绑定为事件是为了响应第三方组件抛出的事件 (triggerEvent)，如果这样改为普通属性，则接收不到事件了。

感觉做到普通属性可以传递函数就可以？

[WEN-JY]

修改了@tarojs/plugin-platform-alipay，使其支持三方组件函数传参，不走原来的事件合成管理逻辑，本身这类参数也是三方组件内部的逻辑，不属于原生事件，注意：遵循小程序自定义组件参数绑定规则，函数需要在page实例上实现

@WEN-JY 关于这部分有疑问，onEvent 绑定为事件是为了响应第三方组件抛出的事件 (triggerEvent)，如果这样改为普通属性，则接收不到事件了。

感觉做到普通属性可以传递函数就可以？

这里的改动是for 三方原生组件的，对正常组件的onEvent事件不影响，如：<input onChange={handleChange}>;

关于支持普通函数后为什么不满足诉求,有两个考虑：
（1）现成的大量三方库提供的原生组件是通过onFunction的形式暴露props，支持普通函数解决不了此类现有组件的问题；
如：
<survey onOpenQuery={handleQuery} onClose={handleCLose} />;
onOpenQuery、onMaskClick，onInit，onOpen，onClose等，这些事件（回调）是非严格的taro事件类型的(无type、无detail)；没办法通过eventHandle进行代理；
（2）三方组件本身的原生事件无需框架层面关心，理论上onTap、onTouch之类的原生事件，三方组件内部会进行监听，如果有必要，也可以通过本PR实现支持的特性 on+function或普通function暴露给父组件或者taro工程进行调用，不影响的
@Chen-jj

[Chen-jj]

1）现成的大量三方库提供的原生组件是通过onFunction的形式暴露props，支持普通函数解决不了此类现有组件的问题

这一点的确是没考虑到

2）三方组件本身的原生事件无需框架层面关心，理论上onTap、onTouch之类的原生事件，三方组件内部会进行监听

关于这里，我的意思不是自定义组件内原生事件的监听。是自定义组件通过 this.triggerEvent(name, params) 触发的事件，Taro 无法监听到。

[WEN-JY]

1）现成的大量三方库提供的原生组件是通过onFunction的形式暴露props，支持普通函数解决不了此类现有组件的问题

这一点的确是没考虑到

2）三方组件本身的原生事件无需框架层面关心，理论上onTap、onTouch之类的原生事件，三方组件内部会进行监听

关于这里，我的意思不是自定义组件内原生事件的监听。是自定义组件通过 this.triggerEvent(name, params) 触发的事件，Taro 无法监听到。

第二点你说的对，
阿里系不支持 this.triggerEvent(name, params)触发事件：https://opendocs.alipay.com/search?keyword=triggerEvent&pageIndex=1&pageSize=10&type=tinyapp，
我将微信端的事件绑定先还原了，你再看看，实际测了微信端this.triggerEvent(name, params)，已经可以了，目前这个pr主要针对阿里系的小程序，没有函数，基本就失去了父子通信的一半能力，后面我计划将ref的实现也写一下
@Chen-jj 你再看看新的commit

由于本身支持传递函数需要修改template，微信端并没有修改taro-weapp，所以还原思路是判断下阿里系的事件绑定走单独处理，其余的小程序不变即可，但后续是不是还是要支持下微信端传递onEventHandle非事件函数？我还没想好怎么进行通用实现成本比较低

[WEN-JY]

主要改动在于通过分端判断恢复支持triggerEvent的形式监听事件，交给eh统一处理，支付宝、钉钉小程序支持通过属性将函数传递给三方原生组件，支持事件调用

[WEN-JY]

第一版本。。好多review搞蒙了，这个版本不支持triggerEvent触发事件，后面的修复了

[Chen-jj]

梳理了一下：

目的是在支付宝小程序中使用 onXXX 的属性给自定义组件传递函数，支付宝只允许使用 on 开头的属性传递函数。

也就是支持这种写法 onComponentClick={this.handleCustomClick}，这种写法不需要支持：componentClick={this.handleCustomClick}。

但是在 JSX 里使用 onXXX 的语法会被处理为事件绑定，因此需要在 reconciler 把支付宝小程序原生自定义组件的 onXXX 属性对应的函数绑定到页面对象上，再通过修改模板传递页面对象上的对应函数。

所以修改 reconciler 和支付宝的模板即可。

但后续是不是还是要支持下微信端传递onEventHandle非事件函数

这点和 JSX 的事件语法冲突，暂不打算支持。

[Chen-jj]

Review 了一下，总体逻辑没有问题的，但需要把这些改动解耦到支付宝插件中，麻烦抽空看看的~

[WEN-JY]

Review 了一下，总体逻辑没有问题的，但需要把这些改动解耦到支付宝插件中，麻烦抽空看看的~

收到，有些确实是我不太清楚的，我来调整下

[WEN-JY]

通过taro-alipay实现hooks支持自定义三方组件传递onEvent函数，新合并到feat/3.5

[Chen-jj]

尴尬，3.5 合进 next 后，PR 被关了

@WEN-JY 麻烦重新提一下到 next，还是我这边 cherry-pick 一下

[tonyjeffreyIn]

这个改动有合入么？ 现在在哪个版本上面？

[shenstar]

在vue3框架也修复了吗，最新版本3.5.2，vue3框架支付宝小程序原生组件仍然不能传递函数

[tonyjeffreyIn]

@WEN-JY 方便重提下么？

[tonyjeffreyIn]

尴尬，3.5 合进 next 后，PR 被关了

@WEN-JY 麻烦重新提一下到 next，还是我这边 cherry-pick 一下
这个你能操作合入下么？ @Chen-jj

[antiansky]

请问下这个feat什么时候可以发布？ @WEN-JY @Chen-jj @tonyjeffreyIn

[ct-0902]

请问这个什么时候可以修复，用支付宝第三方组件无法使用

[tian1024527726]

@Chen-jj 这个问题修复好了吗？

[cuzme]

想问下这个问题修复了吗