fix: 支付宝小程序组件支持 vue 事件监听方式（需启用 component2）question/110978

packages/uni-template-compiler/__tests__/compiler-mp-alipay.spec.js

 const compiler = require('../lib')
 
-function assertCodegen (template, templateCode, renderCode = 'with(this){}', options = {}) {
-  const res = compiler.compile(template, {
+function assertCodegen (template, templateCode, renderCode = 'with(this){}', mpOptions = {}, baseOptions = {}) {
+  const res = compiler.compile(template, Object.assign({
     resourcePath: 'test.wxml',
     mp: Object.assign({
       minified: true,
       isTest: true,
       platform: 'mp-alipay'
-    }, options)
-  })
+    }, mpOptions)
+  }, baseOptions))
 
   expect(res.template).toBe(templateCode)
   expect(res.render).toBe(renderCode)
@@ -45,6 +45,15 @@ describe('mp:compiler-mp-alipay', () => {
       '<component1 v-for="item in items" :ref="c4"></component1>',
       '<component1 vue-id="{{\'551070e6-1-\'+__i0__}}" ref="__r" data-ref-in-for="{{c4}}" a:for="{{items}}" a:for-item="item" a:for-index="__i0__" onVueInit="__l"></component1>'
     )
+    assertCodegen(
+      '<component1 @change="onChange">text</component1>',
+      '<component1 onChange="__e" vue-id="551070e6-1" data-event-opts="{{[[\'^change\',[[\'onChange\']]]]}}" data-com-type="wx" ref="__r" onVueInit="__l">text</component1>',
+      undefined,
+      undefined,
+      {
+        wxComponents: { component1: '/mycomponents/component1' }
+      }
+    )
   })
   it('generate default slot', () => {
     assertCodegen(

packages/uni-template-compiler/lib/script/traverse/data/index.js

@@ -44,6 +44,14 @@ module.exports = function traverseData (path, state, tagName) {
         t.stringLiteral('wx')
       )
     )
+    if (state.options.platform.name === 'mp-alipay') {
+      addAttrProperties.push(
+        t.objectProperty(
+          t.stringLiteral('ref'),
+          t.stringLiteral('__r')
+        )
+      )
+    }
   }
 
   if (addAttrProperties.length) {
@@ -56,4 +64,4 @@ module.exports = function traverseData (path, state, tagName) {
       )
     }
   }
-}
+}

src/platforms/mp-alipay/runtime/wrapper/util.js

@@ -112,6 +112,36 @@ export function handleRef (ref) {
   if (!ref) {
     return
   }
+  if (ref.props['data-com-type'] === 'wx') {
+    const eventProps = {}
+    let refProps = ref.props
+    // 初始化支付宝小程序组件事件
+    Object.keys(refProps).forEach(key => {
+      const handler = refProps[key]
+      const res = key.match(/^on([A-Z])(\S*)/)
+      if (res && typeof handler === 'function' && handler.name === 'bound handleEvent') {
+        const event = res && (res[1].toLowerCase() + res[2])
+        refProps[key] = eventProps[key] = function () {
+          const props = Object.assign({}, refProps)
+          props[key] = handler
+          // 由于支付宝事件可能包含多个参数，不使用微信小程序事件格式
+          delete props['data-com-type']
+          triggerEvent.bind({ props })(event, {
+            __args__: [...arguments]
+          })
+        }
+      }
+    })
+    // 处理 props 重写
+    Object.defineProperty(ref, 'props', {
+      get () {
+        return refProps
+      },
+      set (value) {
+        refProps = Object.assign(value, eventProps)
+      }
+    })
+  }
   const refName = ref.props['data-ref']
   const refInForName = ref.props['data-ref-in-for']
   if (refName) {
@@ -129,11 +159,13 @@ export function triggerEvent (type, detail, options) {
 
   const eventOpts = this.props['data-event-opts']
   const eventParams = this.props['data-event-params']
+  const comType = this.props['data-com-type']
 
   const target = {
     dataset: {
       eventOpts,
-      eventParams
+      eventParams,
+      comType
     }
   }