feat: 支付宝小程序支持传递函数给三方组件

NervJS · Jul 11, 2022 · 89a917a · 89a917a
1 parent b577956
commit 89a917a
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 403 deletions.
diff --git a/packages/taro-alipay/src/runtime.ts b/packages/taro-alipay/src/runtime.ts
@@ -1,4 +1,4 @@
-import { mergeInternalComponents, mergeReconciler } from '@tarojs/shared'
+import { hooks, mergeInternalComponents, mergeReconciler } from '@tarojs/shared'
 
 import { components, hostConfig } from './runtime-utils'
 
@@ -12,5 +12,16 @@ Object.defineProperty(navigator, 'userAgent', {
   }
 })
 
+hooks.tap('onSetThirdPartyComponentsEvent', (dom: any, name: string, value: any) => {
+  // 以on开头的参数成员，作为attr设置，最终给原生三方组件使用
+  dom.setAttribute(name, value)
+  dom.props[name] = value
+})
+
+hooks.tap('bindFunctionPropertyToPage', (Current:{page:any},dom: any, name: string, value: any) => {
+  // 如果是三方组件的函数，需要绑定到页面上进行处理
+  Current.page[`${dom.sid}${name}`] = value
+})
+
 mergeReconciler(hostConfig)
 mergeInternalComponents(components)
diff --git a/packages/taro-alipay/src/template.ts b/packages/taro-alipay/src/template.ts
@@ -50,7 +50,8 @@ export class Template extends RecursiveTemplate {
       } else if (attr.startsWith('bind')) {
         return str + `${attr}="eh" `
       } else if (attr.startsWith('on')) {
-        return str + `${attr}="eh" `
+        // 普通函数传递，使用页面上的函数实例
+        return str + `${attr}="{{ i.sid }}${toCamelCase(attr)}" `
       }
 
       return str + `${attr}="{{ i.${toCamelCase(attr)} }}" `

diff --git a/packages/taro-react/src/props.ts b/packages/taro-react/src/props.ts
@@ -1,5 +1,5 @@
 import { FormElement, Style, TaroElement } from '@tarojs/runtime'
-import { capitalize, internalComponents, isFunction, isNumber, isObject, isString, toCamelCase } from '@tarojs/shared'
+import { capitalize, hooks, internalComponents, isFunction, isNumber, isObject, isString, toCamelCase } from '@tarojs/shared'
 
 export type Props = Record<string, unknown>
 
@@ -30,6 +30,7 @@ export function updateProps (dom: TaroElement, oldProps: Props, newProps: Props)
 //   const handlers = el!.__handlers[e.type]
 //   handlers[0](e)
 // }
+const isInternalComponents = (dom: TaroElement) => capitalize(toCamelCase(dom.tagName.toLowerCase())) in internalComponents
 
 function setEvent (dom: TaroElement, name: string, value: unknown, oldValue?: unknown) {
   const isCapture = name.endsWith('Capture')
@@ -38,9 +39,7 @@ function setEvent (dom: TaroElement, name: string, value: unknown, oldValue?: un
     eventName = eventName.slice(0, -7)
   }
 
-  const compName = capitalize(toCamelCase(dom.tagName.toLowerCase()))
-
-  if (eventName === 'click' && compName in internalComponents) {
+  if (eventName === 'click' && isInternalComponents(dom)) {
     eventName = 'tap'
   }
 
@@ -110,7 +109,11 @@ function setProperty (dom: TaroElement, name: string, value: unknown, oldValue?:
       }
     }
   } else if (isEventName(name)) {
-    setEvent(dom, name, value, oldValue)
+    if (hooks.isExist('onSetThirdPartyComponentsEvent') && !isInternalComponents(dom)) {
+      hooks.call('onSetThirdPartyComponentsEvent', dom, name, value)
+    } else {
+      setEvent(dom, name, value, oldValue)
+    }
   } else if (name === 'dangerouslySetInnerHTML') {
     const newHtml = (value as DangerouslySetInnerHTML)?.__html ?? ''
     const oldHtml = (oldValue as DangerouslySetInnerHTML)?.__html ?? ''

diff --git a/packages/taro-runtime/src/dom/element.ts b/packages/taro-runtime/src/dom/element.ts
@@ -1,4 +1,4 @@
-import { EMPTY_OBJ, hooks, isArray, isFunction, isObject, isString, isUndefined, Shortcuts, toCamelCase, warn } from '@tarojs/shared'
+import { capitalize, EMPTY_OBJ, hooks, internalComponents, isArray, isFunction, isObject, isString, isUndefined, Shortcuts, toCamelCase, warn } from '@tarojs/shared'
 
 import {
   CATCH_VIEW,
@@ -12,6 +12,7 @@ import {
   STYLE,
   VIEW
 } from '../constants'
+import { Current } from '../current'
 import { MutationObserver, MutationRecordType } from '../dom-external/mutation-observer'
 import type { Attributes, Func } from '../interface'
 import { extend, getComponentsAlias, isElement, isHasExtractProp, shortcutAttr } from '../utils'
@@ -161,6 +162,13 @@ export class TaroElement extends TaroNode {
         eventSource.set(value, this)
         break
       default:
+        // eslint-disable-next-line no-case-declarations
+        const isInternalComponents = (dom: TaroElement) => capitalize(toCamelCase(dom.tagName.toLowerCase())) in internalComponents
+
+        if (isFunction(value) && !isInternalComponents(this) && hooks.isExist('bindFunctionPropertyToPage')) {
+          hooks.call('bindFunctionPropertyToPage', Current, this, qualifiedName, value)
+        }
+
         this.props[qualifiedName] = value as string
 
         if (qualifiedName.startsWith('data-')) {